@import '../header-logo/scss/header-logo';
@import '../header-nav/scss/header-nav';
@import '../header-search/scss/header-search';

.header {
    $this: &;

    position: relative;
    z-index: 2;

    &__main {
        @include size(100%, auto);

        background-color: var(--rocket-color-white-base);
        padding-block: 9px;
        position: relative;
        width: 100%;

        @include breakpoint(xl) {
            @include size(100%, 120px);

            padding-block: 15px;
            box-shadow: 0 6px 15px 0 rgba(0, 0, 0, 0.25);
        }
    }

    &__main-wrapper {
        @extend .container;
        @extend .container--xl;

        max-width: 1600px;
        align-items: center;
        column-gap: 20px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        position: relative;
        z-index: 3;

        @include breakpoint(xl) {
            flex-wrap: nowrap;
        }
    }

    & &__main-wrapper {
        max-width: 1600px;
    }

    &__logo {
        max-width: 164px;
        flex-shrink: 0;

        @include breakpoint(xl) {
            max-width: 287px;
        }
    }

    &__navigation {
        flex-shrink: 1;
    }

    @at-root .page--with-banner {
        #{$this} {
            @include breakpoint(xl) {
                margin-bottom: -52px;
            }
        }
    }
}