@use "../mixins" as *;
@use "../media" as *;

.header {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    transition: padding-block var(--transition-duration-02);
    padding-block: 20px;

    // псевдоэлемент нужен для прозрачного фона, 
    // только для того, чтобы не конфликтовал с блюром burger-menu 
    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: transparent;
        z-index: -1;
        transition: background-color var(--transition-duration-03),
    }

    // блюрим фон для before, а для header уменьшаем высоту
    &.scrolled {

        &::before {
            background-color: var(--color-light-80);
            backdrop-filter: var(--blur-10);
        }

        padding-block: 10px;
    }

    &__inner {
        @include flex-center(space-between);
    }

    &__nav {
        font-size: var(--font-size-alt);

        &-list {
            @include flex-center(space-between, true);
            column-gap: 30px;

            @include tablet {
                column-gap: 20px;
            }
        }

        &-item {
            opacity: 30%;
            font-weight: initial;
            transition: opacity var(--transition-duration-03);

            @include hover {
                opacity: 100%;
            }

            &--active {
                opacity: inherit;
                font-weight: 600;
                cursor: pointer;
            }
        }
    }

    &__options {
        @include flex-center(center);

        column-gap: 1em;

        @include mobile-s {
            column-gap: 0.5em;
        }
    }

    &__login {
        justify-self: flex-end;
        z-index: 1005;

        &-link {
            transition: text-decoration 0.1s ease;

            @include hover {
                color: var(--color-accent);
                text-decoration: underline;
            }
        }

        &-button {
            margin-left: 20px;

            @include tablet {
                margin-left: 10px;
            }
        }
    }

    &__theme {
        padding-inline: 15px;

        &-image {
            @include square(24px);
            background-repeat: no-repeat;

            &--to-dark {
                background-image: url('../img/theme/switch-to-dark.svg');
            }

            &--to-light {
                background-image: url('../img/theme/switch-to-light.svg');
            }
        }

        @include mobile-s {
            padding-inline: 13px;
            height: 50px;
        }
    }

    @include mobile {
        padding-block: 16px;
    }
}