@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
@import "tippy.js/dist/tippy";
@import "tippy.js/dist/border";
@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 {
  .unsectioned > #nav > ul > li > div {
    @apply py-1 border-b border-gray-300;
  }

  .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.wrapped pre {
    @apply whitespace-pre-wrap;
  }

  .code .line {
    @apply leading-relaxed;
  }

  .code.numbered {
    @apply relative;
  }

  .code.numbered:before {
    content: "";
    left: 2.7em;
    @apply absolute top-0 bottom-0 border-r border-gray-200 z-10;
  }

  .code.numbered .line {
    padding-left: calc(2.7em + 14px);
    @apply relative;
  }

  .code .line-number {
    display: inline-block;
    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 absolute left-0;
  }

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

  .code.focussed .line:not(.highlighted-line) *,
  .code.focussed .line:not(.highlighted-line) .line-content * {
    @apply !text-gray-700 !text-opacity-40;
  }

  .code.focussed .line:not(.highlighted-line) .line-number {
    @apply !opacity-70;
  }

  .code.focussed .line.highlighted-line {
    @apply bg-yellow-50;
  }

  .code.focussed .line.highlighted-line .line-number {
    @apply text-gray-900;
  }

  .prose .code {
    @apply !bg-white border border-gray-300 text-gray-600 my-8 rounded-md py-4 text-sm overflow-auto max-w-3xl w-full mx-auto;
  }

  .prose .code:not(.numbered) .line {
    @apply px-4;
  }

  .prose .embed {
    @apply my-8;
  }

  .resize-handle {
    @apply flex items-center justify-center h-full w-full border-gray-300 bg-white hover:bg-indigo-100 hover:bg-opacity-20 text-gray-400 hover:text-gray-700 transition select-none touch-none;
  }
}

@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;
  }

  .checked-bg {
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cg fill='%23f3f3f3' fill-opacity='1'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E");
  }
}