@use "../variables" as vars;
@use "../functions" as func;
@use "../mixins" as mixins;

// Header

.header {
    width: 100%;
    border-bottom: func.border(vars.$header-last-border);

    .button {
        width: 100%;

        @include mixins.media-breakpoint-up(vars.$nav-responsive-breakpoint) {
            width: auto;
        }
    }

    h1, h2, h3, h4, h5, h6, p {
        margin-top: 0;
        margin-bottom: 0;
    }

    .button-menu-open {
        width: auto;
        white-space: nowrap;

        @include mixins.media-breakpoint-up(vars.$nav-responsive-breakpoint) {
            display: none;
        }
    }

    .portal-info {
        background-color: func.color(vars.$header-portal-background-color);
        width: 100%;

        .log-on, .log-off {
            flex-shrink: 0;
            display: flex;
            align-items: center;
        }

        .logo {
            background-image: url("#{vars.$image-path}#{vars.$header-portal-logo}");
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center left;
            display: inline-block;
            height: vars.$header-portal-logo-height;
            width: vars.$header-portal-logo-width;

            @include mixins.media-breakpoint-up(vars.$nav-responsive-breakpoint) {
                max-width: 30%;
            }

            span {
                display: none;
            }
        }

        .portal-info-inner {
            width: 100%;
            min-height: func.units(8);
            padding-top: func.units(2);
            padding-bottom: func.units(2);
            display: flex;
            align-items: center;

            @include mixins.media-breakpoint-up(vars.$nav-responsive-breakpoint) {
                flex-direction: row;
            }
        }

        .portal-user {
            display: none;

            @include mixins.media-breakpoint-up(vars.$nav-responsive-breakpoint) {
                margin-left: auto;
                display: flex;
                align-items: center;
                justify-content: flex-end;
                max-width: 70%;

                .user {
                    text-align: right;
                    margin-right: func.units(5);
                    overflow-wrap: break-word;
                }
            }

        }
    }

    .portal-info-mobile {
        border-top: func.border(vars.$header-portal-mobile-border);
        padding: func.units(5);
        text-align: left;
        background-color: func.color(vars.$header-portal-background-color);

        p {
            margin-bottom: func.units(3);
        }

        .user span {
            display: block;
            overflow-wrap: break-word;
            line-height: 1.5;
        }

        .log-on, .log-off {
            margin-top: func.units(2);
        }

        @include mixins.media-breakpoint-up(vars.$nav-responsive-breakpoint) {
            display: none;
        }
    }

    .solution-info {
        background-color: func.color(vars.$header-solution-background-color);
        width: 100%;

        .solution-info-inner {
            display: flex;
            align-items: center;
            flex-direction: row;
            justify-content: space-between;
            padding-top: calc(#{func.units(4)} - 1px);
            padding-bottom: calc(#{func.units(4)} - 1px);
        }

        .solution-heading {
            max-width: 100%;
            overflow-wrap: break-word;

            @include mixins.media-breakpoint-up(vars.$nav-responsive-breakpoint) {
                max-width: 70%;
            }
            
            *:not(.badge, .tag, .tooltip-wrapper) {
                font-size: func.font-size(vars.$header-solution-text-size);
                line-height: func.units(vars.$header-solution-line-height, 'rem');
                font-weight: func.font-weight("semibold");
                color: func.color(vars.$header-solution-text-color);
                text-decoration: none;
                display: inline-block;
                max-width: 100%;

                @include mixins.media-breakpoint-up(md) {
                    font-size: func.font-size(vars.$header-solution-text-size-desktop);
                    line-height: func.units(vars.$header-solution-line-height-desktop, 'rem');
                }
            }
        }

        .additional-info {
            display: none;

            @include mixins.media-breakpoint-up(vars.$nav-responsive-breakpoint) {
                margin-left: auto;
                text-align: right;
                display: block;
                max-width: 30%;
                overflow-wrap: break-word;
            }
        }
    }

    .authority-name {
        color: func.color(vars.$header-solution-authority-name);
        font-weight: func.font-weight("semibold");
        font-size: func.font-size(vars.$header-solution-authority-name-font-size);
        line-height: 2.4rem;
        margin-top: 0;
        margin-bottom: 0;
    }

    .button-contact {
        display: inline-flex;

        .icon-svg {
            position: relative;
            top: -1px;
        }
    }

    .solution-info-mobile {
        padding: func.units(5);
        background-color: func.color(vars.$header-solution-mobile-background-color);
        overflow-wrap: break-word;

        p {
            margin-bottom: func.units(3);
            color: func.color(vars.$header-solution-info-mobile-text-color);

            &:last-child {
                margin-bottom: 0;
            }
        }

        .function-link {
            color: func.color(vars.$header-solution-info-mobile-text-color);

            &:hover,
            &:focus,
            &:visited {
                color: func.color(vars.$header-solution-info-mobile-text-color);
            }
        }

        @include mixins.media-breakpoint-up(vars.$nav-responsive-breakpoint) {
            display: none;
        }
    }

    
    .navigation-menu {
        display: none;

        @include mixins.media-breakpoint-up(vars.$nav-responsive-breakpoint) {
            border-left: none;
            display: block;
            overflow-y: visible;
            position: static;
            padding: 0;
            width: 100%;
            background-color: func.color(vars.$header-navigation-background-color);
        }

        .navigation-menu-inner {
            padding-left: 0;
            padding-right: 0;

            @include mixins.media-breakpoint-up(vars.$nav-responsive-breakpoint) {
                padding-left: calc(vars.$grid-gutter-width / 2);
                padding-right: calc(vars.$grid-gutter-width / 2);
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                flex-direction: row;
            }

            .nav {
                display: none;
                flex: 1 1 auto;

                @include mixins.media-breakpoint-up(vars.$nav-responsive-breakpoint) {
                    display: block;
                }

                // Remove search padding when both nav and search is in in the header.
                // Otherwise, Firefox will calculate different heights when zooming in.
                & + .form-group.search,
                & + .search-form .form-group.search {
                    @include mixins.media-breakpoint-up(vars.$nav-responsive-breakpoint) {
                        padding-top: 0;
                        padding-bottom: 0;
                    }
                }
            }

            .form-group.search {
                margin-top: 0;
                flex: 0 0 auto;
                padding-top: func.units(4);
                padding-bottom: func.units(4);

                @include mixins.media-breakpoint-up(vars.$nav-responsive-breakpoint) {
                    padding-top: func.units(3);
                    padding-bottom: func.units(3);
                    margin-left: auto;
                }

                .form-input {
                    max-width: 100%;

                    @include mixins.media-breakpoint-up(vars.$nav-responsive-breakpoint) {
                        max-width: 24rem;
                        min-width: 24rem;
                    }
                }
            }
        }

        &.contains-search {
            display: block;

            .navigation-menu-inner {
                padding-left: calc(vars.$grid-gutter-width / 2);
                padding-right: calc(vars.$grid-gutter-width / 2);
            }
        }
    }

    .mobile-drawer {
        display: none;
        $sliding-panel-width: 85%;
        position: fixed;
        inset: 0 0 0 auto;
        background-color: func.color(vars.$header-portal-background-color);
        flex-direction: column;
        overflow-y: auto;
        padding: 0;
        width: $sliding-panel-width;
        max-width: 40rem;
        z-index: vars.$zindex-nav;
        box-shadow: func.shadow('heavy');

        @keyframes slidein-left {
            from {
                transform: translateX($sliding-panel-width);
            }

            to {
                transform: translateX(0);
            }
        }


        &.is-visible {
            display: block;
            animation: slidein-left 0.3s ease-in-out;
        }
    }

    .menu-top {
        background-color: func.color(vars.$header-navigation-top-mobile-background-color);
        padding: func.units(3) func.units(5);
        display: flex;
        align-items: center;
        min-height: func.units(8);

        @include mixins.media-breakpoint-up(vars.$nav-responsive-breakpoint) {
            display: none;
        }

        .menu-heading {
            font-size: func.font-size('lg');
        }

        .button-menu-close {
            width: unset;
            margin-left: auto;
        }
    }

    // Header borders

    .portal-info + .solution-info {
        border-top: func.border(vars.$header-border);
    }

    .menu-top + .solution-info-mobile {
        border-top: func.border(vars.$header-border);
    }

    .solution-info-mobile:last-child {
        border-bottom: func.border(vars.$header-portal-mobile-border);
    }

    @include mixins.media-breakpoint-up(vars.$nav-responsive-breakpoint) {
        .solution-info ~ .navigation-menu {
            border-top: func.border(vars.$header-border);
        }
    }

    .solution-info ~ .navigation-menu.contains-search {
        border-top: func.border(vars.$header-border);
    }
}

// Overlay

.overlay {
    position: fixed;
    inset: 0;
    background: func.color('black');
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    visibility: hidden;
    z-index: vars.$zindex-overlay;

    &.is-visible {
        opacity: 0.75;
        visibility: visible;
    }
}