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

@import 'extends/grid.css';

@import 'utilities.css';
@import 'animations.css';

@import 'typography/font-faces.css';
@import 'typography/text-shadows.css';

@import 'elements/buttons.css';
@import 'elements/forms.css';
@import 'elements/links.css';
@import 'elements/pre-codes.css';
@import 'elements/progress-bars.css';
@import 'elements/tables.css';

@import 'components/accordian-menus.css';
@import 'components/alerts.css';
@import 'components/breadcrumbs.css';
@import 'components/cards.css';
@import 'components/modals.css';
@import 'components/navbars.css';
@import 'components/pagination.css';

body {
    min-height: 100vh;
    overflow: auto;
    scrollbar-gutter: stable both-edges;
}

html, body {
    transition-duration: 0.05s;
    transition-timing-function: ease-in-out;
}

html, body {
    transition-property: background, color;
}

button, a {
    transition-property: all;
}

@media (max-width: 1023px) {
    .grid-container {
        @apply grid-cols-1;
        gap: 2em 0em;
        grid-template-cols: minmax(80px, 1fr);
        grid-template-areas:
            "nav"
            "main";
    }

    .nav {
        @apply grid;
        grid-template-rows: minmax(80px, 1fr);
        grid-template-areas:
            "navh"
            "navc";
        grid-area: nav;
    }

    .navh {
        grid-area: navh;
    }

    .navc {
        @apply flex flex-col;
        grid-area: navc;
    }

    .main {
        @apply grid pb-8;
        grid-template-areas:
            "mainc";
        grid-area: main;
    }

    .mainh {
        @apply hidden;
        grid-area: mainh;
    }

    .mainc {
        grid-area: mainc;
    }
}

@media (min-width: 1024px) {
    .grid-container {
        @apply grid-cols-2;
        gap: 0em 3em;
        grid-template-columns: 300px 1fr;
        grid-template-areas:
            "nav main";
    }

    .nav {
        @apply grid grid-cols-1 grid-flow-row;
        gap: 2em 0em;
        grid-template-rows: 80px 1fr;
        grid-template-areas:
            "navh"
            "navc";
        grid-area: nav;
    }

    .navh {
        grid-area: navh;
    }

    .navc {
        grid-area: navc;
    }

    .main {
        @apply grid grid-cols-1 grid-flow-row pb-8;
        gap: 2em 0em;
        grid-template-rows: 80px 1fr;
        grid-template-areas:
            "mainh"
            "mainc";
        grid-area: main;
    }

    .mainh {
        @apply flex flex-row items-stretch justify-between;
        grid-area: mainh;
    }

    .mainc {
        @apply grid grid-cols-6 gap-8;
        grid-template-rows: min-content 1fr;
        grid-area: mainc;
    }
}
