.tab-pane {
    &:top {
        -fx-tab-min-height: 3.0em;
        -fx-tab-max-height: 100.0em;
        -fx-border-width: 0;
        -fx-border-color: -df-background-lighter;
        -fx-padding: 0.0em;
        -fx-background-insets: 0;
        -fx-open-tab-animation: none;
        -fx-close-tab-animation: grow; // This is critical as it avoids an issue with tab-header cleanup
    }

    .tab {
        -fx-background-radius: 0;
        -fx-background-insets: 0;
        -fx-background-color: -df-background;
        -fx-border-width: 0 0 2 0;
        -fx-border-insets: 0 8 0 0;
        -fx-border-color: -df-background;
        -fx-padding: 0 0 0 2;

        &:hover {
            -fx-background-insets: 0;
            .tab-label {
                -fx-text-fill: -df-text-selected;
            }
        }
        &:selected {
            -fx-border-insets: 0 8 0 0;
            -fx-border-color: -df-defold-orange;
            -fx-color: -df-text-selected;

            .tab-label {
                -fx-text-fill: -df-text-selected;
            }
            .focus-indicator {
                -fx-border-width: 0;
            }
        }

        .tab-label {
            -fx-padding: 0 2 0 0;
            -fx-text-fill: -df-text;
        }

        // Generate css for file extensions
        @include extensions(tab);
    }

    &.inactive .tab {
        &:selected {
            -fx-border-color: -df-component-lighter;
        }
    }
}

.tab-header-area {
    -fx-padding: 0;
    -fx-border-width: 0 0 0 0;
    >.headers-region {
        -fx-padding: 0;
    }
}

.tab-header-background {
    -fx-background-color: -df-background;
    -fx-background-insets: 0;
    -fx-border-width: 0 0 0 0;
    -fx-padding: 0;
}

.tab-label {
    -fx-padding: 0 0 0 0;
}

.tab-close-button {
    -fx-shape: "M 0,0 H1 L 4,3 7,0 H8 V1 L 5,4 8,7 V8 H7 L 4,5 1,8 H0 V7 L 3,4 0,1 Z";
    -fx-background-color: -df-text-dark;
    -fx-effect: none;
    &:hover {
        -fx-background-color: -df-text-selected;
    }
}

.control-buttons-tab {
    .container {
        -fx-padding: 0;
    }
}

.tab-down-button {
    -fx-background-radius: 0px;
    -fx-border-radius: 0px;
    -fx-background-insets: 0;
    -fx-background-color: -df-background;
    -fx-border-color: -df-background-lighter;
    -fx-border-width: 0 0 0 0;
    -fx-padding: 5px 10px;
    &:hover {
        -fx-text-fill: -df-text-selected;
        .arrow {
            -fx-background-color: -df-text-selected;
        }
    }

    .context-menu {
        .menu-item {
            -fx-padding: 5 5 5 -10px;
            .label {
                -fx-padding: 0 0 0 5px;
            }
            .left-container {
                visibility: collapse;
            }
            .graphic-container {
                -fx-alignment: center;
                -fx-pref-width: 17px;
                -fx-pref-height: 17px;
            }
            & > .graphic-container > .image-view {
                -fx-scale-x: 0.5;
                -fx-scale-y: 0.5;
            }
        }
    }
}

.tab-content-area {
    -fx-border-width: 0;
    -fx-border-color: -df-background-lighter;
    -fx-padding: 0;
}
