@import "../../assets/scss/themes";
@import "../../assets/scss/variables";
@import "../../assets/scss/mixins";
.mainMenu {
    position: absolute;
    text-align: left;
    background-color: white;
    padding: 9px 0px;
    z-index: 9999;
    max-width: 340px;
    overflow: hidden;
    border-radius: 3px;
    top: $base-header-height;
    right: 4px;

    @include set("box-shadow", "0 2px 5px 0 rgba(0,0,0,0.26), 0 2px 10px 0 rgba(0,0,0,0.16)");

    ul {
        margin: 0;
        list-style: none;
        padding: 0;
        color: #4b4b4b;

        li {
            > span {
                color: #444444;
                font-size: 1.1rem;
                height: 40px;
                padding: 6.5px 20px 0 20px;
                display: block;
                box-sizing: border-box;
                white-space: nowrap;
                cursor: pointer;

                &.no-action {
                    cursor: default;
                }
            }

            &:hover {
                background-color: #f4f5f5;
                cursor: pointer;
            }

            &.inactive * {
                background-color: #f5f5f5;
                color: #ccc;
                cursor: default;
            }
        }
    }

    img.flag, .theme-item {
        height: 20px;
        width: 20px;
        border-radius: 100px;
        border: 1px solid #4E443C;
        display: inline-block;
        margin: 0px 4px;
        position: relative;
        cursor: pointer;
        opacity: .5;
        vertical-align: middle;
        &.active {
            cursor: default;
            opacity: 1;
        }

        &:hover {
            opacity: 1;
        }
    }

    .theme-item {
        @include themifySelf($themes) {
            background: themed('baseColorDark');
        }
    }
}

::ng-deep .mainMenu {
    .icon {
        margin-right: 14px;
        min-width: 20px;
        float: left;
    }
}