/*************************************************
* ---- Toolbar ----
*/

.w2ui-toolbar {
    margin: 0px;
    padding: 2px;
    outline: 0px;
    position: relative;
    background-color: @toolbar-background-color;
    overflow: hidden !important;
    .user-select;

    .disabled {
        .opacity(0.3)
    }

    table {
        table-layout: auto !important;
        td {
            border: 0px !important;
        }
        &.w2ui-button {
            margin: 0 1px 0 0;
            border-radius: @toolbar-button-border-radius;
            height: 24px;
            min-width: 24px;
            border: @toolbar-button-border;
            background-color: @toolbar-button-background-color;

            .w2ui-tb-image {
                width: 22px;
                height: 16px;
                padding: 0;
                margin: 5px 1px 3px 1px!important;
                border: 0!important;
                text-align: center;
                // for font icon
                & > span {
                    font-size: 15px;
                    display: block;
                    color: @toolbar-button-image-color;
                    &:before {
                        vertical-align: top !important;
                    }
                }
            }

            .w2ui-tb-caption {
                color: @toolbar-button-color;
                padding: 0px 4px 0px 2px;
            }

            .w2ui-tb-count {
                padding: 0px 3px 0px 1px;
                & > span {
                    border: @menu-node-count-border;
                    border-radius: 11px;
                    width: auto;
                    height: 18px;
                    padding: 0px 6px 1px 6px;
                    background-color: @menu-node-count-background-color;
                    color: @menu-node-count-color;
                    box-shadow: @menu-node-count-shadow;
                    text-shadow: @menu-node-count-text-shadow;
                }
            }

            .w2ui-tb-down {
                padding: 1px 3px 1px 1px;
            }

            .w2ui-tb-down > div {
                border: 4px solid transparent;
                border-top: 5px solid #8D99A7;
                margin-top: 5px;
            }

            &.over {
                border: @toolbar-button-over-border;
                background-color: @toolbar-button-over-background-color;
                & .w2ui-tb-caption {
                    color: @toolbar-button-over-color;
                }
            }

            &.down {
                border: @toolbar-button-down-border;
                background-color: @toolbar-button-down-background-color;
                & .w2ui-tb-caption {
                    color: @toolbar-button-down-color;
                }
            }

            &.checked {
                border: @toolbar-button-checked-border;
                background-color: @toolbar-button-checked-background-color;
                & .w2ui-tb-caption {
                    color: @toolbar-button-checked-color;
                }
            }
        }

        &.w2ui-button table {
            height: 17px;
            border-radius: @toolbar-button-border-radius;
            cursor: default;
        }
    }

    .w2ui-break {
        .linear-gradient-dark-center(@toolbar-break-color);
        width: 1px !important;
        height: 22px;
        padding: 0px;
        margin: 0px 6px;
   }
}
