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

@import "@docsearch/css";

html, body {height: 100%;}

.changelog {
  @apply py-8 space-y-4;

  h1 {
    @apply hidden;
  }

  h2 {
    @apply text-3xl text-whisper-900;
  }

  ul {
    @apply list-disc pl-5 pb-8;
  }

  a, a:visited {
    @apply text-teal-500;
  }

  a:hover {
    @apply text-teal-800;
  }
}

.markdown {
  @apply space-y-4;

  h1 {
    @apply text-5xl tracking-tight font-extrabold sm:leading-none lg:text-5xl xl:text-6xl;
  }

  h2 {
    @apply mt-16 tracking-tight font-extrabold sm:leading-none text-3xl xl:text-4xl !important;
  }

  h3 {
    @apply tracking-tight font-extrabold sm:leading-none text-xl xl:text-2xl;
  }

  h4 {
    @apply tracking-tight font-extrabold sm:leading-none text-lg xl:text-xl;
  }

  img {
    @apply mx-auto my-8;
  }

  p {
    @apply my-4;
  }

  ul {
    @apply list-disc pl-5 my-4;
  }

  a, a:visited {
    @apply text-teal-500;
  }

  a:hover {
    @apply text-teal-800;
  }

  blockquote {
    @apply py-2 px-4 my-4 border-l-4 border-teal-500;
  }

  blockquote.important {
    @apply border-red-500;
  }

  code {
    @apply text-rose-500;
  }

  pre {
    @apply p-4 my-4 bg-vulcan-200;
  }
}

/* DocSearch */
html[data-theme=dark] {
  --docsearch-text-color: #f3eff5;
  --docsearch-logo-color: #f3eff5;

  /* Search button */
  --docsearch-searchbox-background: #2c313d;
  --docsearch-searchbox-focus-background: #222733;
  --docsearch-muted-color: #cbc7cd;

  /* Overlap background */
  --docsearch-container-background: rgba(54,59,71, 0.8);

  /* Modal */
  --docsearch-modal-background: #0e131f;
  --docsearch-modal-shadow: none;
  --docsearch-footer-background: #0e131f;

  /* Colors */
  --docsearch-primary-color: #15c2cb;

  --docsearch-hit-color: #bec3c9;
  --docsearch-hit-background: #090a11;

  --docsearch-hit-shadow: none;
  /* --docsearch-key-gradient: none; */
  --docsearch-key-shadow: none;
  --docsearch-footer-shadow: none;
}

.DocSearch-Screen-Icon svg {
  @apply mx-auto;
}

.DocSearch-Button {
  @apply border border-transparent !important;
  border-radius: 0;
  box-shadow: none !important;

  &:hover {
    @apply border border-whisper-50 !important;
  }
}

.DocSearch-Button-Keys, .DocSearch-Button-Key {
  @apply top-auto;
}

.DocSearch--active {
  overflow: auto !important;
}