@import "../../../../assets/less/core/boot.less";

.component-backend-tabs {
    .full-width-border() {
        position: absolute;
        content: '';
        height: 1px;
        left: 0;
        width: 100%;
        bottom: 0;
    }

    &.full-screen {
        background: @body-bg;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 10; // Experimental value - numbers lower than 2 expose treeview control in Editor
    }

    > .tablist-container {
        // Important: this element must be an offset parent for
        // .tabs-scrollable and .tablist
        //
        position: relative;

        .tabs-scrollable {
            width: 100%;
            overflow: hidden;
        }

        .tablist {
            button {
                -webkit-appearance: none;
                padding: 0 13px;
                background: transparent;
                color: @editor-tab-color;
                border: none;
                position: relative;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                user-select: none;
                white-space: nowrap;
                text-align: left;

                &.has-icon {
                    padding-left: 36px;
                }

                &.has-close-button {
                    padding-right: 32px;
                    min-width: 120px;
                }

                &:focus {
                    outline: none;
                    color: @brand-primary;

                    span.tab-icon:not(.tab-error) {
                        box-shadow: @outline-focus-shadow;
                    }
                }

                span.tab-icon {
                    display: inline-block;
                    width: 16px;
                    height: 16px;
                    line-height: 16px;
                    border-radius: 4px;
                    position: absolute;
                    left: 13px;
                    top: 16px;
                    overflow: hidden;

                    .tab-icon-background {
                        width: 16px;
                        height: 16px;
                        display: block;
                        position: absolute;
                        top: 0;
                        left: 0;
                        transition: top .5s;
                    }

                    i {
                        color: white;
                        position: absolute;
                        left: 3px;
                        top: 3px;
                        font-size: 10px;
                    }

                    i.tab-error {
                        top: 16px;
                        left: 0;
                        width: 16px;
                        height: 16px;
                        background-position: -31px -35px;
                        transition: top .5s;
                    }

                    &.tab-error {
                        .tab-icon-background {
                            top: -16px;
                        }

                        i.tab-error {
                            top: 0;
                        }
                    }
                }

                span.close-tab {
                    display: inline-block;
                    position: absolute;
                    width: 19px;
                    height: 19px;
                    right: 10px;
                    top: 15px;
                    color: transparent;
                    vertical-align: middle;
                    border-radius: 20px;

                    &:focus {
                        outline: none;
                        background-color: @toolbar-focus-bg;
                    }

                    &:before {
                        position: absolute;
                        display: block;
                        width: 7px;
                        height: 7px;
                        left: 6px;
                        top: 6px;
                        background-position: -156px 0;
                    }

                    &,
                    &.has-changes {
                        &:focus,
                        &:hover {
                            &:before {
                                background-position: -165px 0;
                            }
                        }
                    }

                    &.has-changes {
                        &:before {
                            background-position: -167px -10px;
                        }
                    }
                }
            }
        }
    }

    > .tabpanel {
        &:focus {
            outline: none;
        }
    }

    @import "_style-form.less";
    @import "_style-document.less";
    @import "_style-inspector.less";
}