@layer atoms {
  .mobius-text-area__input {
    box-sizing: border-box;
    flex: 1 1 0%;
    border: var(--border-default);
    border-radius: var(--input-border-radius);
    padding: var(--size-xs) var(--size-sm);
    margin: 0px;
    font-family: var(--font-family);
    font-size: var(--font-size-regular);
    color: var(--color-text);
    outline: 0px;
    background-color: var(--color-background-input);

    /* Focused */
    &:focus-visible {
      border-color: var(--color-primary);
      background-color: var(--color-background-input-active);
      box-shadow: var(--box-shadow-default);
    }

    /* Hovered  */
    &:hover:not(.--is-disabled):not(&.--is-invalid) {
      border-color: var(--color-primary);
      background-color: var(--color-background-input-active);
    }

    /* Disabled  */
    &.--is-disabled {
      background-color: var(--color-background-light);
      border-color: var(--color-border-medium);
      color: var(--color-text-light);
      cursor: not-allowed;
    }

    /* Invalid */
    &:not(.--is-disabled).--is-invalid {
      border-color: var(--color-error);
      background-color: var(--color-error-background);
      color: var(--color-error);
    }
  }

  .mobius-text-area {
    box-sizing: border-box;
    width: 100%;
  }
}
