@use '../core/style/layout-common';

// Wraps each tab body. We need to add these styles ourselves,
// because MDC only provides styling for the tab header.
.mat-mdc-tab-body {
  @include layout-common.fill();
  display: block;
  overflow: hidden;
  outline: 0;

  // Fix for auto content wrapping in IE11
  flex-basis: 100%;

  &.mat-mdc-tab-body-active {
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 1;
    flex-grow: 1;
  }

  .mat-mdc-tab-group.mat-mdc-tab-group-dynamic-height &.mat-mdc-tab-body-active {
    overflow-y: hidden;
  }
}

.mat-mdc-tab-body-content {
  height: 100%;
  overflow: auto;

  .mat-mdc-tab-group-dynamic-height & {
    overflow: hidden;
  }

  // Usually the `visibility: hidden` added by the animation is enough to prevent focus from
  // entering the collapsed content, but children with their own `visibility` can override it.
  // This is a fallback that completely hides the content when the element becomes hidden.
  // Note that we can't do this in the animation definition, because the style gets recomputed too
  // late, breaking the animation because Angular didn't have time to figure out the target height.
  // This can also be achieved with JS, but it has issues when starting an animation before
  // the previous one has finished.
  &[style*='visibility: hidden'] {
    display: none;
  }
}