_menu.scss

// 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;
}

#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;
    }
}

@media screen {
  #navbar-logo > img {
    filter: saturate(0) brightness(0) invert(1);
  }
  #navbar-logo > img:hover {
    filter: none;
  }
}

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