@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  color-scheme: light;
}

body {
  min-height: 100vh;
  background:
    linear-gradient(120deg, rgba(14, 165, 233, 0.10), transparent 28rem),
    linear-gradient(145deg, #f7f9fc 0%, #edf2f7 48%, #f8faf5 100%);
  color: #152033;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

@keyframes mail-import-stripes {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

.animate-mail-import-stripes {
  animation: mail-import-stripes 1.2s linear infinite;
}

.mail-import-shimmer {
  background:
    linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.18) 38%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0.18) 62%, transparent 100%);
  background-size: 250% 100%;
  mix-blend-mode: screen;
  animation: mail-import-stripes 1.1s linear infinite;
  opacity: 0.7;
}

iframe {
  color-scheme: light;
}

@layer components {
  .control-surface {
    @apply border border-slate-200/80 bg-white/90 shadow-soft backdrop-blur;
    border-color: color-mix(in srgb, var(--accent) 10%, #cbd5e1);
  }

  .icon-button {
    @apply grid h-10 w-10 place-items-center rounded-lg border border-slate-200/80 bg-white text-slate-600 transition disabled:opacity-40;
  }

  .icon-button:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, white);
  }

  .theme-button {
    @apply inline-flex items-center justify-center gap-2 rounded-lg px-4 font-bold text-white transition disabled:cursor-not-allowed disabled:opacity-50;
    background: var(--accent);
    box-shadow: 0 15px 24px -19px color-mix(in srgb, var(--accent) 82%, transparent);
  }

  .theme-button:hover {
    filter: brightness(0.94);
  }

  .theme-button-soft {
    @apply inline-flex items-center justify-center gap-2 rounded-lg border px-4 font-bold transition disabled:cursor-not-allowed disabled:opacity-50;
    border-color: color-mix(in srgb, var(--accent) 24%, #cbd5e1);
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, white);
    box-shadow: 0 10px 18px -18px color-mix(in srgb, var(--accent) 68%, transparent);
  }

  .theme-button-soft:hover {
    background: color-mix(in srgb, var(--accent) 18%, white);
  }

  .mobile-reader-action-label {
    display: none;
  }

  @media (orientation: portrait) {
    .mail-toolbar-labeled {
      padding-inline: 0.75rem;
    }

    .mail-toolbar-label {
      display: none;
    }

    .mobile-reader-action-wide-on-portrait {
      display: inline-flex;
      gap: 0.4rem;
      min-width: max-content;
      flex: 0 0 auto;
      padding-inline: 0.75rem;
      white-space: nowrap;
    }

    .mobile-reader-action-wide-on-portrait .mobile-reader-action-label {
      display: inline-block;
    }
  }

  @media (orientation: landscape) {
    .mobile-reader-action-labeled-on-landscape {
      display: inline-flex;
      gap: 0.4rem;
      min-width: max-content;
      flex: 0 0 auto;
      padding-inline: 0.75rem;
      white-space: nowrap;
    }

    .mobile-reader-action-labeled-on-landscape .mobile-reader-action-label {
      display: inline-block;
    }
  }

  .theme-tab {
    @apply h-9 rounded-md px-4 text-sm font-black transition;
  }

  .theme-tab-active {
    background: var(--accent);
    color: white;
    box-shadow: 0 14px 24px -18px color-mix(in srgb, var(--accent) 80%, transparent);
  }

  .theme-tab-inactive {
    @apply text-slate-500 hover:text-slate-900;
  }

  .theme-tab-inactive:hover {
    background: color-mix(in srgb, var(--accent) 8%, white);
  }

  .theme-list-item {
    @apply flex h-10 items-center gap-3 rounded-lg border border-transparent px-3 text-left font-bold transition;
  }

  .theme-list-item-active {
    border-color: color-mix(in srgb, var(--accent) 22%, white);
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, white);
  }

  .theme-chip {
    @apply rounded-full px-2 py-0.5 text-xs text-white;
    background: var(--accent);
    box-shadow: 0 12px 20px -16px color-mix(in srgb, var(--accent) 90%, transparent);
  }

  .field {
    @apply rounded-lg border border-slate-200 bg-white px-3 outline-none transition;
  }

  .field:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, white);
  }

  .mail-reader-share-invite form,
  .mail-reader-share-invite button,
  .mail-reader-share-invite input[type="button"],
  .mail-reader-share-invite input[type="submit"] {
    display: none !important;
  }
}
