/* ============================================================================
   06-COMPONENTS -> #MENU
   ========================================================================= */

/**
 * Groups a list of options or actions that a user carry out.
 */


//
// SCSS imports
//

@use '../01-settings' as *;
@use '../02-tools' as *;


/**
 * Menu
 */

.menu {
    --menu-bg: var(--bg-secondary);
    --menu-border-color: var(--border-color-secondary);
    --menu-border-radius: var(--rounded-md);
    --menu-border-width: var(--border-width);
    --menu-hover-bg: var(--bg-tertiary);
    --menu-item-color: var(--text-color-secondary);
    --menu-item-icon-color: var(--text-color-tertiary);
    --menu-scroll-height: var(--space-32);
    
    background-color: var(--menu-bg);
    border: var(--menu-border-width) solid var(--menu-border-color);
    border-radius: var(--menu-border-radius);
    display: flex;
    flex-direction: column;
    list-style-type: none;
    margin-left: 0;
    overflow: hidden;
}


/**
 * Menu scroll
 *
 * 1. Set 'margin' to a negative value to offset the initial padding.
 */

.menu__scroll {
    @include scrollbar;
    margin: calc(var(--space-1) * -1); // [1]
    max-height: var(--menu-scroll-height);
    overflow-y: auto;
}


/**
 * Menu group
 */

.menu__group {
    display: flex;
    flex-direction: column;
    padding: var(--space-1);

    & + & {
        border-top: var(--menu-border-width) solid var(--menu-border-color);
    }
}


/**
 * Menu item
 */

.menu__item {
    @include transition('background-color');
    align-items: center;
    appearance: none;
    background-color: transparent;
    border: 0;
    border-radius: var(--menu-border-radius);
    display: flex;
    flex-direction: row;
    font-weight: var(--font-weight-medium);
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    text-align: left;
    white-space: nowrap;
    width: 100%;
    
    &[href],
    &[type] {
        cursor: pointer;
        
        &:hover {
            background-color: var(--menu-hover-bg);
        }
    }
}


/**
 * Menu item icon
 */

.menu__item-icon {
    color: var(--menu-item-icon-color);
    pointer-events: none;
}


 /**
 * Menu item text
 */

.menu__item-text {
    @include font-size('sm');
    color: var(--menu-item-color);
    pointer-events: none;
}

 /**
 * Fix bug: theme toggle not working
 */

.theme-switch {
    pointer-events: all;
}