@tailwind base;
@tailwind components;
@tailwind utilities;

/* flex items-center gap-x-3.5 py-2 px-2.5 bg-gray-100 text-sm text-gray-800 rounded-lg hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:bg-neutral-700 dark:text-white
hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-gray-800 rounded-lg hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:text-neutral-200 */

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 200, 700;
    font-display: swap;
    src: url("/static/fonts/inter-variablefont.ttf");
}


/* Sidebar Components */

.mobile-sidebar-header {
    @apply
        sticky
        top-0
        inset-x-0
        z-20
        lg:hidden;
}

.mobile-sidebar-header .mobile-sidebar-nav {
    @apply
        flex
        p-4
        sm:px-6
        border-b
        bg-white
        dark:bg-neutral-800
        dark:border-neutral-700;
}

.mobile-sidebar-header .mobile-sidebar-nav .mobile-sidebar-brand {
    @apply text-xl font-semibold;
}

.sidebar-aside {
    @apply
        /* Position and Display */
        transform
        w-64
        h-full
        fixed
        top-0
        bottom-0

        /* Colours and Border */
        bg-white
        border-e
        border-gray-200
        dark:bg-neutral-800
        dark:border-neutral-700;
}

.sidebar-aside.main-sidebar {
    @apply
        [--auto-close:lg]
        lg:block
        lg:translate-x-0
        lg:end-auto
        lg:bottom-0
        -translate-x-full
        transition-all
        duration-200
        ease-in
        start-0
        z-[60]
}

.sidebar-aside.guild-sidebar {
    @apply
        [--auto-close:lg]
        lg:block
        lg:end-auto
        lg:bottom-0
        -translate-x-full
        transition-all
        duration-200
        lg:duration-100
        ease-in
        start-0
        lg:start-64
        z-[59]
}

.sidebar-aside .sidebar-container {
    @apply
        relative
        flex
        flex-col
        h-full
        max-h-full;
}

.sidebar-aside .sidebar-container .sidebar-header {
    @apply
        px-6
        pt-4
        flex
        justify-between
        items-center;
}

.sidebar-aside .sidebar-container .sidebar-header .sidebar-brand {
    @apply
        flex-none
        rounded-xl
        text-xl
        inline-block
        font-semibold
        focus:outline-none
        focus:opacity-80;
}

.sidebar-aside .sidebar-container .sidebar-content {
    @apply
        h-full
        overflow-y-auto
        [&::-webkit-scrollbar]:w-2
        [&::-webkit-scrollbar-thumb]:rounded-full
        [&::-webkit-scrollbar-track]:bg-gray-100
        [&::-webkit-scrollbar-thumb]:bg-gray-300
        dark:[&::-webkit-scrollbar-track]:bg-neutral-700
        dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500
}

.sidebar-aside .sidebar-container .sidebar-content .sidebar-nav {
    @apply
        px-4
        py-6
        w-full
        h-full
        flex
        flex-col
        flex-wrap;
}

.sidebar-nav .sidebar-btn {
    @apply
        w-full
        flex
        items-center
        gap-x-3.5
        py-2
        px-2.5
        text-sm
        rounded-md
        focus:outline-none
        text-gray-800
        hover:bg-gray-100
        focus:bg-gray-100
        dark:bg-neutral-800
        dark:hover:bg-neutral-700
        dark:focus:bg-neutral-700
        dark:text-neutral-200;
}

/* End Sidebar Components */

/* Guild Header */

.guild-header-btn {
    @apply text-sm text-gray-800 hover:text-blue-600 focus:outline-none focus:text-blue-600 dark:text-neutral-200 dark:hover:text-blue-500 dark:focus:text-blue-500;
}

.guild-header-btn.active {
    @apply text-blue-600;
}

/* End Guild Header */