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

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

.code ol {
  @apply list-decimal pl-5;
}

.code ul {
  @apply list-disc pl-5;
}

.code a {
  @apply font-medium underline;
}

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