@import "../../../styles/mixins";

$class: ".gov-header";

#{$class} {
    & {
        background-color: var(--component-nav-background);
    }

    &__content {
        @include flex($direction: column, $gap: var(--templates-margin-m));
        padding: var(--templates-margin-l);
    }
    &__navigation {
        position: relative;
        z-index: 10;
        padding: var(--templates-margin-s) 0;
        border-top: 1px solid var(--border-primary);
    }
    &__logo {
        color: var(--icon-on-subtle);
        @include typography("body-m");
        text-decoration: none;
    }
    &__action {
        display: none;
    }
    &__search-bar {
        display: none !important;
        position: absolute !important;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        background-color: var(--component-nav-background);
        > * {
            width: 100%;
            padding: var(--templates-margin-l) 0;
        }
    }
    .gov-logo {
        color: var(--icon-on-subtle);
    }

    @include mq($from: md) {
        &__content {
            @include flex($direction: row, $justify: space-between, $align: center);
            max-width: var(--templates-layout-page-limit-max);
            margin: 0 auto;
            padding: 0 var(--templates-margin-l);
        }
        &__divider {
            padding: var(--templates-margin-m) 0;
            border-bottom: 1px solid var(--component-nav-separator);
        }
        &__navigation {
            max-width: var(--templates-layout-page-limit-max);
            margin: 0 auto;
            padding: var(--templates-margin-s) 0;
            border: none;
        }
        &__logo {
            @include typography("body-l");
        }
        &__action {
            display: flex;
        }
        &__search-bar {
            .gov-search {
                width: rem-calc(500);
            }
        }
        &__mobile {
            display: none;
        }
    }

    // VARIANTS
    &--small {
        #{$class}__content {
            position: relative;
            z-index: 10;
            padding: 0;
            gap: 0;
            > #{$class}__navigation {
                position: static;
            }
        }
        #{$class}__left {
            padding: var(--templates-margin-l);
        }

        @include mq($from: md) {
            padding: var(--templates-margin-m) 0;
            #{$class}__content {
                padding: 0 var(--templates-margin-l);
                gap: var(--templates-margin-l);
            }
            #{$class}__left {
                padding: 0;
            }
            #{$class}__navigation {
                max-width: none;
                margin: 0 auto 0 0;
            }
        }
    }
}