@layer components {
  :root {
    --password-policy__font-family: var(--typography-body-medium__font-family);
    --password-policy__font-size: var(--typography-body-medium__font-size);
    --password-policy__line-height: var(--typography-body-medium__line-height);
    --password-policy__letter-spacing: var(
      --typography-body-medium__letter-spacing
    );
    --password-policy__font-weight: var(--typography-body-medium__font-weight);
    --password-policy__color--basic: var(--color-neutral-400);
    --password-policy__color--pass: var(--color-success);
    --password-policy__color--fail: var(--color-error);
  }

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

  .password-policy {
    @apply flex items-center gap-x-2;
    font-family: var(--password-policy__font-family);
    font-size: var(--password-policy__font-size);
    line-height: var(--password-policy__line-height);
    letter-spacing: var(--password-policy__letter-spacing);
    font-weight: var(--password-policy__font-weight);
    color: var(--password-policy__color--basic);
    & > .password-policy__icon::after {
      content: "cancel";
    }

    &[data-state="pass"] {
      color: var(--password-policy__color--pass);
      & > .password-policy__icon::after {
        content: "check_circle";
      }
    }

    &[data-state="fail"] {
      color: var(--password-policy__color--fail);
      & > .password-policy__icon::after {
        content: "cancel";
      }
    }
  }

  .password-policy__icon {
    font-size: 1rem;
  }
}
