@layer components {
  .password-requirements {
    background-color: var(--color-surface-sunken);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    margin-block-start: 0.5rem;
    padding: 0.75rem;
  }

  .password-requirements-label {
    color: var(--color-text);
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
  }

  .password-requirements-list {
    list-style: none;
    margin: 0;
    padding: 0;

    li {
      align-items: center;
      color: var(--color-text-secondary);
      display: flex;
      font-size: 0.875rem;
      gap: 0.5rem;
      padding-block: 0.25rem;
    }
  }

  /* The met/unmet icon. States only set --requirement-*. */
  .requirement {
    --requirement-icon: "○";
    --requirement-icon-color: var(--color-text-secondary);
    --requirement-icon-weight: inherit;

    &::before {
      color: var(--requirement-icon-color);
      content: var(--requirement-icon) / "";
      flex-shrink: 0;
      font-weight: var(--requirement-icon-weight);
      inline-size: 1.25rem;
      text-align: center;
    }
  }
  .requirement.met {
    --requirement-icon: "✓";
    --requirement-icon-color: var(--color-success);
    --requirement-icon-weight: bold;

    color: var(--color-success);
  }
}