#app a:focus-visible,
#app button:focus-visible,
#app input[type='checkbox']:focus-visible {
  --at-apply: outline-1 outline-primary ring-2 ring-primary;
}

.VPSidebar::-webkit-scrollbar {
  background: transparent;
  height: 8px;
  width: 8px;
  margin-right: 8px;
}

#app > div > div.VPLocalNav > div > div > div.outline {
  outline-style: none !important;
}

.vp-doc .color-swatch {
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  min-width: 12px;
  min-height: 12px;
  font-size: inherit;
  border: 0;
  border-radius: 2px;
  margin: 0 3px 0 6px;
  cursor: pointer;
}

.medium-zoom-overlay {
  z-index: 20;
}

.medium-zoom-image {
  z-index: 21;
}

@keyframes slide-enter {
  0% {
    transform: translateY(10px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 100;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html:not(.no-sliding) [slide-enter],
  html:not(.no-sliding) .slide-enter,
  html:not(.no-sliding) .main > div > *,
  html:not(.no-sliding) #VPContent > div > div.VPFeatures.VPHomeFeatures > *,
  html:not(.no-sliding) .TeamPage > *,
  html:not(.no-sliding) .VPHomeHero > * {
    --enter-stage: 0;
    --enter-step: 90ms;
    --enter-initial: 0ms;
    animation: slide-enter 1s both 1;
    animation-delay: calc(var(--enter-initial) + var(--enter-stage) * var(--enter-step));
  }

  .main > div > *:nth-child(1) {
    --enter-stage: 1;
  }
  .main > div > *:nth-child(2) {
    --enter-stage: 2;
  }
  .main > div > *:nth-child(3) {
    --enter-stage: 3;
  }
  .main > div > *:nth-child(4) {
    --enter-stage: 4;
  }
  .main > div > *:nth-child(5) {
    --enter-stage: 5;
  }
  .main > div > *:nth-child(6) {
    --enter-stage: 6;
  }
  .main > div > *:nth-child(7) {
    --enter-stage: 7;
  }
  .main > div > *:nth-child(8) {
    --enter-stage: 8;
  }
  .main > div > *:nth-child(9) {
    --enter-stage: 9;
  }
  .main > div > *:nth-child(10) {
    --enter-stage: 10;
  }
  .main > div > *:nth-child(11) {
    --enter-stage: 11;
  }
  .main > div > *:nth-child(12) {
    --enter-stage: 12;
  }
  .main > div > *:nth-child(13) {
    --enter-stage: 13;
  }
  .main > div > *:nth-child(14) {
    --enter-stage: 14;
  }
  .main > div > *:nth-child(15) {
    --enter-stage: 15;
  }
  .main > div > *:nth-child(16) {
    --enter-stage: 16;
  }
  .main > div > *:nth-child(17) {
    --enter-stage: 17;
  }
  .main > div > *:nth-child(18) {
    --enter-stage: 18;
  }
  .main > div > *:nth-child(19) {
    --enter-stage: 19;
  }
  .main > div > *:nth-child(20) {
    --enter-stage: 20;
  }
}