@use '../core/style/private';
@use '../core/style/variables';
@use './tabs-common';

@include tabs-common.structural-styles;

.mat-mdc-tab {
  @include tabs-common.tab;

  // Note that we only want to target direct descendant tabs.
  .mat-mdc-tab-group.mat-mdc-tab-group-stretch-tabs > .mat-mdc-tab-header & {
    flex-grow: 1;
  }
}

.mat-mdc-tab-group {
  display: flex;
  flex-direction: column;

  // Fixes pagination issues inside flex containers (see #23157).
  max-width: 100%;

  @include tabs-common.paginated-tab-header-with-background('.mat-mdc-tab-header', '.mat-mdc-tab');

  &.mat-mdc-tab-group-inverted-header {
    flex-direction: column-reverse;

    .mdc-tab-indicator__content--underline {
      align-self: flex-start;
    }
  }
}

// The bottom section of the view; contains the tab bodies
.mat-mdc-tab-body-wrapper {
  position: relative;
  overflow: hidden;
  display: flex;
  transition: height tabs-common.$mat-tab-animation-duration variables.$ease-in-out-curve-function;

  @include private.private-animation-noop();
}