// Shorthand

.fixed-top {
  position: fixed;
  top: 0;
  inset-inline-end: 0;
  inset-inline-start: 0;
  z-index: $zindex-fixed;
}

.fixed-bottom {
  position: fixed;
  inset-inline-end: 0;
  bottom: 0;
  inset-inline-start: 0;
  z-index: $zindex-fixed;
}

// Responsive sticky top and bottom
@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .sticky#{$infix}-top {
      position: sticky;
      top: 0;
      z-index: $zindex-sticky;
    }

    .sticky#{$infix}-bottom {
      position: sticky;
      bottom: 0;
      z-index: $zindex-sticky;
    }
  }
}
