@import 'tailwindcss';
@config '../../tailwind.config';

html {
  --nextra-navbar-height: 64px;
  --nextra-menu-height: 3.75rem;

  @apply text-base antialiased;
  font-feature-settings:
    'rlig' 1,
    'calt' 1,
    'ss01' 1;
  -webkit-tap-highlight-color: transparent;

  &:not(:has(*:focus)) {
    /* adding `:not` with `:has` otherwise page jumps while focusing or while tapping in input https://github.com/shuding/nextra/issues/2840 */
    @apply scroll-pt-(--nextra-navbar-height);
  }
}

.nextra-code span {
  @apply bg-(--shiki-light-bg) text-(--shiki-light);
}

code.nextra-code {
  box-decoration-break: slice;
  font-feature-settings:
    'rlig' 1,
    'calt' 1,
    'ss01' 1;
  @apply text-sm;

  :not(pre) > &:not([class*='twoslash-']) {
    @apply break-words rounded-md border border-black/[0.04] bg-black/[0.03] px-[.25em] py-0.5 text-[.9em];
  }
}

pre code.nextra-code:not([class*='twoslash-']) {
  @apply grid;
  counter-reset: line;

  &[data-line-numbers] > span {
    @apply pl-2;

    &::before {
      counter-increment: line;
      content: counter(line);
      @apply inline-block min-w-[2.6rem] pr-4 text-right text-gray-500;
    }
  }

  & > span {
    @apply px-4;

    &[data-highlighted-line] {
      @apply text-primary-600/80! bg-primary-600/10 shadow-[2px_0_currentColor_inset];
    }

    [data-highlighted-chars] {
      @apply rounded-sm ring-2 ring-primary-600/20;
      @apply bg-primary-600/20;
    }
  }

  html[data-nextra-word-wrap] & {
    @apply max-md:whitespace-pre-wrap;
  }
}

.nextra-copy-icon {
  animation: fade-in 0.3s ease forwards;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* ===== Basic ===== */
:root {
  --twoslash-border-color: #8888;
  --twoslash-underline-color: currentColor;
  --twoslash-highlighted-border: 195, 125, 13;
  --twoslash-popup-bg: #f8f8f8;
  --twoslash-popup-color: inherit;
  --twoslash-popup-shadow: rgba(0, 0, 0.08) 0px 1px 4px;
  --twoslash-docs-color: #888;
  --twoslash-docs-font: sans-serif;
  --twoslash-matched-color: inherit;
  --twoslash-unmatched-color: #888;
  --twoslash-cursor-color: #8888;
  --twoslash-error-color: 212, 86, 86;
  --twoslash-error-bg: rgba(var(--twoslash-error-color), 0.13);
  --twoslash-tag-color: 55, 114, 207;
  --twoslash-tag-warn-color: 195, 125, 13;
  --twoslash-tag-annotate-color: 27, 166, 115;
}

.dark {
  --twoslash-popup-bg: #000;
  --twoslash-border-color: #404040;
}

/* Respect people's wishes to not have animations */
@media (prefers-reduced-motion: reduce) {
  .twoslash * {
    transition: none !important;
  }
}

/* ===== Hover Info ===== */
.twoslash:hover .twoslash-hover {
  border-color: var(--twoslash-underline-color);
}

.twoslash-hover {
  border-bottom: 1px dotted transparent;
  transition-timing-function: ease;
  transition: border-color 0.3s;
  position: relative;
}

.twoslash-popup-container {
  @apply absolute z-10 mt-1.5 inline-flex flex-col rounded transition-opacity duration-300;
  transform: translateY(1.1em);
  background: var(--twoslash-popup-bg) !important;
  color: var(--twoslash-popup-color);
  border: 1px solid var(--twoslash-border-color);
  text-align: left;
  /*box-shadow: var(--twoslash-popup-shadow);*/
}

.twoslash-query-presisted .twoslash-popup-container {
  z-index: 9;
  transform: translateY(1.5em);
}

.twoslash-popup-arrow {
  @apply absolute -top-1 size-1.5 -rotate-45 border-r border-t;
  @apply border-(--twoslash-border-color) bg-(--twoslash-popup-bg);
  left: 1em;
  pointer-events: none;
}

.twoslash-popup-code,
.twoslash-popup-docs {
  padding: 6px 8px;
}

.twoslash-popup-docs {
  @apply text-sm;
  color: var(--twoslash-docs-color);
  font-family: var(--twoslash-docs-font);
  border-top: 1px solid var(--twoslash-border-color);
}

.twoslash-popup-docs-tags {
  display: flex;
  flex-direction: column;
  font-family: var(--twoslash-docs-font);
}

.twoslash-popup-docs-tags,
.twoslash-popup-docs-tag-name {
  margin-right: 0.5em;
}

/* ===== Error Line ===== */
.twoslash-error-line {
  position: relative;
  background-color: var(--twoslash-error-bg);
  border-left: 3px solid currentColor;
  color: rgb(var(--twoslash-error-color));
  padding: 6px 12px;
  margin: 0.2em 0;
}

.twoslash-error {
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%206%203'%20enable-background%3D'new%200%200%206%203'%20height%3D'3'%20width%3D'6'%3E%3Cg%20fill%3D'%23c94824'%3E%3Cpolygon%20points%3D'5.5%2C0%202.5%2C3%201.1%2C3%204.1%2C0'%2F%3E%3Cpolygon%20points%3D'4%2C0%206%2C2%206%2C0.6%205.4%2C0'%2F%3E%3Cpolygon%20points%3D'0%2C2%201%2C3%202.4%2C3%200%2C0.6'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")
    repeat-x bottom left;
  padding-bottom: 2px;
}

/* ===== Completeions ===== */
.twoslash-completion-cursor {
  position: relative;
}

.twoslash-completion-cursor .twoslash-completion-list {
  @apply absolute left-0 top-1 rounded border;
  transform: translate(0, 1.2em);
  background: var(--twoslash-popup-bg);
  border-color: var(--twoslash-border-color);
}

.twoslash-completion-list {
  @apply w-60 px-2 py-1;
}

.twoslash-completion-list::before {
  background-color: var(--twoslash-cursor-color);
  width: 2px;
  position: absolute;
  top: -1.6em;
  height: 1.4em;
  left: -1px;
  content: ' ';
}

.twoslash-completion-list li {
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 0.25em;
  line-height: 1em;
}

.twoslash-completion-list li span.twoslash-completions-unmatched {
  color: var(--twoslash-unmatched-color);
}

.twoslash-completion-list .deprecated {
  text-decoration: line-through;
  opacity: 0.5;
}

.twoslash-completion-list li span.twoslash-completions-matched {
  color: var(--twoslash-matched-color);
}

/* Highlights */
.twoslash-highlighted {
  background-color: rgba(var(--twoslash-highlighted-border), 0.13);
  border: 1px solid rgba(var(--twoslash-highlighted-border), 0.31);
  padding: 1px 2px;
  margin: -1px -3px;
  border-radius: 4px;
}

/* Icons */
.twoslash-completion-list .twoslash-completions-icon {
  color: var(--twoslash-unmatched-color);
  width: 1em;
  flex: none;
}

/* Custom Tags */
.twoslash-tag-line {
  position: relative;
  background-color: rgba(var(--twoslash-tag-color), 0.13);
  border-left: 3px solid currentColor;
  color: rgb(var(--twoslash-tag-color));
  padding: 6px 10px;
  margin: 0.2em 0;
  display: flex;
  align-items: center;
  gap: 0.3em;
}

.twoslash-tag-line .twoslash-tag-icon {
  width: 1.1em;
  color: inherit;
}

.twoslash-tag-line.twoslash-tag-error-line {
  background-color: var(--twoslash-error-bg);
  color: rgb(var(--twoslash-error-color));
}

.twoslash-tag-line.twoslash-tag-warn-line {
  background-color: rgba(var(--twoslash-tag-warn-color), 0.13);
  color: rgb(var(--twoslash-tag-warn-color));
}

.twoslash-tag-line.twoslash-tag-annotate-line {
  background-color: rgba(var(--twoslash-tag-annotate-color), 0.13);
  color: rgb(var(--twoslash-tag-annotate-color));
}

.nextra-steps {
  h2,
  h3,
  h4,
  h5,
  h6 {
    counter-increment: var(--counter-id);
    /* Resets from nextra-theme-docs */
    @apply mt-8 border-0 pb-0 text-2xl font-semibold tracking-tight;
    /* https://github.com/tailwindlabs/tailwindcss/issues/15597#issuecomment-2582673546 */
    @apply before:bg-gray-100;
    &:before {
      @apply absolute size-[33px];
      @apply border-4;
      @apply rounded-full text-center -indent-px text-base font-normal text-neutral-400;
      @apply ms-[-41px];
      content: counter(var(--counter-id));
    }
  }
}

@keyframes blob {
  0% {
    transform: translate(0px, 0px) scale(1);
  }
  33% {
    transform: translate(30px, -30px) scale(1.1);
  }
  66% {
    transform: translate(-20px, 20px) scale(0.9);
  }
  100% {
    transform: translate(0px, 0px) scale(1);
  }
}

@keyframes float {
  0% {
    transform: translateY(0px) rotate(var(--rotate, 0deg));
  }
  50% {
    transform: translateY(-10px) rotate(var(--rotate, 0deg));
  }
  100% {
    transform: translateY(0px) rotate(var(--rotate, 0deg));
  }
}

.animate-blob {
  animation: blob 7s infinite alternate;
}

.animate-float {
  animation: float 6s infinite ease-in-out;
  --rotate: 0deg;
}

.animation-delay-2000 {
  animation-delay: 2s;
}

.animation-delay-3000 {
  animation-delay: 3s;
}

.animation-delay-4000 {
  animation-delay: 4s;
}

.bg-grid-pattern {
  background-image:
    linear-gradient(to right, rgba(127, 127, 127, 0.1) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(127, 127, 127, 0.1) 1px, transparent 1px);
  background-size: 24px 24px;
}

.text-stroke {
  -webkit-text-stroke: 1px rgba(107, 33, 168, 0.2);
}

.custom-gradient-text {
  background: linear-gradient(
    135deg,
    #ef3d55 0%,
    #765ba7 25%,
    #8caedc 50%,
    #f79151 75%,
    #ef3d55 100%
  );
  background-size: 200% auto;
  animation: gradient 5s linear infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

.pseudo-terminal:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 24px;
  background: #343a40;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.pseudo-terminal:after {
  content: '';
  position: absolute;
  top: 8px;
  left: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff5f56;
  box-shadow:
    16px 0 0 #ffbd2e,
    32px 0 0 #27c93f;
}

.mesh-gradient {
  background-color: hsla(259, 84%, 78%, 1);
  background-image:
    radial-gradient(at 54% 71%, hsla(209, 100%, 78%, 0.7) 0px, transparent 50%),
    radial-gradient(at 20% 25%, hsla(256, 96%, 77%, 0.5) 0px, transparent 50%),
    radial-gradient(at 73% 24%, hsla(268, 87%, 32%, 0.4) 0px, transparent 50%),
    radial-gradient(at 47% 95%, hsla(15, 96%, 77%, 0.3) 0px, transparent 50%),
    radial-gradient(at 83% 87%, hsla(276, 97%, 36%, 0.3) 0px, transparent 50%);
}
