@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
@import 'nextra/styles/variables.css';
@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 './hamburger.css';
@import './typesetting-article.css';

html {
    @apply nx-antialiased nx-text-base nx-scroll-pt-[--nextra-navbar-height];
    font-feature-settings:
        'rlig' 1,
        'calt' 1,
        'ss01' 1;
    -webkit-tap-highlight-color: transparent;
}

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 dark:nx-ring-primary-800 dark:nx-ring-offset-primary-700;
    }
}

a,
summary {
    @apply nx-rounded;
}

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

@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-[1] 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-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 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;
}

.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;
    }
}

div#__next .nextra-steps {
    @apply dark:nx-border-neutral-700;

    & h3 {
        &:before {
            @apply nx-bg-white dark:nx-bg-neutral-700 dark:nx-border-neutral-700;
        }
    }
}