@include extjs-button-base(
    $base-cls: 'tab',
    $btn-display: block,
    $include-arrows: false,
    // Tabs do not use flexbox because resulting sub-pixel rounding errors can cause off-
    // by-one measurements in the tab bar's box layout. This can result in odd visual effects
    // such as an extra pixel of space in between the tab and tab bar in certain combinations
    // of tab rotation/position.  To be on the safe side we'll just stick to table-based
    // layouts for tabs
    $flexbox: false
);

.#{$prefix}tab {
    z-index: 1;
}

.#{$prefix}tab-active {
    z-index: 3;
}

.#{$prefix}tab-button {
    // tab-button needs position relative because it contains an absolutely positioned
    // pseudo element to hold the focus outline in classic themes
   position: relative;
}

.#{$prefix}tab-close-btn {
    display: block;
    position: absolute;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
}

.#{$prefix}tab-rotate-left {
    @include rotate-element($angle: 270);

    @if $include-rtl {
        &.#{$prefix}rtl {
            @include rotate-element($angle: 90);
        }
    }
}

.#{$prefix}tab-rotate-right {
    @include rotate-element($angle: 90);

    @if $include-rtl {
        &.#{$prefix}rtl {
            @include rotate-element($angle: 270);
        }
    }
}

// the corner elements of tabs can gain extra height when rotated.
// setting width: 1px prevents this
.#{$prefix}tab-tr,
.#{$prefix}tab-br,
.#{$prefix}tab-mr,
.#{$prefix}tab-tl,
.#{$prefix}tab-bl,
.#{$prefix}tab-ml {
    width: 1px;
}