@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;
  transform: none;
  visibility: hidden;

  .mat-tab-body-animating > &,
  .mat-mdc-tab-body-active > & {
    visibility: visible;
  }

  // Chrome appears to have a bug where the animation glitches in RTL if the element
  // has a height of 0px which can happen with lazy-loaded content or when it's off-screen.
  // See: https://github.com/angular/components/issues/31503. We can work around it by setting
  // a minimum height on it.
  .mat-tab-body-animating > & {
    min-height: 1px;
  }

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

.mat-tab-body-content-can-animate {
  // Note: there's a 1ms delay so that transition events
  // still fire even if the duration is set to zero.
  transition: transform var(--mat-tab-animation-duration) 1ms cubic-bezier(0.35, 0, 0.25, 1);

  .mat-mdc-tab-body-wrapper._mat-animation-noopable & {
    transition: none;
  }
}

.mat-tab-body-content-left {
  transform: translate3d(-100%, 0, 0);
}

.mat-tab-body-content-right {
  transform: translate3d(100%, 0, 0);
}
