/* TailwindCSS base styles */
/* see https://tailwindcss.com/docs/functions-and-directives#tailwind */
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind variants;

@layer utilities {
    @variants responsive {

        /* Hide scrollbar for Chrome, Safari and Opera */
        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }

        /* Hide scrollbar for IE, Edge and Firefox */
        .no-scrollbar {
            -ms-overflow-style: none;
            /* IE and Edge */
            scrollbar-width: none;
            /* Firefox */
        }
    }
}

input[name="theme-item"]:checked + div,
label:has(input[name="search-item"]:checked),
label:has(input[name^="block-item"]:checked) {
    svg {
        @apply text-primary;
    }

    @apply dark:bg-neutral bg-base-300;

}

.menu-custom :where(li:not(.menu-title) > *:not(ul, details, .menu-title)),
.menu-custom :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
    line-height: 1.5rem;
}

.menu-custom :where(li:not(.menu-title) > *:not(ul, details, .menu-title)),
.menu-custom :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
    line-height: 1.5rem;
}

.menu-custom li {
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
}

.sidebar-hide {
    max-width: 0;
}

.nav-item-behind {
    display: none;
    pointer-events: none;
}

.nav-item:has(.nav-item-behind) .avatar:hover {
    cursor: none;
}

.nav-item:has(.avatar:hover) .nav-item-behind {
    display: block;
}

.katex-html {
    @apply hidden;
}

.katex-output {
    @apply font-mono mockup-code;
}

pre {
    @apply !font-mono;
}

.btm-bar-sticky {
    @apply sticky bottom-8 w-full max-w-7xl mx-auto px-4;

    ul {
        @apply menu-sm shadow-lg hover:scale-150;
    }

    li > a {
        svg {
            @apply w-5 h-5;
        }

    }
}

.btm-bar-normal {
    @apply items-center justify-center xl:flex-row px-2;

    ul {
        @apply menu-sm md:menu-lg;
    }

    li > a {
        svg {
            @apply w-4 h-4 sm:w-6 sm:h-6;
        }

        span {
            @apply block ;
        }
    }
}

.nav-block:target {
    scroll-margin-top: 10rem;
    scroll-padding-top: 10rem;
}