@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
@import 'nextra/styles/code-block.css';
@import 'nextra/styles/subheading-anchor.css';
@import 'nextra/styles/scrollbar.css';
@import 'nextra/styles/steps.css';
@import 'nextra/styles/cards.css';
@import 'nextra/styles/react-medium-image-zoom.css';
@import './hamburger.css';
@import './typesetting-article.css';

html {
  @apply _antialiased _text-base;
  font-feature-settings:
    'rlig' 1,
    'calt' 1,
    'ss01' 1;
  -webkit-tap-highlight-color: transparent;
}

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

body {
  @apply _w-full dark:_text-gray-100;
}

.nextra-focusable,
.nextra-focus:focus-visible {
  @apply _ring-2 _ring-primary-200 _ring-offset-1 _ring-offset-primary-300 dark:_ring-primary-800 dark:_ring-offset-primary-700;
}

.nextra-focusable,
.nextra-focus {
  @apply focus-visible:_outline-none;
}

.nextra-content {
  @apply _text-slate-700 dark:_text-slate-200;
}

@media (max-width: 767px) {
  .nextra-sidebar-container {
    @apply _fixed _pt-[calc(var(--nextra-navbar-height))] _top-0 _w-full _bottom-0 _z-[15] _overscroll-contain;
    transition: transform 0.6s cubic-bezier(0.52, 0.16, 0.04, 1);
    will-change: transform, opacity;
    contain: layout style;
    backface-visibility: hidden;

    & > .nextra-scrollbar {
      mask-image: linear-gradient(to bottom, transparent, #000 20px),
        linear-gradient(to left, #000 10px, transparent 10px);
    }
  }

  .nextra-banner-container ~ div {
    .nextra-sidebar-container {
      @apply _pt-[6.5rem];
    }

    &.nextra-nav-container {
      @apply _top-10 md:_top-0;
    }
  }

  .nextra-banner-hidden {
    .nextra-banner-container ~ div .nextra-sidebar-container {
      @apply _pt-16;
    }

    .nextra-nav-container {
      @apply !_top-0;
    }
  }

  .nextra-search .excerpt {
    @apply _overflow-hidden _text-ellipsis;
    display: -webkit-box;
    line-clamp: 1;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }
}

@media (min-width: 768px) {
  .nextra-toc > .div,
  .nextra-sidebar-container {
    mask-image: linear-gradient(to bottom, transparent, #000 20px),
      linear-gradient(to left, #000 10px, transparent 10px);
  }
}

.contains-task-list {
  @apply _ml-0 _list-none;

  input[type='checkbox'] {
    @apply _mr-1;
  }
}

.nextra-sidebar-container {
  [data-toggle-animation='show'] button {
    opacity: 0;
    animation: nextra-fadein 1s ease 0.2s forwards;
  }

  [data-toggle-animation='hide'] button {
    opacity: 0;
    animation: nextra-fadein2 1s ease 0.2s forwards;
  }
}

.footnotes a[data-footnote-backref] {
  font-family: initial;
}

@keyframes nextra-fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes nextra-fadein2 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

body,
.nextra-nav-container-blur,
.nextra-sidebar-footer {
  @apply _bg-[rgb(var(--nextra-bg))];
}

.nextra-sidebar-container {
  @apply max-md:_bg-[rgb(var(--nextra-bg))];
}

.nextra-nav-container-blur {
  @apply _pointer-events-none _absolute _z-[-1] _size-full;
  @apply _shadow-[0_2px_4px_rgba(0,0,0,.02),0_1px_0_rgba(0,0,0,.06)];
  @apply dark:_shadow-[0_-1px_0_rgba(255,255,255,.1)_inset];
  @apply contrast-more:_shadow-[0_0_0_1px_#000];
  @apply contrast-more:dark:_shadow-[0_0_0_1px_#fff];
  @apply _backdrop-blur-md _bg-[rgba(var(--nextra-bg),.7)];
}

.nextra-toc-footer,
.nextra-sidebar-footer {
  @apply _border-t dark:_border-neutral-800;
  @apply contrast-more:_shadow-none contrast-more:_border-neutral-400 contrast-more:dark:_border-neutral-400;
  @apply _shadow-[0_-12px_16px_rgb(var(--nextra-bg))];
}
