@layer components {
  :root {
    --input__bg-color: transparent;
    --input__bg-color--disabled: var(--color-neutral-100);
    --input__ring-color: var(--color-neutral-100);
    --input__ring-color--focus: var(--color-primary-theme-primary);
    --input__ring-color--error: var(--color-error);
    --input__ring-width: var(--border-width-regular);
    --input__ring-width--focus: var(--border-width-regular--active);
    --input__border-radius: var(--border-radius-rounded-square);
    --input__placeholder-color: var(--color-neutral-200);
    --input__text-color: var(--color-neutral-700);
    --input__text-color--disabled: var(--color-neutral-300);
    --input__font-family: var(--typography-body-large__font-family);
    --input__font-size: var(--typography-body-large__font-size);
    --input__line-height: var(--typography-body-large__line-height);
    --input__letter-spacing: var(--typography-body-large__letter-spacing);
    --input__font-weight: var(--typography-body-large__font-weight);
    --input__py: 1em;
    --input__px: 1.125em; /* 18 / 16 = 1.125 */

    --input__error-message-text-color: var(--color-error);
    --input__error-message-font-family: var(
      --typography-body-medium__font-family
    );
    --input__error-message-font-size: var(--typography-body-medium__font-size);
    --input__error-message-line-height: var(
      --typography-body-medium__line-height
    );
    --input__error-message-letter-spacing: var(
      --typography-body-medium__letter-spacing
    );
    --input__error-message-font-weight: var(
      --typography-body-medium__font-weight
    );

    --input__password-padding-end: 2.375em; /* 38 / 16 = 2.375 */
    --input__password-visibility-icon-color: var(--color-neutral-500);
  }
}

:root.dark {
  --input__bg-color--disabled: var(--color-neutral-500);
  --input__ring-color: var(--color-neutral-500);
  --input__placeholder-color: var(--color-neutral-400);
  --input__text-color: var(--color-neutral-100);
  --input__text-color--disabled: var(--color-neutral-300);
  --input__password-visibility-icon-color: var(--color-neutral-300);
}

.input {
  @apply placeholder:[color:var(--input\_\_placeholder-color)];
  background-color: var(--input__bg-color);
  padding: var(--input__py) var(--input__px);
  border-radius: var(--input__border-radius);
  color: var(--input__text-color);
  font-family: var(--input__font-family);
  font-size: var(--input__font-size);
  line-height: var(--input__line-height);
  letter-spacing: var(--input__letter-spacing);
  font-weight: var(--input__font-weight);
  caret-color: var(--input__ring-color--focus);
  @apply ring-inset
      ring-[length:var(--input\_\_ring-width)]
      ring-[color:var(--input\_\_ring-color)];

  &:focus {
    @apply ring-inset
      ring-[length:var(--input\_\_ring-width--focus)]
      ring-[color:var(--input\_\_ring-color--focus)];
  }

  &:disabled,
  &[data-disabled] {
    background-color: var(--input__bg-color--disabled);
    color: var(--input__text-color--disabled);
  }

  &.input--error {
    @apply ring-inset
      ring-[color:var(--input\_\_ring-color--error)];
  }
}

.input__error-message {
  color: var(--input__error-message-text-color);
  font-family: var(--input__error-message-font-family);
  font-size: var(--input__error-message-font-size);
  line-height: var(--input__error-message-line-height);
  letter-spacing: var(--input__error-message-letter-spacing);
  font-weight: var(--input__error-message-font-weight);
}

.input.input__password {
  @apply ltr:pr-[var(--input\_\_password-padding-end)] rtl:pl-[var(--input\_\_password-padding-end)];
}

.input__password-visibility-icon {
  @apply material-icons align-middle text-xl;

  color: var(--input__password-visibility-icon-color);
}
