@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
@import "nextra/styles/variables.css";
@import "nextra/styles/subheading-anchor.css";
@import "./hamburger.css";
@import "./scrollbar.css";
@import "./typesetting-article.css";

html {
  @apply nx-antialiased nx-text-base;
  font-feature-settings: "rlig" 1, "calt" 1, "ss01" 1, "ss06" 1;
  -webkit-tap-highlight-color: transparent;
}

body {
  @apply nx-w-full nx-bg-white dark:nx-bg-dark dark:nx-text-gray-100 nx-scroll-smooth;
}

a,
summary,
button,
input,
[tabindex]:not([tabindex="-1"]) {
  @apply nx-outline-none;
  &:focus-visible {
    @apply nx-ring-2 nx-ring-primary-200 nx-ring-offset-1 nx-ring-offset-primary-300;
  }
}

a,
summary {
  @apply nx-rounded;
}

@media (max-width: 767px) {
  .nextra-sidebar-container {
    @apply nx-fixed nx-pt-[calc(var(--nextra-navbar-height))] nx-top-0 nx-w-full nx-bottom-0 nx-z-[15] nx-overscroll-contain nx-bg-white dark:nx-bg-dark;
    transition: transform 0.8s cubic-bezier(0.52, 0.16, 0.04, 1);
    will-change: transform, opacity;
    contain: layout style;
    backface-visibility: hidden;
  }
  .nextra-banner-container ~ div {
    .nextra-sidebar-container {
      @apply nx-pt-[6.5rem];
    }
    &.nextra-nav-container {
      @apply nx-top-10 md:nx-top-0;
    }
  }
  .nextra-banner-hidden {
    .nextra-banner-container ~ div .nextra-sidebar-container {
      @apply nx-pt-16;
    }
    .nextra-nav-container {
      @apply !nx-top-0;
    }
  }
  .nextra-search .excerpt {
    @apply nx-overflow-hidden nx-text-ellipsis;
    display: -webkit-box;
    line-clamp: 1;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 767px) {
  article:before,
  .nextra-sidebar-container,
  .nextra-sidebar-container.open,
  body.resizing .nextra-sidebar-container {
    @apply nx-transition-none;
  }
}

/* Content Typography */
article details > summary {
  &::-webkit-details-marker {
    @apply nx-hidden;
  }
  &::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z' clip-rule='evenodd' /%3E%3C/svg%3E");
    height: 1.2em;
    width: 1.2em;
    vertical-align: -4px;
  }
}

@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);
  }
}

@supports (
  (-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))
) {
  .nextra-search ul {
    @apply nx-backdrop-blur-lg nx-bg-white/70 dark:nx-bg-dark/80;
  }
  .nextra-nav-container-blur {
    @apply nx-backdrop-blur-md nx-bg-white/[.85] dark:!nx-bg-dark/80;
  }
}

input[type="search"] {
  &::-webkit-search-decoration,
  &::-webkit-search-cancel-button,
  &::-webkit-search-results-button,
  &::-webkit-search-results-decoration {
    -webkit-appearance: none;
  }
}

.contains-task-list {
  @apply nx-ml-0 nx-list-none;
  input[type="checkbox"] {
    @apply nx-mr-1;
  }
}

.nextra-banner-hidden .nextra-banner-container {
  @apply nx-hidden;
}
