style.css

@import url('./fonts/Inter-var.css');
@import url('./fonts/Familjen-Grotesk.css');
@import './css/primitives.css';
@import './css/default.css';
@import './css/dark.css';
@import './css/shiki.css';

/* @import url('./fonts/Sriracha.css'); */
/* @import url('https://fonts.googleapis.com/css2?family=Sriracha&display=swap'); */

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

@layer utilities {
  .drop-shadow-indicator {
    filter: drop-shadow(0px -1px 2px rgba(0, 0, 0, 0.1))
      drop-shadow(0px 2px 10px rgba(0, 0, 0, 0.1));
  }
}

:root {
  --kl-navbar-height: 68px;
}

html {
  scroll-behavior: auto;
  -webkit-tap-highlight-color: transparent;
  /* scrollbar-gutter: stable; */
  @apply wb-scroll-pt-[50px] wb-bg-surface-basic-subdued;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}

.scrollbar-gutter {
  scrollbar-gutter: stable;
}

.scrollbar-gutter-auto {
  scrollbar-gutter: 'auto';
}

.dark-hidden {
  @apply group-data-[theme=dark]/html:wb-hidden;
}

.dark-flex {
  @apply group-data-[theme=dark]/html:wb-flex;
}

.dark-block {
  @apply group-data-[theme=dark]/html:wb-block;
}

.kl-steps {
  counter-reset: steps;
  @apply wb-pl-[28px] wb-ml-[14px] wb-border-l wb-border-icon-disabled wb-border-dotted;
}

.kl-steps > h3::before {
  counter-increment: steps;
  content: counter(steps);
  width: 28px;
  height: 28px;
  @apply -wb-ml-[47px] -wb-mt-[3px] wb-bg-surface-basic-pressed wb-border-surface-basic-subdued wb-rounded-full wb-flex wb-items-center wb-justify-center wb-text-center wb-border-4 wb-box-content wb-headingMd wb-text-text-default wb-absolute;
}

.kl-steps > h3 {
  @apply wb-sticky wb-top-[calc(var(--kl-navbar-height)+44px)] wb-bg-surface-basic-subdued wb-pb-[6px] wb-mt-[40px] wb-z-[12];
}

@media screen and (min-width: 768px) {
  .kl-steps > h3 {
    @apply wb-top-[calc(var(--kl-navbar-height)+50px)];
  }
}

.kl-steps > p {
  @apply !wb-mt-[10px] !wb-mb-[10px];
}

.kl-footer {
  order: -99999;
}

.nx-right-0 {
  @apply wb-right-0;
}

.nx-top-0 {
  @apply wb-top-0;
}

.nx-absolute {
  @apply wb-absolute;
}

pre {
  overflow-x: auto;
  @apply !wb-mt-3xl wb-bg-surface-basic-input wb-border wb-border-border-default wb-rounded wb-p-xl;
}

.nextra-code-block {
  @apply wb-relative;
}

.nextra-code-block button {
  @apply wb-p-md wb-text-text-default wb-cursor-pointer wb-mt-md wb-mr-md wb-bg-surface-basic-default wb-border wb-border-border-default wb-rounded;
}
.nextra-code-block button[title='Toggle word wrap'] {
  display: none;
}

.nextra-code-block button svg {
  height: 16px;
  width: 16px;
}

code {
  overflow-wrap: break-word;
}

@media (max-width: 1023px) {
  .kl-sidebar-container {
    @apply wb-fixed wb-inset-0 wb-w-full wb-bottom-0 wb-overscroll-contain wb-pr-0 wb-pb-3xl;
    transition: transform 0.3s ease-in-out;
    will-change: transform, opacity;
    contain: layout style;
    backface-visibility: hidden;
  }

  .kl-footer {
    order: 99999;
  }
}

@media screen and (min-width: 1024px) {
  .kl-sidebar {
    -webkit-mask-image: linear-gradient(transparent, #000 20px),
      linear-gradient(270deg, #000 10px, transparent 0);
    mask-image: linear-gradient(transparent, #000 20px),
      linear-gradient(270deg, #000 10px, transparent 0);
  }
}

@media screen and (min-width: 768px) {
  .graphIllustration {
    @apply wb-relative [background-size:32px_32px] wb-bg-[linear-gradient(90deg,_var(--surface-basic-active)_1.5px,_transparent_1.5px),_linear-gradient(0deg,_var(--surface-basic-active)_1.5px,_transparent_1.5px)];
  }
}

@media screen and (min-width: 1280px) {
  .graph {
    @apply wb-relative [background-size:32px_32px] wb-bg-[linear-gradient(90deg,_var(--surface-basic-active)_1.5px,_transparent_1.5px),_linear-gradient(0deg,_var(--surface-basic-active)_1.5px,_transparent_1.5px)];
  }

  .graph2 {
    @apply wb-relative [background-size:32px_32px] wb-bg-[linear-gradient(90deg,_var(--surface-basic-active)_1.5px,_transparent_1.5px),_linear-gradient(0deg,_var(--surface-basic-active)_1.5px,_transparent_1.5px)];
  }

  .graph2::before {
    content: '';
    background-size:
      100% 6%,
      100% 6%,
      6% 100%,
      6% 100%;
    background-position: top, bottom, left, right;
    @apply wb-bg-no-repeat wb-top-0 wb-left-0 wb-w-full wb-h-full wb-absolute wb-bg-[linear-gradient(to_top,_transparent_0%,_var(--surface-basic-subdued)_100%),_linear-gradient(to_bottom,_transparent_0%,_var(--surface-basic-subdued)_100%)];
  }
}

.shadow-filter {
  filter: drop-shadow(0px 2px 16px rgba(33, 43, 54, 0.08))
    drop-shadow(0px 0px 0px rgba(6, 44, 82, 0.1));
}

.loading-overlay {
  display: none !important;
}

.custom-li > p {
  padding-bottom: 8px;
}

.g {
  --deg: 0deg;
  background: linear-gradient(
    var(--deg),
    #fafafa 12.07%,
    #fcd34d 26.16%,
    #3b82f6 43.46%,
    #fafafa 77.26%
  );
  opacity: 0;
  filter: blur(10px);
}

canvas {
  /* all four are needed to support the most browsers */
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-crisp-edges;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.partners-slide-track ul li {
  width: auto !important;
}

.rounded-image > img {
  @apply wb-rounded-lg;
}

.blockquote > p:first-child {
  @apply !wb-mt-0;
}

@keyframes move {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(-400%);
  }
}

.grecaptcha-badge {
  z-index: 99;
  visibility: hidden;
}

.vjs-control-bar {
  @apply !wb-bg-surface-basic-overlay-bg;
}