// =Menu
.menu {
    // colors
    --menu-link-color: var(--palette-black);
    --menu-link-background-color: transparent;
    --menu-link-hover-color: var(--palette-black-60);
    --menu-link-hover-background-color: transparent;
    --menu-link-active-color: var(--palette-black-40);
    --menu-link-active-background-color: transparent;

    // params
    --menu-font-size: var(--type-scale-15);
    --menu-nested-margin: 5rem;
    --menu-line-height: 1.3;
    --menu-link-padding-x: 0;
    --menu-link-padding-y: 6px;
    --menu-link-font-weight: normal;
    --menu-link-active-font-weight: normal;
    --menu-item-space: 0;
    --menu-item-padding: 0;

    // props
    font-size: var(--menu-font-size);
    line-height: var(--menu-line-height);

    .menu-item {
        padding: var(--menu-item-padding);
        margin-bottom: var(--menu-item-space);
    }
    .menu-item:last-child {
        margin-bottom: 0;
    }
    .menu-item.active .menu-link {
        text-decoration: none;
        font-weight: var(--menu-link-active-font-weight);
        color: var(--menu-link-active-color);
        background-color: var(--menu-link-active-background-color);
    }
    .menu-link {
        display: flex;
        align-items: center;
        flex: 1;
        text-decoration: none;
        font-weight: var(--menu-link-font-weight);
        padding-top: var(--menu-link-padding-y);
        padding-bottom: var(--menu-link-padding-y);
        padding-left: var(--menu-link-padding-x);
        padding-right: var(--menu-link-padding-x);
        color: var(--menu-link-color);
        background-color: var(--menu-link-background-color);
    }
    .menu-link:hover {
        text-decoration: underline;
        color: var(--menu-link-hover-color);
        background-color: var(--menu-link-hover-background-color);
    }
    .menu-link-box {
        display: flex;
        align-items: center;
    }
    .menu {
        margin-left: var(--menu-nested-margin);
    }
    .menu-flat {
        margin-left: 0;
    }
    .menu-list + h4,
    .menu-list + h5,
    .menu-list + h6 {
        margin-top: 5rem;
    }
    & .label {
        margin-top: -2px;
    }
}

// Variants
.menu-medium {
    --menu-font-size: var(--type-scale-14);
}
.menu-small {
    --menu-font-size: var(--type-scale-13);
}

.menu-semibold {
    .menu-link {
        --menu-link-font-weight: var(--font-weight-semibold);
        --menu-link-active-font-weight: var(--font-weight-semibold);
    }
    .caret {
        --caret-thickness: 2px;
    }
}
.menu-strong {
    .menu-link {
        --menu-link-font-weight: bold;
        --menu-link-active-font-weight: bold;
    }
    .caret {
        --caret-thickness: 2px;
    }
}

// Underline
.menu-underline {
    .menu-link {
        text-decoration: underline;
    }
}
.menu-underline-off {
    .menu-link:hover {
        text-decoration: none;
    }
}

// Colors
.menu-primary {
    --menu-link-color: var(--palette-primary-dark);
    --menu-link-hover-color: var(--palette-primary-darker);
    --menu-link-active-color: var(--palette-black-40);
}
.menu-muted {
    --menu-link-color: var(--palette-black-60);
    --menu-link-hover-color: var(--palette-black);
    --menu-link-active-color: var(--palette-black);
}
.menu-light {
    --menu-link-color: var(--palette-white-80);
    --menu-link-hover-color: var(--palette-white);
    --menu-link-active-color: var(--palette-white-50);
}

// Stacked
.menu-stacked {
    // colors
    --menu-item-border-color: var(--palette-black-7);

    // params
    --menu-link-padding-y: 8px;
    --menu-item-border-width: 1px;
    --menu-item-border-style: solid;

    .menu-item {
        border-bottom-width: var(--menu-item-border-width);
        border-bottom-style: var(--menu-item-border-style);
        border-bottom-color: var(--menu-item-border-color);
    }
    .menu-item:last-child {
        border-bottom-color: transparent;
    }
}
.menu-stacked.menu-light {
    --menu-item-border-color: var(--palette-white-20);
}

// Pills
.menu-pills {
    // colors
    --menu-link-color: var(--palette-black);
    --menu-link-hover-background-color: var(--palette-black-10);
    --menu-link-active-color: var(--palette-neutral-lightest);
    --menu-link-active-background-color: var(--palette-black);

    // params
    --menu-link-padding-y: 6px;
    --menu-link-padding-x: 10px;
    --menu-link-border-radius: var(--radius-base);
    --menu-item-space: 1px;

    .menu-link {
        border-radius: var(--menu-link-border-radius);
    }
    .menu-link:hover {
        text-decoration: none;
    }
}


// Numbered
.menu-numbered {
    // colors
    --menu-number-color: var(--palette-black-60);

    // params
    --menu-number-font-size: 80%;
    --menu-number-width: 22px;

    .menu-list {
        counter-reset: numbers;
    }
    .menu-item {
        display: flex;
        align-items: center;
        counter-increment: numbers;
    }
    .menu-item:before {
        width: var(--menu-number-width);
        font-size: var(--menu-number-font-size);
        content: counter(numbers, decimal-leading-zero);
        color: var(--menu-number-color);
    }
}
.menu-numbered.menu-light {
    --menu-number-color: var(--palette-white-60);
}
.menu-numbered-right {
    .menu-item:before {
        display: none;
    }
    .menu-item:after {
        width: var(--menu-number-width);
        font-size: var(--menu-number-font-size);
        content: counter(numbers, decimal-leading-zero);
        text-align: right;
    }
}
// Dark theme
@include dark-theme {
    .menu {
        --menu-link-color: var(--palette-white-90);
        --menu-link-background-color: transparent;
        --menu-link-hover-color: var(--palette-white);
        --menu-link-hover-background-color: transparent;
        --menu-link-active-color: var(--palette-white-50);
        --menu-link-active-background-color: transparent;
    }
    .menu-stacked,
    .menu-stacked.menu-light  {
        --menu-item-border-color: var(--palette-white-15);
    }
    .menu-pills,
    .menu-pills.menu-light {
        --menu-link-color: var(--palette-white-90);
        --menu-link-hover-background-color: var(--palette-white-15);
        --menu-link-active-color: var(--palette-black);
        --menu-link-active-background-color: var(--palette-white-90);
    }
    .menu-numbered,
    .menu-numbered.menu-light {
        --menu-number-color: var(--palette-white-50);
    }
    .menu-primary {
        --menu-link-color: var(--palette-primary-light);
        --menu-link-hover-color: var(--palette-white-90);
        --menu-link-active-color: var(--palette-white-90);
    }
    .menu-muted {
        --menu-link-color: var(--palette-white-60);
        --menu-link-hover-color: var(--palette-white);
        --menu-link-active-color: var(--palette-white);
    }
    .menu-light {
        --menu-link-color: var(--palette-white-80);
        --menu-link-hover-color: var(--palette-white);
        --menu-link-active-color: var(--palette-white-50);
    }
}