@use "sass:map";
@use "../config" as *;
@use "../layout/breakpoints" as *;

@layer helpers {
  .fixed-top {
    position: fixed;
    inset: 0 0 auto;
    z-index: $zindex-fixed;
  }

  .fixed-bottom {
    position: fixed;
    inset: auto 0 0;
    z-index: $zindex-fixed;
  }

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

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

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