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

.burger-menu {
    @include reset-button;
    @include square(54px);

    border-radius: var(--border-radius-15);
    background-color: var(--color-light-accent);
    user-select: none;

    @include hover {
        background-color: var(--color-light-accent-2)
    }

    &__overlay {
        visibility: hidden;
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 0;
        background-color: var(--color-light-80);
        opacity: 0;
        z-index: -1;
        transition: background-color var(--transition-duration-03), opacity var(--transition-duration-02);
    }

    &__toggle {
        opacity: 0;

        &:checked~.burger-menu__overlay {
            opacity: 70%;
            visibility: visible;
            width: 100%;
            height: 100vh;
        }

        &:checked~.burger-menu__btn>span {
            transform: rotate(45deg);

            &::before {
                top: 0;
                transform: rotate(0);
            }

            &::after {
                top: 0;
                transform: rotate(90deg);
            }
        }

        &:checked~.burger-menu__box {
            visibility: visible;
            right: 0;
        }
    }

    &__btn {
        @include flex-center;
        @include reset-button;
        @include square(54px);

        width: 100%;
        height: 100%;
        cursor: pointer;
        transition: background-color var(--transition-duration-03);

        &>span {

            &,
            &::before,
            &::after {
                display: block;
                position: absolute;
                width: 26px;
                height: 2px;
                border-radius: var(--border-radius-5);
                background-color: var(--color-dark);
                transition: transform var(--transition-duration-02);
            }

            &::before {
                content: '';
                top: -8px;
            }

            &::after {
                content: '';
                top: 8px;
            }
        }
    }

    &__box {
        display: block;
        position: fixed;
        visibility: hidden;
        top: 0;
        right: -100%;
        height: 100vh;
        z-index: -1;
        padding-block: 100px;
        background-color: var(--color-light-80);
        backdrop-filter: var(--blur-10);
        transition:
            right var(--transition-duration-02),
            visibility var(--transition-duration-02),
            background-color var(--transition-duration-03);

        @include tablet {
            width: 45vw;
        }

        @include mobile {
            width: 70vw;
        }

        @include mobile-s {
            width: 100%;
        }
    }

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

        padding: 12px 48px;
        cursor: pointer;
        transition: background-color var(--transition-duration-02);

        @include hover {
            background-color: var(--color-accent);
            color: var(--color-stable-dark);
        }
    }

    &__auth-item {
        @include flex-center(space-between);

        padding: 40px 48px;
    }
}