@use "../01-base/breakpoints" as *;
@use "../01-base/colors" as *;

#main-nav{
    overflow: hidden;
    nav{
        #navbar-btn{
            cursor: pointer;
            height: 27px;
            width: 27px;
            border: 0px;
            overflow: visible;
            position: relative;
            z-index:9999;
            background-color: transparent;
              span,
              span:before,
              span:after {
                background: $accent-color;
                display: block;
                height: 4px;
                opacity: 1;
                position: absolute;
                transition: 0.3s ease-in-out;
              }
              span:before,
              span:after {
                content: "";
              }
              span {
                right: 0px;
                top: 13px;
                width: 27px;
              }
              span:before {
                left: 0px;
                top: -10px;
                width: 16px;
              }
              span:after {
                left: 0px;
                top: 10px;
                width: 20px;
              }
              @include responsive(desktop){
                display: none;
              }
        }
    
        .main-menu{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: absolute;
            width: 100%;
            height: 100%;
            left: -100%;
            top: 0;
            transition: all .5s ease-in-out;
            list-style: none;
            z-index: 999;
            gap: 20px;
            margin-bottom: 0!important;
            @include responsive(desktop){
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: flex-end;
                position: relative;
                left: inherit;
                top: inherit;
                gap: 33px;
            }
            .menu-item{
                font-size: 1.6rem;
                margin-left: 0!important;
            }
            &.active{
                top: 0;
                left: 0;
                z-index: 999;
                background-color: $dark-color;
                color: $white-color;
                text-align: center;
                transition: all .5s ease-in-out;
                .menu-item{
                  a{
                    color: $white-color!important;
                  }
                }
            }
        }
    }

}