.cl-card, .cl-userButtonPopoverCard {
  @apply backdrop-blur-xl backdrop-saturate-150 border shadow-xl shadow-zinc-500/10;
  @apply bg-zinc-50/80 text-zinc-800 border-zinc-200;
  @apply py-4;
  --accent: theme('colors.zinc.900');
  --accentDark: theme('colors.zinc.800');
}

.cl-formButtonPrimary {
  --accent: theme('colors.zinc.900');
  --accentDark: theme('colors.zinc.800');
  @apply text-zinc-50;
}

.cl-modalBackdrop {
  @apply backdrop-blur-sm backdrop-saturate-150;
  @apply bg-zinc-100/40;
}

.dark .cl-modalBackdrop {
  @apply bg-zinc-900/40;
}

.cl-userButtonPopoverCard {
  @apply w-64;
}

.cl-userButtonPopoverActions {
  @apply mt-1;
}

.cl-userButtonPopoverCard .cl-userPreview {
  @apply px-4;
}

.cl-formFieldInput {
  @apply bg-transparent text-zinc-800;
}

.cl-userButtonPopoverActionButton {
  @apply px-2 gap-1;
}

.cl-footerActionLink, .cl-formResendCodeLink {
  @apply text-zinc-900 underline;
}

.cl-formFieldHintText {
  font-size: 12px;
}

.dark {
  .🔒 , .cl-formField p, .cl-formField p[aria-live="polite"], .cl-formFieldInputShowPasswordButton {
    @apply text-zinc-400;
  }

  .cl-card, .cl-userButtonPopoverCard {
    @apply bg-zinc-900/80 text-zinc-200 border-zinc-800 shadow-zinc-900/20;
  }

  [class*="cl-internal-"] {
    --accent: theme('colors.zinc.50');
    --accentDark: theme('colors.zinc.200');
    --border: hsla(0, 0%, 100%, 0.08);
    --accentLightest: hsla(0, 0%, 100%, 0.04);
    --accentLighter: hsla(0, 0%, 100%, 0.16);
    --accentDarker: hsla(0, 0%, 100%, 0.64);
  }

  .cl-profileSectionTitleText {
    @apply text-zinc-100;
  }

  .cl-breadcrumbsItem, .cl-breadcrumbsItemDivider,
  [data-localization-key],
  .cl-fileDropAreaOuterBox *, .cl-profileSectionContent__password p {
    @apply text-zinc-400;
  }

  .cl-navbarButton.cl-active {
    @apply bg-zinc-400/10;
  }

  .cl-navbar {
    @apply border-zinc-800;
  }

  .cl-userPreviewSecondaryIdentifier, .cl-headerSubtitle, .cl-profileSectionContent__activeDevices p {
    @apply text-zinc-400;
  }

  .cl-headerTitle, .cl-socialButtonsBlockButton, .cl-alternativeMethodsBlockButton, .cl-userButtonPopoverActionButtonIcon, .cl-userButtonPopoverActionButtonText {
    @apply text-zinc-200;
  }

  .cl-alternativeMethodsBlockButton svg:not(.cl-alternativeMethodsBlockButtonArrow) {
    @apply invert;
  }

  .cl-socialButtonsBlockButton, .cl-alternativeMethodsBlockButton {
    @apply border-zinc-500/20 rounded-xl;
  }

  .cl-socialButtonsProviderIcon__github, .cl-providerIcon__github {
    @apply invert;
  }

  .cl-dividerLine {
    @apply bg-zinc-200/10;
  }

  .cl-dividerText {
    @apply text-zinc-500;
  }

  .cl-formFieldAction {
    @apply text-zinc-200 underline;
  }

  .cl-formFieldLabel {
    @apply text-zinc-400;
  }

  .cl-formFieldInput, .cl-identityPreview {
    @apply bg-transparent text-zinc-200 border-zinc-800;
  }

  .cl-formButtonPrimary {
    --accent: theme('colors.zinc.50');
    --accentDark: theme('colors.zinc.200');
    @apply text-zinc-900;
  }

  .cl-footerActionText, .cl-formHeaderSubtitle {
    @apply text-zinc-400;
  }

  .cl-footerActionLink, .cl-formHeaderTitle, .cl-formResendCodeLink {
    @apply text-zinc-100;
  }

  .cl-modalCloseButton {
    @apply text-zinc-200;
  }

  .cl-otpCodeFieldInput {
    @apply text-zinc-200 border-zinc-700;
  }

  .cl-formFieldSuccessText__password,
  .cl-formFieldDirectionsText__password,
  .cl-formFieldHintText__password,
  .cl-formFieldInfoText__password,
  .cl-identityPreviewText {
    @apply text-zinc-400;
  }

  .cl-identityPreviewEditButton {
    @apply text-zinc-200;
  }
}
