@import "../config.less";

.main-menu-bar {
    .box-shadow(0px 2px 2px 0px rgba(0,0,0,0.4));
    background: @main-menu--background-color;
    
    // ==================================
    &__logo {
        .cursor_std();
        position: relative;
        background: @main-menu--background-color;
        width: auto;
        float: left;
        overflow: hidden;
        height: @main-menu--height;
        text-align: left;
        color: #FFF;
        padding-right: 5px;
        font-size: @main-menu--height;
        font-weight: 300;
        line-height: @main-menu--height + @main-menu--logo-v-offset;
    }
    
    // ==================================
    &__items {
    }
    
    &__items_block_help {
        position: relative;
        float: left;
    }
    
    &__items_block_undoredo {
        position: absolute;
        left: 30%;
        padding-left: 30px; /* compensation for logo + help menu item */
    }
    
    &__items_block_misc {
        position: absolute;
        right: 0;
    }

    // ==================================
    &__item {
        float: left;
        display: block;
        height: @main-menu--height;
    }

    // ==================================
    &__item a {
        display: block;
        color: #444;
        .cursor_std();
        text-decoration: none;
        line-height: @main-menu--height;
        height: @main-menu--height;
        padding: 0 10px;
    }
    &__item a:active,
    &__item_flashing {
        background: #333;
    }

    &__item a:focus {
        outline: none;
    }

    &__item_state_enabled a {
        color: #ccc;
        .cursor_action();
    }
    
    &__item_state_enabled a:hover {
        color: #fff;
        //background: #333;
    }
    
    &__item_state_enabled a:active,
    &__item_state_enabled&__item_flashing a {
        color: #fff;
        background: #333;
    }
    
    &__item_location_last a {
        padding-right: 15px;
    }
    

    // mode
    @action_change-mode--width: 135px;
    &__item_action_change-mode {
        width: @action_change-mode--width;
        //background: @config-grid--color;
    }
    
    &__item_action_change-mode a {
        .cursor_action();
        width: @action_change-mode--width;
        color: #333;
        display: none;
        text-align: center;
        padding-left: 0px;
        padding-right: 0px;
    }
    &__item_action_change-mode a:hover {
        color: #000;
    }
    &__item_mode_2recordings {
    }
    &__item_mode_2recordings &__item-a_mode_2recordings {
        display: block;
        background: @main-menu-bar--item-color_2recordings;
    }
    &__item_mode_2recordings &__item-a_mode_2recordings:active {
        background: @main-menu-bar--item-color_2recordings_active;
    }

    &__item_mode_2collections {
    }
    &__item_mode_2collections &__item-a_mode_2collections {
        display: block;
        background: @main-menu-bar--item-color_2collections;
    }
    &__item_mode_2collections &__item-a_mode_2collections:active {
        background: @main-menu-bar--item-color_2collections_active;
    }

    &__item_action_change-mode&__item_flashing {
        opacity: 0.8;
    }
    &__item_action_change-mode&__item_flashing a {
        color: rgba(255,255,255, 0.4);
    }

}