@import 'theme.less';

.ffe-header {
    &:extend(.ffe-body-text);

    background: var(--ffe-color-background-default);
    text-align: center;
    isolation: isolate;
    position: relative;
    z-index: 999;

    &__user-chevron--expanded {
        transform: rotate(180deg);
    }

    &__border:first-child {
        position: relative;
    }

    &__wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        margin: 0 auto;
        padding: 0 var(--ffe-spacing-sm);
        max-width: 1280px;
    }

    &__border {
        border-bottom: 1px solid var(--ffe-color-border-primary-default);
        & .ffe-header__wrapper {
            justify-content: center;
        }
    }

    &__link {
        transition:
            color var(--ffe-transition-duration) var(--ffe-ease),
            background-color var(--ffe-transition-duration) var(--ffe-ease);
        border: 2px solid transparent;

        &:link,
        &:visited,
        &:active {
            color: var(--ffe-color-foreground-default);
            text-decoration: none;
        }

        @media (hover: hover) and (pointer: fine) {
            &:hover {
                color: var(--ffe-color-foreground-interactive-link-hover);

                .ffe-header__user-nav & {
                    background: var(--ffe-color-surface-primary-default-hover);
                    color: var(--ffe-color-foreground-default);
                }
            }
        }

        &--active:link,
        &--active:visited {
            position: relative;
            color: var(--ffe-color-foreground-emphasis);
        }

        &--active::after {
            content: '';
            display: inline-block;
            border-bottom: 2px solid var(--ffe-color-foreground-emphasis);
            position: absolute;
            width: 100%;
            bottom: -2px;
            left: 0;
        }

        &--active:focus-visible::after {
            border-bottom: 0;
        }

        &:focus {
            border-radius: 1rem;
            box-shadow: 0 0 0 2px var(--ffe-color-border-interactive-focus);
            outline: none;

            .ffe-header__user-nav & {
                border-radius: 0;
                background-color: var(
                    --ffe-color-surface-primary-default-pressed
                );
            }
        }

        &:focus:not(:focus-visible) {
            background-color: transparent;
            box-shadow: none;
            color: var(--ffe-color-foreground-emphasis);
        }

        &--disabled {
            color: var(--ffe-color-foreground-subtle);
            cursor: default;
        }
    }

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

    &__logo {
        margin: var(--ffe-spacing-xs) 0;

        a {
            &:focus {
                box-shadow: 0 0 0 2px var(--ffe-color-border-interactive-focus);
                border-radius: 1rem;
                padding: var(--ffe-spacing-xs);
            }
        }

        &-text {
            fill: var(--ffe-color-foreground-interactive-link-pressed);
        }
    }

    &__logo-svg {
        height: 30px;
        vertical-align: middle;
        border: none;
    }

    &__logout-button,
    &__icon-button {
        all: unset;
        cursor: pointer;
        border-radius: 6em;

        &:active {
            transform: scale(0.97);
        }
    }

    &__icon-button {
        color: var(--ffe-color-foreground-default);
        display: inline-grid;
        grid-template-columns: auto 1fr;
        &:focus-visible {
            outline: 2px solid var(--ffe-color-foreground-default);
            outline-offset: 2px;
        }

        .ffe-header__notification-bubble {
            align-self: end;
            transform: translate(-1.25rem, -5px);
        }
    }

    &__logout-button {
        --color: var(--ffe-color-foreground-interactive-link);
        --color-hover: var(--ffe-color-foreground-interactive-link-hover);
        --background-color: var(
            --ffe-color-component-button-secondary-fill-default
        );
        --background-color-hover: var(
            --ffe-color-component-button-secondary-fill-hover
        );
        --border-color: var(
            --ffe-color-component-button-secondary-border-default
        );
        --border-color-hover: var(
            --ffe-color-component-button-secondary-border-hover
        );

        color: var(--color);
        background: var(--background-color);
        border: 2px solid var(--border-color);
        line-height: 1.5;
        padding: var(--ffe-spacing-xs) var(--ffe-spacing-md);
        margin: var(--ffe-spacing-md) var(--ffe-spacing-md) 0;

        &:focus-visible {
            outline: 2px solid var(--border-color);
            outline-offset: 2px;
        }

        @media (hover: hover) and (pointer: fine) {
            &:hover {
                --background-color: var(--background-color-hover);
                --border-color: var(--border-color-hover);
                --color: var(--color-hover);
            }
        }
    }

    &__user-icon,
    &__user-chevron-icon,
    &__site-nav-icon {
        color: var(--ffe-color-foreground-emphasis);
    }

    &__user-icon,
    &__site-nav-icon {
        vertical-align: middle;
    }

    &__user-chevron-icon {
        vertical-align: middle;
        margin-left: var(--ffe-spacing-xs);
        transition: transform var(--ffe-transition-duration)
            var(--ffe-ease-in-out-back);
        color: var(--ffe-color-foreground-default);
    }

    &__user-chevron--expanded &__user-chevron-icon {
        transform: rotate(180deg);
    }

    &__user-nav {
        transition:
            transform var(--ffe-transition-duration) var(--ffe-ease),
            opacity 0.1s;
        overflow: hidden;

        &:not(.ffe-header__user-nav--visible) {
            visibility: hidden;
            height: 1px;
            overflow: hidden;
            transform: translateY(-25px);
            opacity: 0;
        }
    }
    &__user-nav,
    &__site-nav {
        .ffe-header__link {
            display: flex;
            gap: var(--ffe-spacing-sm);
            padding: var(--ffe-spacing-xs) var(--ffe-spacing-md);
        }
    }

    &__site-nav-hamburger {
        position: relative;
        vertical-align: middle;
        display: inline-block;
        height: 24px;
        width: 24px;

        &-bar,
        &::before,
        &::after {
            display: inline-block;
            background: var(--ffe-color-foreground-emphasis);
            width: 24px;
            height: 4px;
            border-radius: 2px;
        }

        &-bar {
            position: absolute;
            left: 0;
            bottom: 10px;
            transition:
                transform var(--ffe-transition-duration)
                    var(--ffe-ease-in-out-back),
                width var(--ffe-transition-duration) var(--ffe-ease-in-out-back);
        }

        &::before {
            position: absolute;
            content: '';
            left: 0;
            bottom: 18px;
        }

        &::after {
            position: absolute;
            content: '';
            left: 0;
            bottom: 2px;
        }

        &::before,
        &::after {
            transition: transform var(--ffe-transition-duration)
                var(--ffe-ease-in-out-back);
        }

        &--expanded {
            .ffe-header__site-nav-hamburger-bar {
                width: 0;
                transform: translate(12px);
            }

            &::before {
                transform: translateY(8px) rotate(45deg);
            }

            &::after {
                transform: translateY(-8px) rotate(-45deg);
            }
        }
    }

    &__secondary-nav {
        display: none;
        text-transform: uppercase;
    }

    &__notification-bubble {
        font-family: var(--ffe-v-font-strong);
        font-weight: normal;
        font-size: 0.9rem;
        line-height: 1;
        display: inline-grid;
        place-items: center;
        width: 1.5rem;
        aspect-ratio: 1;
        background: var(--ffe-color-fill-feedback-critical);
        color: var(--ffe-color-foreground-inverse);
        border-radius: 50%;
    }
}

@media (min-width: @breakpoint-md) {
    .ffe-header {
        &__icon-button--site-nav,
        &__user-icon {
            display: none;
        }

        &__icon-button {
            .ffe-header__notification-bubble {
                transform: unset;
                align-self: start;
            }
        }

        &__icon-button--user-nav {
            .ffe-header__notification-bubble {
                grid-area: 1 e('/') 1 e('/') span 1 e('/') span 1;
                margin-right: var(--ffe-spacing-sm);
            }
        }

        &__logo {
            a {
                display: inline-block;
                height: 60px;
                line-height: 3.75rem;
                transition: box-shadow var(--ffe-transition-duration)
                    var(--ffe-ease);

                &:focus {
                    border-radius: 1rem;
                    padding: 0;
                }
            }
        }

        &__logo-svg {
            height: 40px;
        }

        &__site-nav {
            padding: var(--ffe-spacing-xs);
            grid-area: 2 e('/') 1 e('/') span 1 e('/') span 3;

            .ffe-header__list-item {
                display: inline-block;
                margin: 0 var(--ffe-spacing-xs);
            }

            .ffe-header__list-item--logout {
                display: none;
            }

            .ffe-header__link {
                padding: 0;
            }
        }

        &__site-nav-list {
            text-align: center;
        }

        &__secondary-nav {
            display: block;
            flex: 1;

            .ffe-header__list-item {
                display: inline-block;
                margin: 0 var(--ffe-spacing-sm) 0 0;
            }
        }

        &__user-nav-toggle {
            text-align: right;
            flex: 1;
        }

        &__user-nav {
            position: absolute;
            right: 20px;
            top: -16px;
            min-width: 225px;
            background: var(--ffe-color-background-default);
            border-radius: 24px;
            box-shadow: var(--ffe-shadow-md);
            border: 2px solid var(--ffe-color-border-primary-default);
            padding: var(--ffe-spacing-md) 0;
        }
    }

    // === Override styles for new header ===
    .ffe-header--enable-link-to-profile {
        .ffe-header__icon-button--user-nav {
            .ffe-header__notification-bubble {
                margin-right: var(--ffe-spacing-xs);
            }
        }
    }
    // === End override styles for new header ===
}

@media not (min-width: @breakpoint-md) {
    .ffe-header {
        &__border {
            &:last-child {
                margin-top: -1px;
            }
        }

        &__user-name {
            display: none;
        }

        &__user-nav {
            margin-right: var(--ffe-spacing-sm);
        }

        &__user-nav-toggle {
            order: -1;
        }

        &__user-nav,
        &__site-nav-list {
            visibility: hidden;
            height: 1px;
            position: absolute;
            right: 0;
            left: 0;
            top: 1px;
            padding: var(--ffe-spacing-sm) 0;
            border-bottom: 1px solid var(--ffe-color-border-primary-default);
            transform: translateY(-25px);
            transition: transform var(--ffe-transition-duration) var(--ffe-ease);

            &--visible {
                visibility: visible;
                height: auto;
                width: 100%;
                transform: translateY(0);
                background-color: var(--ffe-color-background-default);
            }
        }
        &__list-item--logout {
            display: block;
        }
    }

    // === Override styles for new header ===
    .ffe-header--enable-link-to-profile {
        .ffe-header {
            &__notification-bubble {
                display: none;
            }

            &__user-icon--with-notification::after {
                display: block;
                position: absolute;
                width: 10px;
                aspect-ratio: 1;
                background: var(--ffe-color-fill-feedback-critical);
                border-radius: 50%;
                content: '';
            }

            &__user-nav-toggle {
                display: inline-flex;

                & .ffe-header__svg-icon {
                    display: inline-flex;
                }
            }

            &__site-nav-toggle {
                display: inline-flex;

                & .ffe-header__svg-icon {
                    display: inline-flex;
                }
            }
        }
    }
    // === End override styles for new header ===
}

@media print {
    .ffe-header {
        &__logo {
            text-align: left;
        }

        &__user-nav,
        &__user-icon,
        &__user-chevron,
        &__site-nav,
        &__site-nav-toggle,
        &__notification-bubble {
            display: none;
        }
    }
}