@import 'commons';

:root {
    --m-menu--color: #{ $m-color-grey-light };
    --m-menu--border: none;
    --m-menu--padding: #{ $m-space };
    --m-menu--indicator: rgba(0, 0, 0, 0);
    --m-menu--min-height: 56px;
    --m-menu--box-shadow: 0 1px 2px #{ rgba(0, 0, 0, 0.5) };
    --m-menu--font-weight: #{ $m-font-weight-light };
    --m-menu--background-color: #{ $m-color-grey-darker };
    --m-menu--item-background-color: #{ $m-color-grey-darkest };
    --m-menu--text-transform: uppercase;
    //
    --m-menu--hover-color: #{ $m-color-white };
    --m-menu--hover-indicator-color: rgba(255, 255, 255, 0.8);
    //
    --m-menu--selected-color: #{ $m-color-white };
    --m-menu--selected-indicator: #{ $m-color-active };
    --m-menu--selected-font-weight: #{ $m-font-weight-bold };
    //
    --m-menu--group-color: inherit;
    --m-menu--group-border: none;
    --m-menu--group-indicator: var(--m-menu--item-background-color);
    --m-menu--group-font-weight: #{ $m-font-weight-light };
    --m-menu--group-text-transform: none;
    --m-menu--group-background-color: #{ $m-color-grey-black };
    //
    --m-menu--group-selected-color: #{ $m-color-white };
    --m-menu--group-selected-indicator: #{ $m-color-active };
    --m-menu--group-selected-font-weight: #{ $m-font-weight-bold };
    //
    --m-menu--group-hover-indicator-color: #{ --m-menu--hover-indicator-color };
}

.m-menu {
    overflow: hidden;
    user-select: none;
    color: var(--m-menu--color);

    &:not(.m--is-disabled) {
        cursor: pointer;
    }

    &.m--is-open:not(.m--is-disabled) {
        font-weight: var(--m-menu--selected-font-weight);
    }

    &__trigger {
        transition: color $m-transition-duration ease, font-weight $m-transition-duration ease;
        position: relative;
        z-index: 1;
        outline: none;
        display: flex;
        align-items: center;
        text-decoration: none;
        padding: var(--m-menu--padding);
        min-height: var(--m-menu--min-height);
        text-transform: var(--m-menu--text-transform);
        background-color: var(--m-menu--background-color);
        box-shadow: var(--m-menu--box-shadow);
        
        > :not(:first-child) {
            margin-left: $m-space-sm;
        }

        &:not(.m--is-disabled) {

            &:hover,
            &:focus {
                color: var(--m-menu--hover-color);
            }
        }
    }

    &__body {
        position: relative;
        z-index: 0;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    &.m--is-skin-light {
        --m-menu--color: #{ $m-color-white };
        --m-menu--background-color: #{ $m-color-interactive };
        --m-menu--item-background-color: #{ $m-color-interactive-dark };
        --m-menu--box-shadow: 0 1px 2px #{ rgba(0, 0, 0, 0.1) };
        // group
        --m-menu--group-indicator: var(--m-menu--item-background-color);
        --m-menu--group-background-color: #{ $m-color-interactive-darker };
    }
}