@use "../base/mixins";
@use "../base/variables";

header.site-header {
    width: 100%;
    height: 60px;
    padding: 0 var(--site-padding);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    overflow: hidden;

    background-color: rgba(var(--c-white-rgb), .9);
    backdrop-filter: blur(4px) saturate(180%);
    box-shadow:
        0 0 10px rgba(var(--c-d-grey-rgb), .2),
        0 0 30px rgba(var(--c-d-grey-rgb), .15);


    div.container {
        min-height: 100%;
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .custom-logo-link {
        max-height: 50px;

        img {
            width: auto;
            height: 40px;
        }
    }

    nav.nav-primary {
        display: none;
    }

    transition: 400ms cubic-bezier(.23, .96, .59, 1);

    // Sticky states
    &.pre-set-sticky {
        display: none;
        position: fixed;
        top: 0;
        transform: translateY(-100%);
    }
    
    &.set-sticky {
        display: block;

        &.is-visible {
            transform: translateY(0);
        }
    }

    @include mixins.min-width( variables.$header-breakpoint ) {
        overflow: visible;

        nav.nav-primary {
            display: block;
        }
    }
}

button#mobile-menu-trigger {
    width: 48px;
    height: 48px;
    padding: 16px 15px;
    display: block;
    position: absolute;
    top: calc(50% - 24px);
    right: 4px;

    border: none;
    background: none;

    @include mixins.min-width( variables.$header-breakpoint ) {
        display: none;
    }
}