@import 'variables';

@selected-color: @primary-color;

.editor-menu-layer-button {
    color:@sidebar-text-color;
    background-color:@sidebar-color;
    transition:all 0.3s;
    &:hover {
        color:#fff;
        background-color:#293141;
    } 
}

.editor-menu-item-settings {
    a {
        color:#3e4960;
        transition:all 0.3s;
        &:hover {
            color:lighten(#3e4960, 10%);
        }
    } 
}

.editor-menu-item {
    background-color: #fff;
    transition:box-shadow 0.3s;
    box-shadow: 0px 0px 3pt 2pt transparent;
    &:hover {
        box-shadow: 0px 0px 3px 3px #e0e0e0;
        cursor: pointer;
        .project-settings {
            top:0%;
            opacity:1;
        }
    }
    
    .editor-menu-item-inner {
       border:1px solid #b7caed; 
    }

    &.expanded {
        
        .editor-menu-item-inner {
            color:#fff;
            background-color: @selected-color;
            transition:background-color 0s;
            border:1px solid @selected-color;
        }
        
        &.content-type-menu .editor-menu-item-pin {
            border-left: 10px solid @selected-color;
        }

        .editor-menu-item-settings {
            a {
                color:#fff;
                transition:all 0.3s;
                &:hover {
                    color:darken(#fff, 10%);
                }
            } 
        }
    }

    &.selected {

        .editor-menu-item-inner {
            color:#fff;
            background-color: @selected-color;
            border:1px solid @selected-color;
        }
        
        &.content-type-menu .editor-menu-item-pin {
            border-left: 10px solid @selected-color;
        }

        .editor-menu-item-settings {
            a {
                color:#fff;
                transition:all 0.3s;
                &:hover {
                    color:darken(#fff, 10%);
                }
            } 
        }
    }
}