header {
    &.glass-effect {
        background: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
    }

    .logo {
        svg {
            transition: transform .25s ease-in-out;
            -webkit-transition: transform .25s ease-in-out;
            -moz-transition: transform .25s ease-in-out;
            -ms-transition: transform .25s ease-in-out;
            -o-transition: transform .25s ease-in-out;
            transform: scale(1.0);
            -webkit-transform: scale(1.0);
            -moz-transform: scale(1.0);
            -ms-transform: scale(1.0);
            -o-transform: scale(1.0);
        }
    
        &:is(:hover, :active) {
            svg {
                transform: rotate(-1deg) scale(1.1);
                -webkit-transform: rotate(-1deg) scale(1.1);
                -moz-transform: rotate(-1deg) scale(1.1);
                -ms-transform: rotate(-1deg) scale(1.1);
                -o-transform: rotate(-1deg) scale(1.1);
            }
        }
    }

    /* .menu-item {
        background: rgba(255, 255, 255, 0);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);

        &:is(:hover, :active) {
            background: rgba(255, 255, 255, 0.8);
        }
    } */

    .mobile-menu-button {
        &::before, &::after {
            position: absolute;
            content: "";
            left: 2px;
            width: calc(100% - 4px);
            height: 1px;
            background-color: var(--color-foreground);
            border-radius: 9999px;
            -webkit-border-radius: 9999px;
            -moz-border-radius: 9999px;
            -ms-border-radius: 9999px;
            -o-border-radius: 9999px;
            transition: .2s ease;
            -webkit-transition: .2s ease;
            -moz-transition: .2s ease;
            -ms-transition: .2s ease;
            -o-transition: .2s ease;
}
        &::before {
            top: 8px;
        }
        &::after {
            bottom: 8px;
        }

        &[data-open=true] {
            &::before, &::after {
                top: 12px;
            }
            &::before {
                transform: rotate(45deg);
                -webkit-transform: rotate(45deg);
                -moz-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                -o-transform: rotate(45deg);
            }
            &::after {
                transform: rotate(-45deg);
                -webkit-transform: rotate(-45deg);
                -moz-transform: rotate(-45deg);
                -ms-transform: rotate(-45deg);
                -o-transform: rotate(-45deg);
            }
        }
    }

    .mobile-menu {
        top: calc(var(--header-height));
        right: -100%;
        height: calc(100dvh - var(--header-height));

        &[data-open=true] {
            right: 0;
        }
    }
}

.dark {
    header {
        &.glass-effect {
            background: rgba(29, 29, 31, 0.8);
        }
    }
}