@use '@angular/cdk';
@use './tabs-theme';
@use './tabs-common';

@include tabs-common.paginated-tab-header;

.oui-mdc-tab-label-container {
  @include tabs-common.paginated-tab-header-container;
}

.oui-tab-labels-container {
  @include tabs-common.paginated-tab-header-item-wrapper('.oui-mdc-tab-header');
}

.oui-mdc-tab {
  // For the tab element, default inset/offset values are necessary to ensure that
  // the focus indicator is sufficiently contrastive and renders appropriately.
  &::before {
    margin: 5px;
  }

  @include cdk.high-contrast(active, off) {
    // When a tab is disabled in high contrast mode, set the text color to the disabled
    // color, which is (unintuitively) named "GrayText".
    &[aria-disabled='true'] {
      color: GrayText;
    }
  }
}