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

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/
@layer utilities {
  .h-native-viewport {
    height: var(--viewport-height, 100vh);
    min-height: var(--viewport-height, 100vh);
  }

  .scrollbar-none {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .scrollbar-none::-webkit-scrollbar {
    display: none;
  }

  .share-card--capture {
    transform: translateZ(0);
  }
}

.share-mode .share-card {
  background: #fff;
}

.share-page {
  padding: 32px 24px;
}

.share-page .share-card {
  max-width: 520px;
  margin: 0 auto;
}

@keyframes line-item-highlight {
  0% {
    background: rgb(243 244 246 / 0.4);
  }

  40% {
    background: rgb(243 244 246 / 0.7);
  }

  80% {
    background: rgb(243 244 246 / 0.4);
  }

  100% {
    background: none;
  }
}

.line-item-highlight {
  animation: line-item-highlight 5s;
}

.line-item-highlight-infinite {
  animation: line-item-highlight 2s infinite;
}

pre {
  @apply py-0;
}

code {
  @apply py-0 mb-2 rounded;
}

li pre code {
  @apply -ml-5;
}

[data-controller~="markdown"] ol {
  @apply list-decimal pl-5;
}

[data-controller~="markdown"] ul {
  @apply list-disc pl-5;
}

[data-controller~="markdown"] a {
  @apply font-medium underline;
}

[data-controller~="markdown"] hr {
  @apply block my-2;
}

.markdown-content :where(p, ul, ol, blockquote, pre, table) {
  @apply my-2;
}

.markdown-content :where(h1, h2, h3, h4) {
  @apply mt-4 mb-2 text-base leading-6 font-semibold text-gray-800;
}

.markdown-content :where(ol, ul) {
  @apply pl-5 space-y-1;
}

.markdown-content blockquote {
  @apply border-l-4 border-gray-300/80 pl-3 text-gray-700 py-1 rounded-r;
}

.markdown-content pre {
  @apply rounded-lg p-3 overflow-x-auto;
}

.markdown-content pre code {
  @apply block bg-transparent m-0 p-0 text-sm leading-6;
}

.markdown-content :not(pre) > code {
  @apply rounded px-1 py-0.5 text-[0.9em] text-gray-800;
}

.markdown-content table {
  @apply w-full border-collapse text-sm;
}

.markdown-content th {
  @apply text-left font-semibold text-gray-700 border-b border-gray-300 px-2 py-1.5;
}

.markdown-content td {
  @apply border-b border-gray-200 px-2 py-1.5 align-top;
}