.#{$iot-prefix}--tear-sheet-wrapper {
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  opacity: 0;
  z-index: -1;
  position: fixed;
  transition: all $duration--slow-01 motion(standard, expressive) $duration--slow-01;

  &--container {
    position: absolute;
    background: none;
    left: 50%;
    top: 5.5rem;
    transform: translate(-50%, 100vh);
    transition: all $duration--slow-01 motion(standard, expressive);
    height: calc(100vh - 5.5rem);
    width: calc(100% - 8rem);
    opacity: 1;
    margin: 0 auto;

    .#{$iot-prefix}--tear-sheet-wrapper__is-visible
      &:not(.#{$iot-prefix}--tear-sheet-wrapper--container__is-hidden) {
      transform: translate(-50%, 0);
    }

    .#{$iot-prefix}--tear-sheet-wrapper__is-visible &__is-hidden {
      filter: brightness(75%);
      transform: translate(-50%, 100vh);
      width: calc(100% - 9.5rem);
      & * {
        transition: all $duration--slow-01 motion(standard, expressive);
      }
    }

    .#{$iot-prefix}--tear-sheet-wrapper__is-visible
      &:first-child.#{$iot-prefix}--tear-sheet-wrapper--container__is-hidden,
    .#{$iot-prefix}--tear-sheet-wrapper__is-visible
      &:first-child.#{$iot-prefix}--tear-sheet-wrapper--container__is-hidden
      + .#{$iot-prefix}--tear-sheet-wrapper--container__is-hidden {
      transform: translate(-50%, -0.75rem);
    }
  }

  &.#{$iot-prefix}--tear-sheet-wrapper__is-visible {
    background-color: $overlay-01;
    z-index: 5999;
    transition: opacity $duration--slow-01 motion(standard, expressive),
      background-color $duration--slow-02 motion(standard, productive);
    opacity: 1;
  }
}