@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));

:root {
  color-scheme: light dark;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html,
body,
#root {
  height: 100%;
  margin: 0;
  overscroll-behavior: none;
}

* {
  box-sizing: border-box;
}

::selection {
  background: color-mix(in srgb, var(--color-indigo-500) 35%, transparent);
}

/* thin, unobtrusive scrollbars that match the theme */
* {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, currentColor 18%, transparent) transparent;
}
*::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, currentColor 16%, transparent);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, currentColor 28%, transparent);
  background-clip: content-box;
}

@keyframes overlay-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes toast-in {
  from {
    opacity: 0;
    transform: translate(-50%, 10px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}
@keyframes row-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-overlay-in {
  animation: overlay-in 180ms ease-out both;
}
.animate-panel-in {
  animation: panel-in 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.animate-toast-in {
  animation: toast-in 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.animate-row-in {
  animation: row-in 240ms ease-out both;
}

.compose-body ul {
  list-style: disc;
  padding-left: 1.4em;
}
.compose-body ol {
  list-style: decimal;
  padding-left: 1.4em;
}
.compose-body a {
  color: var(--color-indigo-600);
  text-decoration: underline;
}
.compose-body blockquote {
  margin: 6px 0;
  padding-left: 10px;
  border-left: 3px solid color-mix(in srgb, currentColor 25%, transparent);
  color: color-mix(in srgb, currentColor 65%, transparent);
}