@import "tailwindcss";
@import "../../packages/tailwind-config/index.css";
@source "../../packages/ui/src";

@layer base {
  html,
  body,
  #root {
    @apply w-full h-full overflow-hidden text-text bg-surface;
  }

  :root {
    --font-family-interface: "";
    --font-family-editor: "";
    --editor-font-size: 13px;
  }

  :root {
    font-variant-ligatures: none;
  }

  html[data-platform="linux"] {
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
  }

  ::selection {
    @apply bg-selection;
  }

  :not(a),
  :not(input):not(textarea),
  :not(input):not(textarea)::after,
  :not(input):not(textarea)::before {
    @apply select-none cursor-default;
  }

  input,
  textarea {
    &::placeholder {
      @apply text-placeholder;
    }
  }

  a,
  a[href] * {
    @apply cursor-pointer!;
  }

  table th {
    @apply text-left;
  }

  :not(iframe) {
    &::-webkit-scrollbar,
    &::-webkit-scrollbar-corner {
      @apply w-[8px] h-[8px] bg-transparent;
    }

    &::-webkit-scrollbar-track {
      @apply bg-transparent;
    }

    &::-webkit-scrollbar-thumb {
      @apply bg-text-subtlest rounded-[4px] opacity-20;
    }

    &::-webkit-scrollbar-thumb:hover {
      @apply opacity-40!;
    }
  }

  .hide-scrollbars {
    &::-webkit-scrollbar-corner,
    &::-webkit-scrollbar {
      @apply hidden!;
    }
  }

  .rtl {
    direction: rtl;
  }

  /* A flow that arrives while following tints and fades, so arrival shows without motion. An
     opacity fade on a layer of its own, which the compositor runs off the main thread. */
  .flow-arrived::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background-color: color-mix(in srgb, var(--primary) 12%, transparent);
    will-change: opacity;
    animation: flow-arrived 1.4s ease-out both;
    animation-delay: inherit;
  }

  @keyframes flow-arrived {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }

  :root {
    color-scheme: light dark;
    --transition-duration: 100ms ease-in-out;
    --color-white: 255 100% 100%;
    --color-black: 255 0% 0%;
  }
}