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

/* Make clickable elements push inward */

.menu li > :not(ul):not(.menu-title):not(details).active,
.menu li > :not(ul):not(.menu-title):not(details):active,
.menu li > details > summary:active {
  background-color: var(--fallback-bc, oklch(var(--bc) / 0.1)) !important;
  color: inherit !important;
  @apply scale-98 ease-in-out duration-300;
}

.cursor-pointer:active {
  @apply scale-98 ease-in-out duration-300;
}

.icon.cursor-pointer:active {
  @apply scale-90 ease-in-out duration-300;
}

/* Parent utility classes which activate children */
/*
  If we supported 3rd party tailwind plugins we could stop declaring them individually:

  plugin(function({ addVariant }) {
    addVariant('relationship', '&.relationship, &.relationship *')
  }),
*/

.relationship .relationship\:flex,
.relationship.relationship\:flex {
  @apply !flex;
}

.relationship .relationship\:visible,
.relationship.relationship\:visible {
  @apply !visible;
}

.relationship .relationship\:text-white,
.relationship.relationship\:text-white {
  @apply !text-white;
}

#conversations .relationship {
  @apply bg-gray-200 dark:bg-gray-700;
}

.relationship .relationship\:hidden,
.relationship.relationship\:hidden {
  @apply !hidden;
}

.relationship .relationship\:pl-4,
.relationship.relationship\:pl-4 {
  @apply !pl-4;
}

.relationship .relationship\:hidden,
.relationship.relationship\:hidden {
  @apply !hidden;
}

.nav-closed .nav-closed\:hidden {
  @apply hidden;
}

.nav-closed .nav-closed\:z-auto {
  @apply z-auto;
}

.nav-closed .nav-closed\:relative {
  @apply relative;
}

.show-previews .show-previews\:preview-container {
  @apply !flex;
}

.show-previews .show-previews\:pt-24 {
  @apply pt-24;
}

/* Override the style change that chrome brings when it autofills fields */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px white inset !important;
  -webkit-text-fill-color: #000 !important;
}

input:focus {
  --tw-ring-color: #ffffff !important;
}

/* Animations */

.animate-blink {
  animation: blink 1.2s steps(1, start) infinite;
}

@keyframes blink {
  0%,
  40% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.animate-breathe {
  animation: breathe 1.3s linear infinite;
}

@keyframes breathe {
  0%,
  80%,
  100% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.3);
  }
}

/* Repeated visual components */

.key {
  @apply py-2 px-3 rounded-md border border-gray-300 text-sm min-w-9 text-center whitespace-nowrap max-h-9 flex items-center;
}

/* Prose styling */

.prose :where(pre):not(:where([class~="not-prose"] *)) {
  @apply mx-0 mt-5 mb-3;
}

.prose :where(.prose > :first-child):not(:where([class~="not-prose"] *)) {
  @apply mt-0;
}

.prose :where(p):not(:where([class~="not-prose"] *)) {
  @apply mb-3;
}

@layer base {
  html {
    @apply h-full overscroll-none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: -webkit-fill-available;
  }
  body {
    @apply h-full font-sans text-gray-950 dark:text-gray-100 flex overflow-y-auto;
    -webkit-overflow-scrolling: touch;
    min-height: -webkit-fill-available;
  }
}

@media not all and (prefers-color-scheme: dark) {
  .dark
    :where(
      .menu
        li:not(.menu-title):not(.disabled)
        > :not(ul):not(details):not(.menu-title)
    ):not(.active):hover,
  .dark
    :where(
      .menu
        li:not(.menu-title):not(.disabled)
        > details
        > summary:not(.menu-title)
    ):not(.active):hover {
    background-color: rgb(59 59 61);
  }
}

@media (prefers-color-scheme: dark) {
  .prose :where(a):not(:where([class~="not-prose"] *)) {
    color: #374151;
  }
}

nav {
  -webkit-touch-callout: none !important;
}

#drag-n-drop-shade {
  outline: 8px dashed #000;
  outline-offset: -10px;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 99999;
}

.dark #drag-n-drop-shade {
  outline-color: #888;
}
