@use '../function' as *;
@use '../mixin';

@mixin roolith-layout() {
    .layout {
        display: grid;
        grid-template-columns: var(--r-layout-compact-sidebar-width) auto;
        grid-template-rows: var(--r-layout-header-height) auto;
        min-height: 100vh;
        position: relative;

        @include mixin.breakpoint(large-up) {
            grid-template-columns: var(--r-layout-sidebar-width) 1fr;
        }
    }

    .layout-primary {
        border-right: var(--r-layout-border-width) solid var(--r-layout-border-color);
    }

    .layout-secondary {
        background-color: var(--r-layout-secondary-background-color);
        padding: rem(20);
    }

    // header
    .layout-header {
        background-color: var(--r-layout-header-background-color);
        border-bottom: var(--r-layout-border-width) solid var(--r-layout-header-border-color);
        height: var(--r-layout-header-height);

        grid-column: span 2;
        display: grid;
        grid-template-columns: var(--r-layout-compact-sidebar-width) 1fr;

        @include mixin.breakpoint(large-up) {
            grid-template-columns: var(--r-layout-sidebar-width) 1fr;
        }
    }

    .layout-header.is-sticky {
        position: sticky;
        top: 0;
        z-index: 1000;
    }

    .layout-header-logo {
        display: none;
        width: var(--r-layout-header-logo-width);

        @include mixin.breakpoint(large-up) {
            display: inline-block;
        }
    }

    .layout-header-sidebar-toggle {
        display: none;
        font-size: rem(22);
        cursor: pointer;
        user-select: none;
        background: none;
        padding: 0;
        margin: 0;
        border: none;
        font-size: rem(18);
        color: var(--r-layout-header-toggle-color);
        @include mixin.transition('opacity');

        &:hover {
            opacity: 0.8;
        }

        @include mixin.breakpoint(large-up) {
            display: inline-block;
        }
    }

    .layout-header-primary {
        padding: var(--r-layout-header-padding);
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-right: var(--r-layout-border-width) solid var(--r-layout-header-border-color);
    }

    // header secondary
    .layout-header-secondary {
        padding: var(--r-layout-header-padding);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: rem(20);

        .form .form-field {
            padding-bottom: 0;
        }
    }

    .layout-header-nav {
        --r-nav-link-color: var(--r-layout-header-nav-color);

        margin-left: auto;
        float: none;
        display: none;

        @include mixin.breakpoint(medium-up) {
            display: inline-flex;
        }
    }

    .layout-header-search {
        width: var(--r-layout-header-search-width, auto);
    }

    .layout-header-avatar {
        display: none;

        @include mixin.breakpoint(large-up) {
            display: block;
        }
    }

    // compact
    .layout-compact {
        --r-layout-sidebar-width: var(--r-layout-compact-sidebar-width);

        .layout-header-logo {
            display: none;
        }
    }
}