@layer components {
  :root {
    --password-strength-meter__font-family: var(
      --typography-body-medium__font-family
    );
    --password-strength-meter__font-size: var(
      --typography-body-medium__font-size
    );
    --password-strength-meter__line-height: var(
      --typography-body-medium__line-height
    );
    --password-strength-meter__letter-spacing: var(
      --typography-body-medium__letter-spacing
    );
    --password-strength-meter__font-weight: var(
      --typography-body-medium__font-weight
    );
    --password-strength-meter__color--basic: var(--color-neutral-400);
    --password-strength-meter__color--zxcvbn-score-1: var(--color-error);
    --password-strength-meter__color--zxcvbn-score-2: var(--color-error);
    --password-strength-meter__color--zxcvbn-score-3: var(--color-warning);
    --password-strength-meter__color--zxcvbn-score-4: var(--color-success);
    --password-strength-meter__color--zxcvbn-score-5: var(--color-success);
  }

  :root.dark {
    --password-strength-meter__color--basic: var(--color-neutral-200);
  }

  .password-strength-meter {
    @apply flex items-center gap-x-1;
    appearance: none;
    height: auto;
    color: var(--password-strength-meter__color--basic);
    & > .password-strength-meter__icon::after {
      content: "sentiment_very_dissatisfied";
    }
    &[aria-valuenow="1"] {
      color: var(--password-strength-meter__color--zxcvbn-score-1);
      & > .password-strength-meter__icon::after {
        content: "sentiment_very_dissatisfied";
      }
    }

    &[aria-valuenow="2"] {
      color: var(--password-strength-meter__color--zxcvbn-score-2);
      & > .password-strength-meter__icon::after {
        content: "sentiment_dissatisfied";
      }
    }

    &[aria-valuenow="3"] {
      color: var(--password-strength-meter__color--zxcvbn-score-3);
      & > .password-strength-meter__icon::after {
        content: "sentiment_neutral";
      }
    }

    &[aria-valuenow="4"] {
      color: var(--password-strength-meter__color--zxcvbn-score-4);
      & > .password-strength-meter__icon::after {
        content: "sentiment_satisfied";
      }
    }

    &[aria-valuenow="5"] {
      color: var(--password-strength-meter__color--zxcvbn-score-5);
      & > .password-strength-meter__icon::after {
        content: "sentiment_very_satisfied";
      }
    }
  }

  .password-strength-meter__icon {
    @apply align-middle;
    font-size: calc(var(--password-strength-meter__font-size) * 1.42857142857)
      /* 20 / 14 = 1.42857142857 */;
  }

  .password-strength-meter__description {
    @apply align-middle;
    font-family: var(--password-strength-meter__font-family);
    font-size: var(--password-strength-meter__font-size);
    line-height: var(--password-strength-meter__line-height);
    letter-spacing: var(--password-strength-meter__letter-spacing);
    font-weight: var(--password-strength-meter__font-weight);
  }
}
