// Block
.ons-header {
    $root: &;
    @include font-smoothing;

    display: block;
    margin: 0;
    position: relative;

    // Elements
    &__top {
        background: var(--ons-color-header-masthead);
        width: 100%;
    }
    &__grid-top {
        padding: 1rem 0;
        row-gap: 0.5rem;

        @include mq(xs) {
            padding: 0.875rem 0;
        }
    }
    &__main {
        background: var(--ons-color-header);
        padding: 0.5rem 0;

        &--border {
            border-bottom: 3px solid var(--ons-color-header);
            border-top: 3px solid var(--ons-color-header);
            padding: 0.934rem 0;
        }
    }
    &__title {
        @extend .ons-u-fs-r--b;
        @extend .ons-u-fs-xl\@2xs;

        color: var(--ons-color-white);

        @include mq(m) {
            margin-bottom: 1rem;
            margin-top: 1rem;
        }

        &-link {
            display: block;
            text-decoration: none;
            &:focus {
                .ons-header__title {
                    color: var(--ons-color-text-link-focus);
                }
            }
            &:hover {
                text-decoration: underline solid var(--ons-color-text-inverse-link) 2px;
            }
        }
    }
    &__description {
        @extend .ons-u-fs-s;
        @extend .ons-u-fs-r\@s;

        color: var(--ons-color-white);
        margin: 0;

        @include mq(m) {
            margin: 0 0 1rem;
        }
    }

    &__language {
        display: none;

        .ons-js-enabled & {
            display: block;
        }
    }

    // Modifier - variants
    &--description {
        .ons-header {
            &__title {
                @extend .ons-u-fs-m;
                @extend .ons-u-fs-2xl\@m;

                margin-bottom: 0;
            }
        }
    }

    &--internal & {
        &__top {
            background: var(--ons-color-header-masthead-internal);
            .ons-icon--logo {
                display: block;
                .ons-icon--logo__group--text,
                .ons-icon--logo__group--primary {
                    fill: var(--ons-color-white);
                }
            }
        }
        &__grid-top {
            color: var(--ons-color-text-inverse);
            min-height: 36px;
            a {
                color: var(--ons-color-text-inverse);
                &:hover {
                    text-decoration: underline solid var(--ons-color-text-inverse-link-hover) 3px;
                }
                &:focus {
                    color: var(--ons-color-text-link-focus);
                    &:hover {
                        text-decoration: none;
                    }
                }
            }
        }
    }

    &--neutral & {
        &__top {
            .ons-icon--logo {
                display: block;
                .ons-icon--logo__group--text,
                .ons-icon--logo__group--primary,
                .ons-icon--logo__group--secondary {
                    fill: var(--ons-color-black);
                }
            }
        }

        &__grid-top {
            a {
                color: var(--ons-color-black);
                &:hover {
                    text-decoration: underline solid var(--ons-color-header-masthead-neutral) 3px;
                }
                &:focus:hover {
                    text-decoration: none;
                }
            }
        }

        &__main {
            background: var(--ons-color-header-neutral);
        }

        &__title {
            color: var(--ons-color-white);
            &-link {
                &:hover {
                    text-decoration: underline solid var(--ons-color-branded-text) 2px;
                }
            }
        }
    }

    .ons-icon--logo {
        display: block;
        width: 100%;
    }

    &__org-logo-link,
    &__title-logo-link {
        display: block;
        &:hover {
            text-decoration: none;
        }
    }

    &__org-logo-link {
        &:focus {
            .ons-icon--logo {
                fill: var(--ons-color-black) !important;
                .ons-icon--logo__group {
                    fill: var(--ons-color-black) !important;
                }
            }
        }
    }

    &__org-logo--large {
        @include mq('2xs', 590px) {
            display: none;
        }
    }

    &__org-logo--small {
        @include mq(591px) {
            display: none;
        }
    }

    &__org-logo--multi {
        display: inline-flex;
        column-gap: 1rem;
        align-items: center;
    }

    &-service-nav {
        display: inline-block;

        &--mobile {
            background: var(--ons-color-branded-tint);
            padding: 1rem;
            width: 100%;
        }

        .ons-header--neutral & {
            &--mobile {
                background: var(--ons-color-grey-5);
                .ons-header-service-nav__link {
                    color: var(--ons-color-black);
                }
            }
        }

        &__list {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        &__item {
            display: inline-block;
            margin: 0 0 0 1rem;
            &--mobile {
                display: block;
                margin: 0 0 0.5rem;
            }
            &:first-child {
                margin-left: 0;
            }
            .ons-icon {
                clip-path: circle(9px at center);
                margin-right: 0.5rem;
            }
        }

        .ons-language-links {
            border-top: 1px solid var(--ons-color-branded);
            margin: 1.5rem 0 0;
            padding: 1rem 0 0;

            &__item {
                margin: 0 0 0.5rem;
            }
        }
    }

    &--basic & {
        &__grid-top {
            padding: 0;
            flex-direction: column;
            align-items: flex-start;

            #{$root}__menu-links {
                width: 100%;

                #{$root}__language {
                    display: block;
                    padding-top: 1rem;

                    // hide the language switcher within nav when js is enabled
                    .ons-js-enabled & {
                        display: none;
                    }
                }
            }

            // When JS is enabled, revert the no-js styles
            .ons-js-enabled & {
                flex-direction: inherit;
                align-items: center;

                #{$root}__menu-links {
                    width: auto;
                }
            }
        }
    }

    &-nav-menu {
        margin-bottom: 0;
        padding-bottom: 2.5rem;
        position: relative;
        width: 100%;

        &__key-list {
            border-bottom: 1px solid var(--ons-color-ocean-blue);
            margin-bottom: 1.25rem;
            padding-bottom: 1rem;
            padding-left: 0;
            row-gap: 1rem;
        }

        &__link,
        &__heading,
        &__text,
        &__description {
            line-height: 1.714 !important;
        }

        &__groupItem-list:not(:last-of-type) {
            margin-bottom: 2rem !important;
        }

        .ons-grid {
            margin-left: 0;
        }

        .ons-grid__col {
            padding-left: 0;
            padding-bottom: 1rem;
            @include mq(m) {
                padding-bottom: 0;
            }
        }
    }

    // applies styles for non-js variant
    &-nav-menu ~ &-nav-search {
        border-top: 1px solid var(--ons-color-ocean-blue);
    }

    &-nav-menu,
    &-nav-search {
        background-color: var(--ons-color-branded-tint);

        // updates styles when js is enabled
        .ons-js-enabled & {
            position: absolute;
            top: 100%;
            left: 50%;
            width: 100vw;
            transform: translateX(-50%);
            border-top: 0;
            z-index: 500;
        }
    }

    &__menu-links ~ &__links {
        padding-bottom: 0.25rem;
    }

    &-nav-search {
        @extend .ons-u-pt-2xl;
        @extend .ons-u-pb-2xl;

        &__input {
            border-bottom: 1px solid var(--ons-color-ocean-blue);
            @extend .ons-u-mb-2xl;
            @extend .ons-u-pb-2xl;

            row-gap: 1rem;
        }
    }

    .ons-btn {
        top: 0 !important;
    }
}