.header-nav {
    $this: &;

    width: 100%;

    @include breakpoint(xl) {
        align-items: center;
        column-gap: 30px;
        display: flex;
        justify-content: flex-end;
        width: 100%;
    }

    @include breakpoint(xxl) {
        column-gap: 40px;
    }

    &__list {
        display: flex;
        flex-direction: column;
        gap: 10px 20px;
        margin: 20px 0;
        flex-shrink: 0;

        @include breakpoint(xl) {
            flex-direction: row;
            margin: 0 auto;
        }

        @include breakpoint(xxl) {
            column-gap: 50px;
        }
    }

    &__link {
        font-size: 22px;
        font-weight: 700;
        color: var(--rocket-color-secondary-100);
        text-decoration: underline;

        &:is(a) {
            text-decoration: none;

            @include event {
                text-decoration: underline;
            }
        }
    }

    &__actions {
        display: none;

        @include breakpoint(md) {
            display: flex;
            flex-wrap: wrap;
            gap: 8px 40px;
        }
    }

    &__action {
        align-items: center;
        color: var(--rocket-color-secondary-100);
        column-gap: 10px;
        display: flex;
        font-size: 0.875rem;
        font-weight: 700;
        line-height: 1.22;
        text-decoration: none;

        @include breakpoint(xl) {
            font-size: 1.125rem;
        }

        &:is(a) {
            @include event {
                span {
                    text-decoration: underline;
                }
            }
        }
    }

    &__search {
        margin: 20px 0;

        @include breakpoint(xl) {
            margin: 0;
        }
    }

    &__mobile-actions {
        column-gap: 30px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin: 20px 0;
        row-gap: 8px;

        @include breakpoint(md) {
            display: none;
        }
    }

    &--active {
        display: block;
    }

    @at-root .page--with-banner {
        #{$this} {
            &__link {
                @include breakpoint(lg) {
                    //color: var(--rocket-color-white-base);
                }
            }
        }
    }
}

.header-nav-trigger {
    $this: &;

    @include size(33px, 26px);

    display: flex;
    padding: 0;
    position: relative;
    border: 0;
    background: none;

    @include breakpoint(xl) {
        display: none;
    }

    &__icon {
        @include size(100%);

        display: block;
        position: relative;

        span {
            @include transition;

            display: block;
            position: absolute;
            left: 0;
            background-color: var(--rocket-color-secondary-100);
            height: 4px;
            width: 100%;

            &:first-child {
                top: 0;
            }

            &:nth-child(2) {
                width: 27px;
                top: 50%;
                transform: translateY(-50%);
            }

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

    &--active {
        #{$this} {
            &__icon {
                span {
                    &:first-child {
                        top: 50%;
                        transform: translateY(-50%) rotate(45deg);
                    }

                    &:nth-child(2) {
                        width: 0;
                    }

                    &:last-child {
                        bottom: 50%;
                        transform: translateY(50%) rotate(-45deg);
                    }
                }
            }
        }
    }
}