$menu-item-color: $text !default
$menu-item-radius: $radius-small !default
$menu-item-hover-color: $link !default
$menu-item-hover-background-color: $background !default
$menu-item-active-color: $link !default
$menu-item-active-background-color: $link !default

$menu-list-border-left: 1px solid $border !default
$menu-list-line-height: 1.25 !default
$menu-list-link-padding: 0.25em 0 !default
$menu-nested-list-margin: 0.5em 0 0.75em 0.25em !default
$menu-nested-list-padding-left: 0.75em !default

$menu-label-color: $text-light !default
$menu-label-font-size: 0.9em !default
$menu-label-letter-spacing: 0.1em !default
$menu-label-spacing: 1em !default

.menu-label
    color: $menu-label-color
    font-size: $menu-label-font-size
    letter-spacing: $menu-label-letter-spacing
    text-transform: uppercase
    margin-bottom: 0.5em

.menu
    font-size: $size-normal
    // Sizes
    &.is-small
        font-size: $size-small
    &.is-medium
        font-size: $size-medium
    &.is-large
        font-size: $size-large

    .menu-list
        margin-left: 0.75rem
        line-height: $menu-list-line-height
        .menu-label
            margin-top: $menu-label-spacing
        a
            border-radius: $menu-item-radius
            color: $menu-item-color
            display: block
            padding: $menu-list-link-padding
            &:hover
                color: $menu-item-hover-color
            // Modifiers
            &.is-active
                color: $menu-item-active-color
        li
            display: flex
            flex-direction: row
            align-items: center
            .icon
                margin-right: 0.25rem
            &.is-active
                color: $menu-item-active-color
            ul
                border-left: $menu-list-border-left
                margin: $menu-nested-list-margin
                padding-left: $menu-nested-list-padding-left


    @each $name, $pair in mergeColorMaps($colors, $shades)
        $color: nth($pair, 1)
        $color-invert: findColorInvert($color)
        &.is-#{$name}
            background-color: $color
            color: $color-invert
            .menu-list
                a
                    color: inherit
                    &:hover
                        color: $menu-item-hover-color
                    &.is-active
                        color: $menu-item-active-color
            .menu-label
                color: inherit
