.header {
    background-color: $color-shade-lightest;
    width: 100%;
    z-index: $z-index-header;

    @include media-breakpoint-down(md) {
        top: $spacing-lg;
        z-index: $z-index-header-md;
    }
}

.header__container {
    align-items: center;
    display: flex;
    gap: $spacing-sm;
    justify-content: space-between;
    padding: $spacing-lg $spacing-xl;
    position: relative;

    @include media-breakpoint-down(md) {
        padding: rem(12px) $spacing-lg;
    }
}

.header__left-side {
    align-items: center;
    display: flex;
    flex-shrink: 0;

    @include media-breakpoint-down(xl) {
        margin-left: -$spacing-md;
    }
}

.header__logo-img {
    transition: $transition-default;
    width: 150px;

    @include media-breakpoint-down(xl) {
        max-width: 130px;
    }
}

.header__nav {
    align-items: center;
    display: flex;
    gap: $spacing-md;
}

.header__nav-buttons {
    align-items: center;
    display: flex;
    gap: $spacing-md;

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

.header__nav-button {
    transition: unset;
    white-space: nowrap;

    &::after {
        display: none;
    }
}

.header__nav-icons {
    display: flex;
    gap: $spacing-md;
}

.header__nav-button-icon {
    display: block;
    height: rem(18px);
    pointer-events: none;
    transition: $transition-default;
    width: rem(18px);
}

.header__nav-button:hover .header__nav-button-icon {
    color: $color-primary;
}

.header__nav-search-btn {
    background: transparent;
    border: 0;
    padding: 0;
}

.close-button {
    background-color: $color-secondary-light;
    border: none;
    border-radius: $border-radius-round;
    color: $color-text-dark;
    height: rem(40px);
    margin-bottom: $spacing-lg;
    padding: 0;
    transition: $transition-default;
    width: rem(40px);

    &:hover {
        background-color: $color-text-dark;
        color: $color-secondary-light;
    }

    .close-button__icon {
        height: 24px;
        pointer-events: none;
        width: 24px;
    }
}

.header__hamburger {
    background-color: transparent;
    border: none;
    margin-right: $spacing-md;

    &:hover svg {
        color: $color-primary;
        transform: scale(0.9);
    }

    @include media-breakpoint-up(xl) {
        align-items: center;
        display: flex;
        flex-direction: column;
        font-size: $font-size-xs;
        gap: $spacing-xs;
    }
}

.header__hamburger-close {
    display: none;
}

.header__icon-burger {
    align-items: center;
    display: flex;
    justify-content: center;
    pointer-events: none;

    svg {
        color: $color-secondary-hover;
        height: 20px;
        transition: $transition-default;
        width: 20px;
    }
}

.header__icon-description {
    pointer-events: none;

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

.fixed-header {
    padding-top: 100px;

    .header {
        position: fixed;
        top: 0;
    }

    .header__logo-img {
        width: 100px;
    }
}
