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

@layer responsive {
  .scrollbar-none::-webkit-scrollbar {
    display: none;
  }

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

html {
  font-family: "Inter", sans-serif;
}

@supports (font-variation-settings: normal) {
  html {
    font-family: "Inter var", sans-serif;
  }
}

@font-face {
  font-family: "Inter var";
  font-weight: 100 900;
  font-display: optional;
  font-style: normal;
  font-named-instance: "Regular";
  src: url("/fonts/Inter-roman.var.woff2?v=3.19") format("woff2");
}
@font-face {
  font-family: "Inter var";
  font-weight: 100 900;
  font-display: optional;
  font-style: italic;
  font-named-instance: "Italic";
  src: url("/fonts/Inter-italic.var.woff2?v=3.19") format("woff2");
}

.callout p {
  @apply text-sm;
}

.callout p:last-child,
.callout ul:last-child,
.callout ol:last-child {
  @apply mb-0;
}

.algolia-autocomplete {
  display: block !important;
}

#features .flex-1.my-10 {
  @apply m-0 mb-8;
}

.divider {
  overflow: hidden;
  position: relative;
}
.divider::before {
  content: "";
  position: absolute;
  z-index: 3;
  pointer-events: none;
  background-repeat: no-repeat;
  bottom: -0.1vw;
  left: -0.1vw;
  right: -0.1vw;
  top: -0.1vw;
  transform: scaleX(5.5);
  transform-origin: 100% 0;
  animation: 20s infinite alternate divider linear;
  background-size: 100% 90px;
  background-position: 50% 0%;
  background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.28 2.17" preserveAspectRatio="none"><path d="M0 .5c3.07.55 9.27-.42 16.14 0 6.88.4 13.75.57 19.14-.11V0H0z" fill="%23000000"/><path d="M0 1c3.17.8 7.29-.38 10.04-.55 2.75-.17 9.25 1.47 12.67 1.3 3.43-.17 4.65-.84 7.05-.87 2.4-.02 5.52.88 5.52.88V0H0z" opacity=".5" fill="%23000000"/><path d="M0 1.85c2.56-.83 7.68-.3 11.79-.42 4.1-.12 6.86-.61 9.58-.28 2.73.33 5.61 1.17 8.61 1 3-.19 4.73-.82 5.3-.84V.1H0z" opacity=".5" fill="%23000000"/></svg>');
}

@media (min-width: 2100px) {
  .divider::before {
    background-size: 100% calc(2vw + 90px);
  }
}

@keyframes divider {
  100% {
    transform: scaleX(5.5) translateX(calc(100% - (100% / 5.5)));
  }
}

/* List */
li ul {
  margin: 0 !important;
}

/* Table */
.main-content table {
  @apply p-0 w-full;
}
.main-content table tr {
  @apply p-0 m-0 border-t border-gray-300;
}
.main-content table tr:nth-child(2n) {
  @apply bg-gray-100;
}
.main-content table tr th {
  @apply font-semibold;
}
.main-content table tr th[align="center"],
.main-content table tr td[align="center"] {
  @apply text-center;
}
.main-content table tr th[align="right"],
.main-content table tr td[align="right"] {
  @apply text-right;
}
.main-content table tr th,
.main-content table tr td {
  @apply text-left;
  @apply px-4 py-2 m-0 border border-gray-300;
}
article .table-container {
  overflow: auto;
}

.card + .card {
  @apply mt-6;
}

.card p:last-child {
  @apply mb-0;
}

/**
 * MIT License
 * Copyright (c) 2018 Sarah Drasner
 * Sarah Drasner's[@sdras] Night Owl
 * Ported by Sara vieria [@SaraVieira]
 * Added by Souvik Mandal [@SimpleIndian]
 */

code[class*="language-"],
pre[class*="language-"] {
  color: #d6deeb;
  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.5;
  font-size: 1em;

  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;

  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

pre[class*="language-"]::-moz-selection,
pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection,
code[class*="language-"] ::-moz-selection {
  text-shadow: none;
  background: rgba(29, 59, 83, 0.99);
}

pre[class*="language-"]::selection,
pre[class*="language-"] ::selection,
code[class*="language-"]::selection,
code[class*="language-"] ::selection {
  text-shadow: none;
  background: rgba(29, 59, 83, 0.99);
}

@media print {
  code[class*="language-"],
  pre[class*="language-"] {
    text-shadow: none;
  }
}

/* Code blocks */
pre[class*="language-"] {
  overflow: auto;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
  color: white;
  background: #011627;
}

:not(pre) > code[class*="language-"] {
  padding: 0.1em;
  border-radius: 0.3em;
  white-space: normal;
}

.token.comment,
.token.prolog,
.token.cdata {
  color: rgb(99, 119, 119);
  font-style: italic;
}

.token.punctuation {
  color: rgb(199, 146, 234);
}

.namespace {
  color: rgb(178, 204, 214);
}

.token.deleted {
  color: rgba(239, 83, 80, 0.56);
  font-style: italic;
}

.token.symbol,
.token.property {
  color: rgb(128, 203, 196);
}

.token.tag,
.token.operator,
.token.keyword {
  color: rgb(127, 219, 202);
}

.token.boolean {
  color: rgb(255, 88, 116);
}

.token.number {
  color: rgb(247, 140, 108);
}

.token.constant,
.token.function,
.token.builtin,
.token.char {
  color: rgb(130, 170, 255);
}

.token.selector,
.token.doctype {
  color: rgb(199, 146, 234);
  font-style: italic;
}

.token.attr-name,
.token.inserted {
  color: rgb(173, 219, 103);
  font-style: italic;
}

.token.string,
.token.url,
.token.entity,
.language-css .token.string,
.style .token.string {
  color: rgb(173, 219, 103);
}

.token.class-name,
.token.atrule,
.token.attr-value {
  color: rgb(255, 203, 139);
}

.token.regex,
.token.important,
.token.variable {
  color: rgb(214, 222, 235);
}

.token.important,
.token.bold {
  font-weight: bold;
}

.token.italic {
  font-style: italic;
}

pre.is-highlighted .token-line {
  opacity: 0.5;
  filter: grayscale(1);
  transition: all 0.125s ease-in-out;
}

pre.is-highlighted .token-line.highlight {
  opacity: 1;
  filter: none;
}

pre.is-highlighted:hover .token-line {
  filter: none;
  opacity: 1;
}

.DocSearch.DocSearch-Button {
  @apply md:min-w-[200px] lg:min-w-[120px] xl:min-w-[250px] md:bg-gray-100;
}

a code {
  @apply text-blue-700 !important;
}
