@use '../../scss/config.scss' as *;

.menu {
    @include background(primary-70);
    @include spacing(p-md);
    @include border(bottom, primary-50);
    @include position(sticky, t0);
    @include layer(header);

    &[data-active="true"] {
        .hamburger {
            box-shadow: 0 0 0 1000px var(--w-color-primary-70);

            .meat:first-child,
            .meat:last-child {
                @include visibility(0);
            }

            .meat:first-child {
                transform: translateY(20px) scale(0);
            }

            .meat:last-child {
                transform: translateY(-20px) scale(0);
            }

            .meat:nth-child(2) {
                transform: rotate(45deg);
            }

            .meat:nth-child(3) {
                transform: rotate(-45deg);
            }
        }

        ul {
            @include transition(opacity);
            @include visibility(1);
            @include layer(header);
            pointer-events: all;
        }
    }

    .wrapper {
        @include layout(flex, v-center, default);
    }

    a {
        @include typography(none);
    }

    img,
    svg {
        display: block;
    }

    ul {
        @include spacing(0);
        @include layout(flex, default, column);
        @include position(fixed, t20px, l20px);
        @include visibility(0);
        @include typography(normal);

        list-style-type: none;
        pointer-events: none;

        li {
            @include spacing(m0);
        }

        a {
            @include typography(primary-20);
    
            &:hover {
                @include typography(primary);
            }

            &.active {
                @include typography(primary);
            }
        }
    }

    .hamburger {
        @include transition(box-shadow);
        @include position(relative);
        @include size(w30px, h20px);
        @include border-radius(max);
        @include spacing(p0);
        @include border(0);
        @include background(transparent);
        @include layer(top);

        box-shadow: 0 0 0 0 var(--w-color-primary-70);
        cursor: pointer;

        .meat {
            @include transition();
            @include size('w100%', h2px);
            @include position(absolute);
            @include background(primary);
            @include border-radius(md);

            display: block;

            &:first-child {
                @include position(t0);
            }

            &:nth-child(2),
            &:nth-child(3) {
                @include position(v-center);
            }

            &:last-child {
                @include position(b0);
            }
        }
    }
}

.container {
    @include layout(flex, v-center, default, h-between, wrap);
    @include spacing(auto-none, px-default);

    max-width: 1200px;
}

@include media('sm') {
    .menu {
        .hamburger {
            @include visibility(none);
        }

        ul {
            @include position(static);
            @include visibility(1);
            @include layout(row);

            pointer-events: all;
            transform: none;
        }
    }
}