//
// Dependencies
// --------------------------------------------------

@import "global.less";
@import "icon.less";
@import "button.less";

//
// Toolbars
// --------------------------------------------------

@color-scroll-indicator:                 #bbbbbb;
@color-toolbar-editor-bg:                #dddddd;
@color-toolbar-editor-btn-color:         #404040;
@color-toolbar-editor-btn-bg-hover:      #999999;
@color-toolbar-editor-btn-bg-active:     #404040;
@color-toolbar-editor-btn-color-hover:   #ffffff;

//
// Toolbars
// --------------------------------------------------

.control-toolbar {
    font-size: 0; // Do not rely on the default spacing between inline-block elements
    padding: 0 0 20px 0;
    position: relative;
    .horizontal-scroll-indicators(@color-scroll-indicator);

    display: table;
    table-layout: fixed;
    width: 100%;

    &:before {
        left: -10px;
    }

    &:after {
        right: -8px;
    }

    .toolbar-item {
        position: relative;
        white-space: nowrap;
        display: table-cell;
        vertical-align: top;
        padding-right: 20px;

        &:last-child,
        &.last {
            padding-right: 0;
        }

        .horizontal-scroll-indicators(@color-scroll-indicator);

        &:before { left: -10px; }
        &:after { right: 6px; }

        .btn, .btn-group, .dropdown {
            white-space: nowrap;
            float: none;
            display: inline-block;
            margin-right:  10px;
            &:last-child {
                margin-right: 0;
            }

            &.standalone {
                margin-right: 15px;
            }
        }

        .btn-group {
            > .btn, > .dropdown {
                margin-right: 0;
                display: inline-block;
                float: none;
            }

            .dropdown {
                > .btn {
                    margin-right: 0;
                    .border-right-radius(0);
                }

                &.last > .btn {
                    .border-right-radius(@border-radius-base) !important;
                }
            }
        }
    }

    input.form-control[type=text] {
        height: auto;
        padding: 8px 10px;
    }

    &.toolbar-padded {
        padding: 20px;
    }
}

[data-control=toolbar] {
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
}

//
// Editor toolbar
// --------------------------------------------------

.control-toolbar.editor-toolbar {
    padding: 0;
    background: @color-toolbar-editor-bg;
    .border-bottom-radius(0);

    .toolbar-item {
        .btn, .btn-group, .dropdown {
            margin: 0;
            padding: 0;
        }

        .btn {
            text-align: center;
            height: 40px;
            width: 40px;
            line-height: 40px;
            zoom: 1;
            color: @color-toolbar-editor-btn-color;
            background: transparent;
            .user-select(none);

            &:before {
                font-size: 14px !important;
            }

            &:hover {
                outline: none;
                background-color: @color-toolbar-editor-btn-bg-hover;
                color: @color-toolbar-editor-btn-color-hover;
            }
            &.active,
            &:active {
                outline: none;
                background-color: @color-toolbar-editor-btn-bg-active;
                color: @color-toolbar-editor-btn-color-hover;
            }
            &.disabled,
            &[disabled] {
                opacity: .3;
            }
        }

        .dropdown.open {
            .btn {
                background-color: @color-toolbar-editor-btn-bg-active;
                color: @color-toolbar-editor-btn-color-hover;
            }
        }

        .btn[class^="oc-icon-"],
        .btn[class*=" oc-icon-"] {
            &:before {
                margin: 0;
            }
        }

        .btn.oc-autumn-button {
            color: #c03f31;

            &:hover {
                color: white !important;
            }
        }
    }
}

//
// Toolbar icons
// --------------------------------------------------

@font-face {
    font-family: 'ToolbarFont';
    src: url(data:application/x-font-ttf;charset=utf-8;base64,[encoded data, 8056 characters]) format('truetype'),
         url(data:application/font-woff;charset=utf-8;base64,[encoded data, 6200 characters]) format('woff');
    font-weight: normal;
    font-style: normal;
}

.tb-icon {
    font-family: 'ToolbarFont';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.tb-icon i:before {
    position: relative;
    font-size: 14px;
}

.tb-video:before { content: "\e600"; }
.tb-unorderedlist:before { content: "\e601"; }
.tb-undo:before { content: "\e602"; }
.tb-underline:before { content: "\e603"; }
.tb-textdirection:before { content: "\e604"; }
.tb-fontcolor:before { content: "\e605"; }
.tb-table:before { content: "\e606"; }
.tb-redo:before { content: "\e607"; }
.tb-quote:before { content: "\e608"; }
.tb-outdent:before { content: "\e609"; }
.tb-orderedlist:before { content: "\e60a"; }
.tb-link:before { content: "\e60b"; }
.tb-horizontalrule:before { content: "\e60c"; }
.tb-italic:before { content: "\e60d"; }
.tb-indent:before { content: "\e60e"; }
.tb-image:before { content: "\e60f"; }
.tb-fullscreen:before { content: "\e610"; }
.tb-normalscreen:before { content: "\e611"; }
.tb-formatting:before { content: "\e612"; }
.tb-fontsize:before { content: "\e613"; }
.tb-fontfamily:before { content: "\e614"; }
.tb-deleted:before { content: "\e615"; }
.tb-html:before { content: "\e616"; }
.tb-clips:before { content: "\e617"; }
.tb-bold:before { content: "\e618"; }
.tb-backcolor:before { content: "\e619"; }
.tb-file:before { content: "\e61a"; }
.tb-alignright:before { content: "\e61b"; }
.tb-alignment:before,
.tb-alignleft:before { content: "\e61c"; }
.tb-alignjustify:before { content: "\e61d"; }
.tb-aligncenter:before { content: "\e61e"; }
.tb-gallery:before { content: "\e61f"; }
