@use '../utilities/main_utilities' as *;

$nav-spacer: rems(20px);

/* Nav */
.nav{
    // background-color: $color-background;
    // @include color-scheme(dark) { color: $color-background--dark; }
}
.nav a{
    text-decoration: none;
}
.nav a{
    color: $color-background;

    @include color-scheme(dark) {
        color: $color-background--dark;
    }
}

.nav-list{
    list-style: none;
    padding: 0;
    margin-left: -#{rems(10px)}; /* To offset the start of li margin. Little jank */
}

// .nav-list li,
.nav-list__item{
    display: inline-block;
    margin-left: rems(10px);
    position: relative;
    text-align: left;
}
// .nav-list>li,
.nav-list>.nav-list__item{ /* Only affects first level li */
    padding: 0; /* So that dropdowns, and nav areas aren't messed up by 'random' padding that on standard list items */
    
}
.nav-list>.nav-list__item>a{ /* Only affects first level li */
    padding: rems(10px) 0;
}

/* DROPDOWN(S), CHANGE CLASS to dropdown, ALSO ADD MEGAMENU STYLING */
// .nav-list li:hover ul,
.nav-list__item:hover .nav-list__item__dropdown{
    display: block;
}

.nav-list__item__dropdown{
    display: none;
    position: absolute;
    border-top: rems(10px) solid transparent; // To have it padded further down (if wanted)
    z-index: $z-above;

    /* Centre */
    // left: 50%;
    // transform: translate(-50%, 0);
    /* Left */
    left: 0;
    /* Right */
    // transform: translate(-50%, 0);
}
// .nav-list li ul,
.nav-list__item__dropdown__content{
    background: $color-background;
    border-top: 2px solid $color-primary;
    // border-radius: $border-radius;
    // display: none;
    height: auto;
    padding: .5rem 1rem;

    // position: absolute;
    white-space: nowrap;
    width: auto;
    z-index: 1;

    @include color-scheme(dark) {
        background-color: $color-background--dark;
        border-color: $color-secondary--dark;
    }
}

// .nav-list li ul li, .nav-list li ul li a,
.nav-list__item__dropdown__item, .nav-list__item__dropdown__item a{
    display: block;
    color: $color-text;
}