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

@import "toolbar.variables.less";

.control-toolbar {
    font-size: 0; // Do not rely on the default spacing between inline-block elements
    padding: 0 0 10px 0;
    position: relative;

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

    // Unsure where used -sg
    // .horizontal-scroll-shadow();
    // &:before { left: -10px; }
    // &:after { right: -8px; }

    .toolbar-divider {
        margin-right: 1px;
        display: inline-block;
        height: 1em;
        padding: 10px 0;
        border-right: 1px solid @toolbar-border;
        border-left: 1px solid @border-color;
        width: 1px;
        vertical-align: middle;
        margin-right: 8px;
    }

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

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

        &.toolbar-primary {
            .horizontal-scroll-shadow();
            &:before { left: -3px; }
            &:after { right: 13px; }
        }

        &.toolbar-setup {
            width: 28px;
            vertical-align: middle;

            a {
                padding: 8px 15px;
                > span {
                    display: block;
                    color: @toolbar-color;
                    // background: @toolbar-bg;
                    width: 24px;
                    height: 24px;
                    text-align: center;
                    border-radius: 3px;

                    &:before {
                        .icon(@icon-text-format-ul);
                        font-size: 14px;
                        line-height: 24px;
                        display: inline-block;
                        vertical-align: middle;
                    }
                }

                &:hover > span {
                    color: @toolbar-hover-color;
                    background: @toolbar-hover-bg;
                }
            }
        }
    }

    .btn, .btn-group, .dropdown, .btn-container {
        white-space: nowrap;
        float: none;
        display: inline-block;
        margin-right: 10px;

        &:last-child {
            margin-right: 0;
        }

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

    .dropdown > .btn {
        margin-right: 0;
    }

    .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: 7px 13px 6px;
    }

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

    &.flex {
        .flex-display();
        .flex-direction-row();

        .toolbar-item {
            display: block;
            .flex-stretch();

            &.fix-width {
                .flex-fix();
            }
        }
    }
}

.relation-toolbar .control-toolbar,
.control-toolbar.toolbar-form {
    .btn {
        .backend-toolbar-button();
        color: @toolbar-color;
        font-size: @font-size-base;
        margin-right: 8px;
        line-height: 30px;
    }
}

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

    // For the focus border of buttons
    padding: .3rem;
    margin: -.3rem;
}

html.mobile {
    [data-control~=toolbar].is-native-drag {
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
}

.clear-input-text {
    padding: 0 5px;
    cursor: pointer;
    border: none;
    border-radius: 100px;
    -webkit-appearance: none;
    font-size: (@font-size-base * 1.5);
    font-weight: @close-font-weight;
    line-height: 1;
    color: @close-color;
    text-shadow: @close-text-shadow;
    font-family: sans-serif;
    display: inline-block;
    position: absolute;
    right: 3px;
    top: 0;
    bottom: 0;
    margin: auto;
    background-color: @input-bg;
    height: 28px;
    width: 26px;
    z-index: 2;

    > i {
        opacity: 1;
        width: 16px;
        height: 16px;
        background-position: -16px -38px;
        display: block;
    }

    &:hover,
    &:focus {
        text-decoration: none;
        cursor: pointer;
    }

    &:focus {
        outline: none;
    }
}

//
// Form Toolbar
// --------------------------------------------------

.control-toolbar.form-toolbar {
    background-color: var(--oc-content-tab-content-bg);
    border-radius: 6px;

    .btn-outline-secondary {
        --bs-btn-color: var(--bs-body-color);
    }

    .btn {
        --bs-btn-padding-x: .5rem;
        --bs-btn-padding-y: .4rem;
        border: none;
        font-size: @font-size-base;
        margin-right: 8px;
        // text-shadow: 1px 1px var(--oc-highlight-color);
        transition: all 0.15s ease-in-out;

        // Icon
        &:before {
            transition: color 0.15s ease-in-out;
        }

        &, &:before {
            color: var(--bs-body-color);
        }

        &:hover, &:focus:hover, &:active, &:focus-visible {
            // text-shadow: none;
            &, &:before {
                color: #fff;
            }
        }
    }
}

//
// Editor Toolbar
// --------------------------------------------------

@toolbar-editor-btn-size: 38px;

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

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

        .btn {
            text-align: center;
            height: @toolbar-editor-btn-size;
            width: @toolbar-editor-btn-size;
            line-height: @toolbar-editor-btn-size;
            zoom: 1;
            color: @color-toolbar-editor-btn;
            background: transparent;
            user-select: none;
            box-shadow: none;
            text-shadow: none;
            border-radius: 0;
            font-size: 14px;

            > i  {
                opacity: 1;
            }

            &:hover {
                outline: none;
                background-color: @color-toolbar-editor-btn-bg-hover;
                color: @color-toolbar-editor-btn-hover;
            }
            &.active,
            &:active {
                outline: none;
                background-color: @color-toolbar-editor-btn-bg-active;
                color: @color-toolbar-editor-btn-hover;
            }
            &.disabled,
            &[disabled] {
                opacity: 1;
                color: #bdbdbd;
                cursor: default;
                background: transparent;
            }
        }

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

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

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

            &:hover {
                color: @color-toolbar-editor-btn-hover !important;
            }
        }
    }
}

/* Toolbar tweaks for the side panel */

#layout-side-panel,
.compact-toolbar {
    div.control-toolbar {
        &, &.toolbar-padded {
            padding: 0;
        }

        &.separator {
            border-bottom: 1px solid @toolbar-border;
        }

        .toolbar-item {
            padding-right: 0;
        }

        .btn {
            border-radius: 0 !important;
            padding-top: 12px;
            padding-bottom: 13px;
            margin-right: 0;
            box-shadow: none;
        }

        input.form-control {
            border: none;
            padding: 11px 13px 12px;
            height: auto;
            border-radius: 0 !important;

            &.icon.search {
                background-position: right -78px;
            }
        }

        div.loading-indicator-container.size-input-text {
            .loading-indicator {
                top: 6px;
            }
        }
    }
}