@import '../prefix';

.#{$prefix}--sticky-container {
  position: sticky;
  z-index: 5;
  top: 0;
  transition-property: top;
  transition-duration: $transition--expansion;
  transition-timing-function: $carbon--standard-easing;
}

.#{$prefix}--sticky-container-visible {
  top: 3rem;

  &.#{$prefix}--sticky-container-banner {
    top: 5.5rem;
  }
}

.#{$prefix}--sticky-container-hidden {
  &.#{$prefix}--sticky-container-banner {
    top: 2.5rem;
  }
}

.#{$prefix}--sticky-container-secondary {
  z-index: 4;
}

.#{$prefix}--sticky-container-secondary-hidden {
  top: 3rem;

  &.#{$prefix}--sticky-container-banner {
    top: 5.5rem;
  }
}

.#{$prefix}--sticky-container-secondary-visible {
  top: 6rem;

  &.#{$prefix}--sticky-container-banner {
    top: 8.5rem;
  }
}