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

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

  * {
    font-variant-ligatures: none;
  }

  ::selection,
  .cm-selectionBackground {
    @apply bg-selection !important;
  }

  /* Disable user selection to make it more "app-like" */
  :not(a),
  :not(input):not(textarea),
  :not(input):not(textarea)::after,
  :not(input):not(textarea)::before {
    @apply select-none cursor-default;
  }

  .select-all * {
    /*@apply select-all;*/
  }

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

  table th {
    @apply text-left;
  }

  .hide-scrollbars {
    &::-webkit-scrollbar-corner,
    &::-webkit-scrollbar {
      display: NONE !important;
    }
  }

  /* Style the scrollbars */
  * {
    ::-webkit-scrollbar-corner,
    ::-webkit-scrollbar {
      @apply w-1.5 h-1.5;
    }

    .scrollbar-track,
    ::-webkit-scrollbar-corner,
    ::-webkit-scrollbar {
      @apply bg-transparent;
    }

    &:hover {
      &.scrollbar-thumb,
      &::-webkit-scrollbar-thumb {
        @apply bg-background-highlight-secondary hover:bg-fg-subtler rounded-full;
      }
    }
  }

  .rtl {
    direction: rtl;
  }

  iframe {
    &::-webkit-scrollbar-corner,
    &::-webkit-scrollbar {
      @apply bg-background-highlight-secondary !important;
    }
  }

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