/*------------------------------------*\
    SITE HEADER
\*------------------------------------*/

@use "../../base/helpers";
@use "../../base/settings";

// modifiable vars
$site-header__border-colour--reversed: settings.$ds_colour__brand--secondary !default;

// fixed vars
$site-header__border-colour: settings.$ds_colour__border--faint;
$site-header__top-band-colour: settings.$ds_colour__brand;
$site-header__top-band-colour--secondary: settings.$ds_colour__brand--secondary;

.ds_site-header {
    background-color: settings.$ds_colour__background--primary;
    border-bottom: 0.0625rem solid $site-header__border-colour;
    margin-bottom: -0.0625rem;
    position: relative;

    &::before {
        border-top: 0.25rem solid $site-header__top-band-colour;
        content: '';
        display: block;
    }

    &--gradient::before {
        border-image-slice: 1;
        border-image-source: linear-gradient(to right, settings.$ds_colour__brand, settings.$ds_colour__brand--secondary);
    }

    &__content {
        align-items: center;
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas: 'branding controls' 'nav nav' 'search search';
    }

    .ds_site-branding {
        grid-area: branding;
    }

    .ds_site-header__controls {
        grid-area: controls;
        float: right;
        height: calc(100% + 0.0625rem);
        margin-bottom: -0.0625rem;
    }

    .ds_site-navigation--mobile {
        grid-area: nav;
    }

    &__search {
        grid-area: search;
        margin: 0.5rem 0;

        .ds_input__wrapper {
            margin: 0;
        }
    }

    &__control {
        @include helpers.ds_link;
        @include helpers.ds_link--block;
        @include helpers.ds_high-contrast-button;

        align-items: center;
        color: inherit;
        cursor: pointer;
        display: flex;
        font-size: 1rem;
        font-weight: settings.$normal;
        height: 100%;
        margin: 0 -1rem -0.0625rem 0;
        min-height: 3rem;
        padding: 1rem;
        text-decoration: none;

        &--active {
            background-color: settings.$ds_colour__link--current__background;
            box-shadow: -0.0625rem -0.0625rem 0 rgba(0, 0, 0, 0.08);

            .ds_site-header__control-icon {
                display: none;
            }

            .ds_site-header__control-icon--active-icon {
                display: block;
            }
        }
    }

    &__control-icon {
        height: 1.5rem;
        width: 1.5rem;

        &--active-icon {
            display: none;
        }
    }

    &__control-text {
        float: left;
        margin-right: 0.5rem;
        pointer-events: none;
    }

    @include helpers.ds_media-query(medium) {
        &__content {
            grid-template-columns: auto max-content;
            grid-template-areas: 'branding search';
        }

        &__controls {
            display: none;
        }

        &__navigation {
            border-top: 0.0625rem solid settings.$ds_colour__border--faint;
            margin-top: -0.0625rem;
        }
    }
}