/* ============================================================================
   06-COMPONENTS -> #HEADER
   ========================================================================= */

/**
 * Contains the main navigation and company logo.
 */


//
// SCSS imports
//

@use '../01-settings' as *;
@use '../02-tools' as *;


/**
 * Header
 */

.header {
    --header-bg: var(--bg-secondary);
    --header-height: var(--soace-14);
    --header-bg-size: var(--space-5);
    --header-border-color: var(--border-color-secondary);
    --header-border-width: var(--form-input-border-width);

    align-items: center;
    background-color: var(--header-bg);
    border-bottom: var(--header-border-width) solid var(--header-border-color);
    display: flex;
    height: var(--header-height);
    justify-content: flex-end;
    padding-bottom: var(--space-2);
    padding-top: var(--space-2);
    z-index: var(--z-index-90);

    @include media-breakpoint-up('xl') {
        left: calc(var(--sidebar-width) - var(--header-border-width));
        position: fixed;
        right: 0;
        width: calc(100% - var(--sidebar-width));

        &::before {
            background-color: var(--header-bg);
            content: '';
            position: absolute;
            height: 2rem;
            top: 100%;
            left: 0;
            width: 2rem;
        }
        
        &::after {
            background-color: var(--bg-primary);
            border-left: var(--header-border-width) solid var(--header-border-color);
            border-top: var(--header-border-width) solid var(--header-border-color);
            border-top-left-radius: 100%;
            content: '';
            position: absolute;
            height: 2rem;
            top: 100%;
            left: 0;
            width: 2rem;
        }
    }
}


/**
 * Header container
 */

.header__container {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-left: var(--grid-gutter-x);
    padding-right: var(--grid-gutter-x);
    width: 100%;

    @include media-breakpoint-up('xl') {
        justify-content: flex-end;
    }
}


/**
 * Header logo
 */

.header__logo {
    align-items: center;
    display: inline-flex;
    height: var(--space-10);
    justify-content: center;
    
    & > svg {
        fill: var(--logo-fill);
        height: var(--space-8);
        width: auto
    }

    @include media-breakpoint-up ('xl') {
        display: none;
    }
}


/**
 * Header content
 */

.header__content {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: var(--space-2);
}


/**
 * Header toggle
 */

.header__toggle {
    @include form-input-focus;
    @include transition(('border-color', 'box-shadow', 'color'), var(--duration-sm));
    align-items: center;
    appearance: none;
    background-color: transparent;
    border: 0;
    border-radius: var(--rounded-sm);
    display: flex;
    justify-content: center;
    padding: var(--space-2);
    position: relative;
    z-index: var(--z-index-90);

    @include media-breakpoint-up ('xl') {
        display: none;
    }
}


/**
 * Header toggle icon
 */

.header__toggle-icon {
    height: var(--space-6);
    pointer-events: none;
    position: relative;
    width: var(--space-6);

    @include media-breakpoint-up ('xl') {
        display: none;
    }
}


/**
 * Header toggle line
 */

.header__toggle-line {
    --header-toggle-line-height: .125rem;
    background-color: var(--text-color-primary);
    border-radius: var(--header-toggle-line-height);
    height: var(--header-toggle-line-height);
    position: absolute;
    transition: transform 400ms cubic-bezier(0.9, -0.6, 0.3, 1.6) 0ms, width 150ms ease 400ms;

    &:nth-child(1) {
        left: .125rem;
        top: .3125rem;
        transform-origin: 0 50%;
        width: 1rem;
    }

    &:nth-child(2) {
        left: var(--header-toggle-line-height);
        margin: -1px 0 0 0;
        top: 50%;
        transform-origin: 50% 50%;
        width: 1.25rem;
    }

    &:nth-child(3) {
        bottom: .3125rem;
        right: var(--header-toggle-line-height);
        transform-origin: 100% 50%;
        transform: translate(-.25rem, 0);
        width: 1rem;
    }
}




/* MODIFIERS
   ========================================================================= */

/**
 * Header toggle expanded
 */

.header__toggle[aria-expanded=true] {
    .header__toggle-line {
        transition: transform 400ms cubic-bezier(0.9, -0.6, 0.3, 1.6) 150ms, width 200ms ease;
        
        &:nth-child(1) {
            background-color: var(--color-white);
            transform: translate(3px, -1px) rotate(45deg);
            width: .625rem;
        }
    
        &:nth-child(2) {
            background-color: var(--color-white);
            transform: rotate(-45deg);
        }
    
        &:nth-child(3) {
            background-color: var(--color-white);
            transform: translate(-3px, 1px) rotate(45deg);
            width: .625rem;
        }
    }
}