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

/* Lists */
ol li,
ul li {
    padding: 0.2rem 0;
}

.no-bullet-point{
    list-style: none;
}


/* Inline lists */
.inline-list {
    list-style: none;
    padding: 0;
    margin-left: -0.5rem; /* To offset the start of li margin. Little jank */
}

.inline-list li {
    display: inline-block;
    margin: 0 0.5rem;
    position: relative;
    text-align: left;
}
.inline-list>li{ /* 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 */
}

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

/* ?? maybe change */
.inline-list li ul {
    background: $color-bg;
    border: 1px solid $color-bg-secondary;
    border-top: 10px solid transparent;
    border-radius: $border-radius;
    display: none;
    height: auto;
    padding: .5rem 1rem;
    position: absolute;
    top: 2rem; /* THIS IS UNIQUE FOR EACH USE-CASE, WILL NEED ALTERING PER */
    white-space: nowrap;
    width: auto;
    z-index: 1;

    /* Centre */
    /* left: 50%;
    transform: translate(-50%, 0); */
    /* Left */
    left: 0;
    /* Right */
    /* transform: translate(-50%, 0); */
}

.inline-list li ul::before {
    /* fill gap above to make mousing over them easier */
    /* background-color: green; */
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -0.5rem;
    height: 0.5rem;
}

.inline-list li ul li,
.inline-list li ul li a {
    display: block;
}