// main: ../options.scss

// Menu
.mts-opts-group-menu {
    &,
    li {
        position: relative;
        margin: 0;
    }

    .rtl & li a i {
        float: right;
        @include margin( null 0 null 10px );
    }

    a {
        position: relative;
        display: block;
        background: #FAFBFD;
        border-width: 0px 0px 1px 0px;
        border-style: solid;
        border-bottom-color: #EAEAED;
        border-top-color: #fff;
        color: #7C7E82;
        font-weight: normal;
        text-decoration: none;
        box-shadow: none;
        @include padding( 12px 10px 12px 14px );

        i {
            font-size: 17px;
            float: left;
            width: 18px;
            margin-right: 10px;
            color: inherit;
        }

        &:hover {
            background: #fff;
        }
    }

    li.has-child:not(.active):hover {
        > a:after {
            margin-top: -8px;
            content: ' ';
            border: 8px solid rgba(#000, 0);
            border-right-color: #fff;
            @include size( 0 );
            @include position( absolute, 50% 0 null null );
        }
        a {
            background: #23282d;
            color: #fff;
            border-color: #3e454c;
        }
        a:hover { background: #373d44; }
    }

    li:first-of-type a { border-top: 0; }

    li.active, li:hover {
        > a {
            color: #fff;
            font-weight: 600;
            background: #32373c;
            i {
                color: inherit;
            }
            + .submenu {
                background: #fff;
            }
        }

        > a:before {
            content: "";
            width: 5px;
            height: 100%;
            position: absolute;
            top: 0;
            right: -5px;
            background: #fff;
        }

        > a:after { border-right-color: #fff; }

        &.has-child > a:before, &.has-child a:after { display: none; }

        .submenu {
            display: block;
            max-height: 600px;
            -webkit-transition: max-height .5s ease-in;
            transition: max-height .5s ease-in;
            will-change: max-height;
            border-bottom: 2px solid #eaeaed;
            a {
                color: #7C7E82;
                border-bottom-color: #EAEAED;
            }
            li.active a:hover {
                color: inherit;
                font-weight: 600;
            }
            li:hover a {
                color: #fff;
                font-weight: normal;
            }
        }

    }

    // Sub menu
    .submenu {
        display: none;
        max-height: 0;
        background: #32373c;
        a {
            margin-bottom: 0;
            padding-top: 7px;
            padding-bottom: 7px;
            color: #eee;
            background: rgba(0, 0, 0, 0);
            border-color: #32373c;
            i {
                display: none;
            }
        }

        li.active a {
            background: #fff;
            font-weight: 600;
            color: #505050;
        }

    }

    // Show submenu if not active
    li.has-child:not(.active):hover {
        > a {
            color: #fff;
            background: #23282d;
            border-color: #23282d;
            &:after {
                border-right-color: #32373c;
            }
        }

        .submenu {
            display: block;
            position: absolute;
            top: 0;
            left: 100%;
            min-width: 160px;
            max-width: 260px;
            max-height: inherit;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
        }
    }
}

%mts-opts-menu-label {
    font-size: 9px;
    font-weight: bold;
    line-height: 1;
    float: right;
    margin-left: 4px;
    padding: 4px 7px;
    color: #fcf8e3;
    border-radius: 20px;
    background-color: #c09853;
}

.mts-opts-menu-warning {
    @extend %mts-opts-menu-label;
}

.mts-opts-menu-error {
    color: #f2dede;
    background-color: #b94a48;
    @extend %mts-opts-menu-label;
}

.mts-opts-info-field {
	@include margin( -30px auto -30px 30px );
}
