@use "sass:map";
@use "../theme";

/* The header class is intended for use on the top of the page,
    and not anywhere else. It's usually accompanied by a navigation bar */

.header {
    background-color: map.get(theme.$header, "bg");
    display: inline-block;
    height: 60px;
    line-height: 60px;
    width: 100%;
    z-index: 999;

    &.header-xs {
        height: 48px;
        line-height: 48px;
    }

    &.header-sm {
        height: 60px;
        line-height: 60px;
    }

    &.header-md {
        font-size: 1.1em;
        height: 70px;
        line-height: 70px;
    }

    &.header-lg {
        font-size: 1.4em;
        height: 95px;
        line-height: 95px;
    }

    &.header-xl {
        font-size: 1.4em;
        height: 150px;
    }

    .nav-toggle {
        display: none;
    }

    .nav-toggle:checked ~ .nav {
        display: block;
    }

    .nav-toggle-hamburger {
        background: transparent;
        font-size: 1.8em;
        border-radius: 3px;
        border: 0;
        display: none;
        float: right;
        outline: none;
        cursor: pointer;
    }

    .header-brand {
        float: left;
        font-family: inherit;
        font-size: theme.$brand-font-size;
        padding-left: theme.$main-padding;
    }
}

@media (max-width: map.get(theme.$container, "width-sm")) {
    .header {
        .nav-toggle-hamburger {
            display: inline-block;
        }

        .nav {
            display: none;
            background-color: map.get(theme.$header, "bg");
            z-index: 999;
            position: absolute;
            left: 0;
            width: 100%;
            overflow-y: auto;
            max-height: 50vh;
            border-bottom: 1px solid #eee;

            ul li {
                display: block;
            }

            .dropdown {
                display: block;
                position: static;
                border: none;
                margin-left: 15px;

                ul li a::before {
                    padding-right: 0.5em;
                    display: inline-block;
                }
            }
        }

        &.header-xs .nav {
            top: 49px;
        }

        &.header-sm .nav {
            top: 61px;
        }

        &.header-md .nav {
            top: 71px;
        }

        &.header-lg .nav {
            top: 97px;
        }

        &.header-xl .nav {
            top: 151px;
        }
    }
}
