// https://codepen.io/Nikitoss334/details/KLxaJK
// FIXME clarify license

@use "../node_modules/bulma/sass/utilities/mixins";
@use "./_teckids.scss";

.navbar-toggle {
    display: none;
}

.navbar .navbar-toggle:checked {
    &+.navbar-brand .navbar-burger {
        & span:nth-child(1) {
            -webkit-transform:  rotate(45deg);
            transform: translateY(0px) rotate(45deg);
        }

        & span:nth-child(2) {
            opacity: 0;
        }
        & span:nth-child(3) {
            opacity: 0;
        }

        & span:nth-child(4) {
            -webkit-transform:  rotate(-45deg);
            transform: translateY(-6px) rotate(-45deg);
        }
    }

    &~.navbar-menu {
        @media screen and (max-width: 1024px) {
            display: block;
        }
    }
}

.navbar-item.is-mega {
    position: static;

    .is-mega-menu-title {
        margin-bottom: 0;
        padding: .375rem 1rem;
    }

    .is-mega-menu-subtitle {
        padding: .375rem 1rem;
    }
}

.navbar-dropdown {
    overflow: hidden;
}

#main-navbar {
    background-color: teckids.$orange;
    // adapted from the --bulma-shadow css variable
    box-shadow: 0 .5em 1em -.125em hsla(var(--bulma-shadow-h), var(--bulma-shadow-s), var(--bulma-shadow-l), 0.3),
        0 0 0 1px hsla(var(--bulma-shadow-h), var(--bulma-shadow-s), var(--bulma-shadow-l), 0.05);
}

#main-navbar .navbar-brand > a {
    color: white;
    font-weight: bold;
}

@include mixins.desktop {
    #main-menu > div > .navbar-item > a, #main-menu > div > a.navbar-item {
        color: white;
        font-weight: bold;
    }

    #main-menu > div > .navbar-item > a:hover, #main-menu > div > a.navbar-item:hover {
        color: teckids.$orange;
    }
}

// FIXME: https://github.com/jgthms/bulma/issues/3757
.navbar-burger {
    color: white !important;
}