$prefix-menu: #{$prefix}menu;
.#{$prefix-menu}{
    $itemH: 48px !default;
    @mixin nowrap () {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    @mixin disabled () {
        &-sub[disabled], &-option[disabled]{
            position: relative;
            &:after{
                content: '';
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
            }
            @include get-color-placeholder();
            @include get-color-disabled(background-color);
            cursor: $cursor-disabled;
        }
    }

    @mixin border-bottom () {
        box-shadow: 0 -2px 0 0 $color-primary inset;
    }
    @mixin border-right () {
        box-shadow: -2px 0 0 0 $color-primary inset;
    }

    @mixin horizontal-title () {
        color: $color-primary;
        @include border-bottom();
    }

    @mixin vertical-active () {
        color: $color-primary;
        background-color: rgba($color-primary, 0.2);
        @include border-right();
    }

    border-right: 1px solid;
    @include get-color-border();
    @include get-color-title();
    @include get-color-bg();
    @include disabled ();
    &-high{
        border-right: 0;
        @include get-color-bg(color);
        @include get-color-title(background-color);
        &-arrow{
            @include get-color-title(background-color);
        }
        .#{$prefix-menu}-sub[disabled], .#{$prefix-menu}-option[disabled]{
            @include get-color-placeholder(background-color);
            @include get-color-disabled(color);
        }
    }
    &-sub{
        .#{$prefix}tooltip[zov-internal-reference-menu-sub]{
            display: block;
            .#{$prefix}popper{
                margin-top: 2px;
            }
            .#{$prefix}tooltip-body{
                min-width: 220px;
                max-width: 350px;
                padding: $gap-base / 2 0;
            }
        }
        &-title{
            height: $itemH;
            line-height: $itemH;
            cursor: pointer;
            user-select: none;
            transition: color $transition-time;
            @include nowrap();
            &-arrow{
                float: right;
                height: 100%;
                margin-left: $gap-base;
                transform-origin: center;
                transition: transform $transition-time;
                &:after{
                    content: '';
                    display: inline-block;
                    width: 0;
                    height: 100%;
                    vertical-align: middle;
                }
            }
        }
        &-body{
            transition: height $transition-time;
        }
    }
    &-group{
        &-title{
            @include get-color-placeholder();
            height: $itemH - 15px;
            line-height: $itemH - 15px;
            @include nowrap();
        }
    }
    &-option{
        height: $itemH;
        line-height: $itemH;
        cursor: pointer;
        user-select: none;
        transition: background-color $transition-hover-time,
                    color $transition-hover-time;
        @include nowrap();
        &.#{$prefix}tooltip[zov-internal-reference-menu-option]{
            display: block;
            line-height: 1.6;
            .#{$prefix}tooltip-body{
                width: auto;
            }
        }
    }
    &-horizontal{
        border-right: none;
        border-bottom: 1px solid;
        @include get-color-border();
        height: $itemH;
        &>*{
            float: left;
        }
        &>.#{$prefix-menu}-sub{
            padding: 0;
        }
        &>.#{$prefix-menu}-group{
            .#{$prefix-menu}-group-title{
                height: $itemH;
                line-height: $itemH;
            }
            &>*{
                float: left;
                &>*{
                    float: left;
                }
            }
        }
    }
    &-horizontal{
        .#{$prefix-menu}-option{
            &:not([disabled]):hover, &-active{
                @include horizontal-title()
            }
        }
        .#{$prefix-menu}-sub{
            &-title{
                &:not([disabled]):hover, &-active{
                    @include horizontal-title()
                }
            }
            @mixin horizontal-option-reset () {
                $horizontal-itemH: $itemH - 8px;
                height: $horizontal-itemH;
                line-height: $horizontal-itemH;
                box-shadow: none;
            }
            .#{$prefix-menu}-sub{
                .#{$prefix-menu}-sub-title{
                    @include horizontal-option-reset();
                    &:not([disabled]):hover, &-active{
                        color: $color-primary;
                    }
                }
            }
            .#{$prefix-menu}-option{
                @include horizontal-option-reset();
                &:not([disabled]):hover{
                    color: $color-primary;
                    box-shadow: none;
                }
                &-active{
                    @include vertical-active();
                    &:not([disabled]):hover{
                        @include border-right();
                    }
                }
            }
        }
    }
    &-vertical{
        transition: min-width $transition-time,
                    width $transition-time,
                    max-width $transition-time;
        .#{$prefix-menu}-sub-title{
            &:not([disabled]):hover, &-active{
                color: $color-primary;
            }
        }
        .#{$prefix-menu}-option{
            &:not([disabled]):hover{
                color: $color-primary;
            }
            &-active{
                @include vertical-active()
            }
        }
    }
    &-thumbnail{
        &>.#{$prefix-menu}-option,
        &>.#{$prefix-menu}-group>.#{$prefix-menu}-group-body>.#{$prefix-menu}-option,
        &>.#{$prefix-menu}-sub>.#{$prefix}tooltip[zov-internal-reference-menu-sub]>.#{$prefix-menu}-sub-title{
            text-align: center;
            font-size: 0;
            &:before{
                content: '';
                display: inline-block;
                width: 0;
                height: 100%;
                vertical-align: middle;
            }
            [thumbnail-icon] {
                display: inline-block;
                font-size: $font-size-large;
                vertical-align: middle;
            }
            &>.#{$prefix-menu}-sub-title-arrow{
                font-size: 15px;
                display: none;
            }
            .#{$prefix}tooltip-body{
                font-size: $font-size-base;
                [thumbnail-icon] {
                    font-size: 0;
                }
            }
        }
    }
}