@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
@import "tippy.js/dist/tippy";
@import "code_theme";
@import "tooltip_theme";

@layer base {
  html {
    scroll-behavior: smooth;
  }

  @media screen and (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
  }

  [x-cloak] {
    display: none !important;
  }

  pre[class*="language-"] {
    padding: 0 !important;
    margin: 0 !important;
  }

  .feather {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
  }

  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    @apply bg-gray-300 transition-colors;
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: content-box;
  }

  ::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-400;
  }
}

@layer components {
  #nav > ul > li {
    @apply py-1;
  }

  .nav-toggle {
    @apply flex items-center cursor-pointer pr-3 hover:bg-gray-200 hover:bg-opacity-50;
  }

  .nav-label {
    @apply truncate w-full whitespace-nowrap text-left select-none;
  }

  .code {
    @apply font-mono;
  }

  .code pre {
    @apply block;
  }

  .code .line {
    @apply flex items-center leading-relaxed;
  }

  .code.numbered {
    @apply relative pt-3;
  }

  .code.numbered:before {
    content: "";
    left: calc(2.7em + 8px);
    @apply absolute top-0 bottom-0 border-r border-gray-200;
  }

  .code .line-number {
    width: calc(2.7em + 8px);
    padding-top: 3px;
    padding-bottom: 3px;
    padding-right: 8px;
    margin-right: 16px;
    @apply font-mono text-right text-gray-400 flex-none text-xs;
  }

  .code .line-content {
    @apply flex-none pr-4;
  }

  /* .code .line:before {
    content: counter(line);
    width: calc(3em + 8px);
    padding-top: 2px;
    padding-bottom: 2px;
    padding-right: 8px;
    @apply font-mono inline-block text-right mr-4 text-gray-400 border-r border-gray-200;
  } */
}

@layer utilities {
  .form-input {
    @apply border-gray-300 text-gray-700 focus:ring-indigo-300 focus:border-indigo-300 rounded-sm text-sm w-full;
  }
}