@import "./base/var";
@import "./mixins/index.scss";


@function theme-fun($type, $mode, $return) {
    $background-color: $--menu-theme-light-background-color;
    $font-color: $--menu-theme-light-font-color;
    $background-color-hover: $--menu-theme-light-active-background-color;
    $font-color-hover: $--color-primary;
    $group-font-color: $--menu-theme-light-group-title-font-color;
    $border-color: $--menu-theme-light-horizontal-border-color;
    @if ($type == dark) {
        $background-color: $--menu-theme-dark-background-color;
        $font-color: $--menu-theme-dark-font-color;
        $background-color-hover: $--menu-theme-dark-active-background-color;
        $font-color-hover: $--color-white;
        $group-font-color: $--menu-theme-dark-group-title-font-color;
        $border-color: $--menu-theme-dark-horizontal-border-color;
    } @else if ($type == green) {
        $background-color: $--menu-theme-green-background-color;
        $font-color: $--menu-theme-green-font-color;
        $background-color-hover: $--menu-theme-green-active-background-color;
        $font-color-hover: $--color-white;
        $group-font-color: $--menu-theme-green-group-title-font-color;
        $border-color: $--menu-theme-green-horizontal-border-color;
    }


    @if ($mode == vertical) {
        $border-color: transparent;
    } @else if ($mode == horizontal and $type == light) {
        $background-color-hover: transparent;
    }

    $returnValue: '';
    @if ($return == 'background-color') {
        $returnValue: $background-color;
    }
    @if ($return == 'font-color') {
        $returnValue: $font-color;
    }
    @if ($return == 'background-color-hover') {
        $returnValue: $background-color-hover;
    }
    @if ($return == 'font-color-hover') {
        $returnValue: $font-color-hover;
    }
    @if ($return == 'group-font-color') {
        $returnValue: $group-font-color;
    }
    @if ($return == 'border-color') {
        $returnValue: $border-color;
    }
    @return $returnValue;
}


@mixin menu-item-theme($type, $mode) {

    &, a {
        color: theme-fun($type, $mode, font-color);
    }
    &:not(.is-disabled):hover, &.is-active {
        background-color: theme-fun($type, $mode, background-color-hover);
        border-bottom-color: theme-fun($type, $mode, border-color);

        &, a {
            color: theme-fun($type, $mode, font-color-hover);
        }
    }
}


@mixin menu-group-theme($type, $mode) {

    @include e(title, false) {
        &, a {
            color: theme-fun($type, $mode, group-font-color);
        }
    }
}


@mixin submenu-theme($type, $mode) {

    @include e(title, false) {
        &, a {
            color: theme-fun($type, $mode, font-color);
        }
    }

    &:not(.is-disabled) {
        @include e(title, false) {
            &:hover {
                background-color: theme-fun($type, $mode, background-color-hover);
                border-bottom-color: theme-fun($type, $mode, border-color);

                &, a {
                    color: theme-fun($type, $mode, font-color-hover);
                }
            }
        }
    }

    &.is-active {
        & > {
            @include e(title, false) {
                background-color: theme-fun($type, $mode, background-color-hover);
                border-bottom-color: theme-fun($type, $mode, border-color);
                &, a {
                    color: theme-fun($type, $mode, font-color-hover);
                }
            }
        }
    }

    $drop-inner-classname: 'drop-inner-' + $type;

    @include e($drop-inner-classname) {
        background-color: theme-fun($type, $mode, background-color);
    }
}


@mixin menu-theme($type) {
    background-color: theme-fun($type, '', background-color);
    color: theme-fun($type, '', font-color);
}

@mixin theme($type) {
    @include m(light) {
        @include m(vertical, false, true) {
            @if ($type == 'menu-item') {
                @include menu-item-theme(light, vertical);
            }
            @if ($type == 'menu-group') {
                @include menu-group-theme(light, vertical);
            }
            @if ($type == 'submenu') {
                @include submenu-theme(light, vertical);
            }
        }
        @include m(horizontal, false, true) {
            @if ($type == 'menu-item') {
                @include menu-item-theme(light, horizontal);
            }
            @if ($type == 'menu-group') {
                @include menu-group-theme(light, horizontal);
            }
            @if ($type == 'submenu') {
                @include submenu-theme(light, horizontal);
            }
        }
    }
    @include m(dark) {
        @include m(vertical, false, true) {
            @if ($type == 'menu-item') {
                @include menu-item-theme(dark, vertical);
            }
            @if ($type == 'menu-group') {
                @include menu-group-theme(dark, vertical);
            }
            @if ($type == 'submenu') {
                @include submenu-theme(dark, vertical);
            }
        }
        @include m(horizontal, false, true) {
            @if ($type == 'menu-item') {
                @include menu-item-theme(dark, horizontal);
            }
            @if ($type == 'menu-group') {
                @include menu-group-theme(dark, horizontal);
            }
            @if ($type == 'submenu') {
                @include submenu-theme(dark, horizontal);
            }
        }
    }
    @include m(green) {
        @include m(vertical, false, true) {
            @if ($type == 'menu-item') {
                @include menu-item-theme(green, vertical);
            }
            @if ($type == 'menu-group') {
                @include menu-group-theme(green, vertical);
            }
            @if ($type == 'submenu') {
                @include submenu-theme(green, vertical);
            }
        }
        @include m(horizontal, false, true) {
            @if ($type == 'menu-item') {
                @include menu-item-theme(green, horizontal);
            }
            @if ($type == 'menu-group') {
                @include menu-group-theme(green, horizontal);
            }
            @if ($type == 'submenu') {
                @include submenu-theme(green, horizontal);
            }
        }
    }
}

@include c(menu) {
    display: block;
    box-sizing: border-box;
    font-size: $--font-size-default;
    transition: width $--animation-time ease-in-out;
    @include m(light) {
        @include menu-theme(light);
        @include m(vertical, false, true) {
            border-right: 1px solid #dcdee2;
        }
        @include m(horizontal, false, true) {
            border-bottom: 1px solid #dcdee2;
        }
    }
    @include m(dark) {
        @include menu-theme(dark);
    }
    @include m(green) {
        @include menu-theme(green);
    }


    @include m(collapse) {
        @include ci(submenu--direct) {
            & > {
                @include ci(submenu__title) {
                    text-align: center;
                    & > span {
                        display: none !important;
                    }
                    i {
                        margin-right: 0;
                        font-size: 20px;
                    }
                    @include ci(submenu__title-slide-icon) {
                        display: none !important;
                    }
                }
            }
        }
        @include ci(menu-item--direct) {
            text-align: center;
            span {
                display: none !important;
            }
            i {
                margin-right: 0;
                font-size: 20px;
            }
        }
    }

    @include m(horizontal) {
        @include clear-float;
    }
}

@include c(submenu) {
    position: relative;

    [class*='m-icon'] {
        vertical-align: middle;
        margin-right: 10px;
        font-size: 16px;

        & + span {
            vertical-align: middle;
            display: inline-block;
            @include utils-ellipsis();
        }
    }

    @include e(title) {
        box-sizing: border-box;
        @include utils-ellipsis();
        position: relative;
        cursor: pointer;
        height: 35px;
        line-height: 35px;

        @include e(title-slide-icon, false) {
            font-size: $--font-size-small;
            margin-left: 10px;
            margin-right: 0;
            transition: transform $--animation-time ease-in-out;
        }
    }

    @include theme(submenu);

    @include m(vertical) {
        @include e(title-slide-icon, false) {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }

        @include m(opened, false, true) {
            & > * > {
                @include e(title-slide-icon, false) {
                    transform: translateY(-50%) rotate(180deg);
                }
            }
        }
    }

    @include m(horizontal) {
        float: left;
        width: auto;
        @include e(title, false) {
            border-bottom: 2px solid transparent;
        }

        @include m(opened, false, true) {
            & > * > {
                @include ci(submenu__title-slide-icon) {
                    transform: rotate(180deg);
                }
            }
        }
    }

    @include e(drop-inner) {
        box-shadow: $--box-shadow-default;
        border-radius: $--border-radius-default;
        width: 100%;
        position: relative;
        padding: 5px 0;

        @include ci(menu-item) {
            float: none;
            border: none;
        }

        @include ci(submenu) {
            float: none;
            border: none;
            @include e(title, false) {
                border-bottom: none;
                span {
                    margin-right: 20px;
                }
            }
            @include e(title-slide-icon, false) {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
            }
            &--opened {
                & > * > {
                    @include e(title-slide-icon, false) {
                        transform: translateY(-50%) rotate(180deg);
                    }
                }
            }
        }
    }

    @include when(disabled) {
        @include e(title, false) {
            opacity: $--opacity-disabled;
            cursor: not-allowed;
            background-color: transparent !important;
        }
    }
}


@include c(menu-item) {
    position: relative;
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 35px;
    line-height: 35px;
    cursor: pointer;
    transition: all $--animation-time ease-in-out;
    @include utils-ellipsis();

    a {
        transition: all $--animation-time ease-in-out;
    }

    & [class*='m-icon'] {
        vertical-align: middle;
        margin-right: 10px;
        font-size: 16px;

        & + span {
            vertical-align: middle;
            display: inline-block;
            @include utils-ellipsis();
        }
    }

    @include e(tooltip) {
        width: 100%;
        position: absolute;
        left: 0;
    }

    @include theme(menu-item);

    @include m(horizontal) {
        float: left;
        width: auto;
        border-bottom: 2px solid transparent;

        @include ci(menu-item) {
            float: none;
            border: none;
        }

        @include ci(submenu) {
            float: none;
            border: none;
        }
    }

    @include when(disabled) {
        opacity: $--opacity-disabled;
        cursor: not-allowed;
        background-color: transparent !important;
    }
}

@include c(menu-group) {
    display: block;
    box-sizing: border-box;
    width: 100%;

    @include e(title) {
        height: 35px;
        line-height: 35px;
        font-size: $--font-size-small;
        & > i {
            margin-right: 10px;
        }
    }

    @include theme(menu-group);
}
