@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

@layer base {
    * {
        min-width: 0;
        min-height: 0;
    }
    
    :root {
        background: var(--color-bg);
    }

    a {
        font-weight: 500;
    }

    a:not(:hover,:focus-visible,[aria-current="page"]) {
        color: color-mix(in srgb, currentColor 60%, transparent);
    }
    
    /* Page loader */
    :root[data-js][data-loading] body {
        &::before,
        &::after {
            content: '';
            position: absolute;
            z-index: 30;
        }

        &::before {
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--color-bg);
        }

        &::after {
            top: 50%;
            left: 50%;
            width: 60px;
            height: 60px;
            margin: -30px 0 0 -30px;
            border-radius: 50%;
            opacity: 0.4;
            background: currentColor;
            animation: loaderAnim 0.7s linear infinite alternate forwards;
        }
    }

    @keyframes loaderAnim {
        to {
            opacity: 1;
            transform: scale3d(0.5,0.5,1);
        }
    }
}

@layer utilities {
    .overlap {
        display: grid;
        grid-template-areas: "overlap";

        & > * {
            grid-area: overlap
        }
    }

    .scrollbar-hidden {
        -ms-overflow-style: none; /* IE */
        scrollbar-width: none; /* Firefox */
        &::-webkit-scrollbar {
            display: none;
        }
    }
}