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

@layer components {
  .code-snippet-wrapper {
    @apply flex;
  }
  .code-snippet-inner {
    @apply flex flex-col w-auto max-w-3xl;
  }
  .code-snippet-header {
    @apply bg-white dark:bg-slate-900 px-2 py-2 flex gap-1 items-center rounded-t border-t border-l border-r border-gray-200 dark:border-slate-800;
  }
  .code-snippet-btn {
    @apply rounded-full h-4 w-4;
  }
  .btn-green {
    @apply bg-emerald-500;
  }
  .btn-yellow {
    @apply bg-amber-500;
  }
  .btn-red {
    @apply bg-rose-500;
  }
  .code-snippet-body {
    @apply bg-slate-50 p-0 dark:bg-slate-950 shadow-sm rounded-b border-b border-l border-r border-gray-200 dark:border-slate-800 overflow-auto;
  }
  pre {
    @apply m-0 p-0 text-sm leading-snug -mt-1;
    background: transparent !important;
    margin: 0 !important;
    padding: 0.5rem 0.8rem !important;
  }
  code {
    @apply block whitespace-pre-wrap;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .prose a {
    @apply text-sky-600 dark:text-sky-400 underline decoration-sky-500 hover:decoration-sky-600 transition-all;
  }
}

* {
  scrollbar-width: thin;
  scrollbar-color: #888 #f1f1f1;
}

*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

*::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

*::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 10px;
  border: 2px solid #f1f1f1;
}

.dark * {
  scrollbar-color: #555 #2d2d2d;
}

.dark *::-webkit-scrollbar-track {
  background: #2d2d2d;
}

.dark *::-webkit-scrollbar-thumb {
  background-color: #555;
  border: 2px solid #2d2d2d;
}

@media (max-width: 640px) {
  * {
    scrollbar-color: #aaa #e0e0e0;
  }

  *::-webkit-scrollbar-track {
    background: #e0e0e0;
  }

  *::-webkit-scrollbar-thumb {
    background-color: #aaa;
    border: 2px solid #e0e0e0;
  }

  .dark * {
    scrollbar-color: #444 #1e1e1e;
  }

  .dark *::-webkit-scrollbar-track {
    background: #1e1e1e;
  }

  .dark *::-webkit-scrollbar-thumb {
    background-color: #444;
    border: 2px solid #1e1e1e;
  }
}