@use "sass:map";
@use "./../variables" as *;
@use "./../mixins/breakpoints" as *;

$positions: (static, relative, absolute, fixed, sticky) !default;
$position-ints: (0, 25, 50, 75, 100) !default;

@each $breakpoint in map.keys($breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $breakpoints);

    @each $value in $positions {
      .position-#{$infix}-#{$value} {
        position: #{$value} !important;
        z-index: map.get($zindexes, $value);
      }
    }

    @each $value in $position-ints {
      .top-#{$infix}-#{$value} {
        top: #{$value}#{"%"} !important;
      }

      .right-#{$infix}-#{$value} {
        right: #{$value}#{"%"} !important;
      }

      .bottom-#{$infix}-#{$value} {
        bottom: #{$value}#{"%"} !important;
      }

      .left-#{$infix}-#{$value} {
        left: #{$value}#{"%"} !important;
      }
    }
  }
}

.position--fixed-top {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  z-index: $zindex-fixed;
}

.positon--fixed-bottom {
  position: fixed !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: $zindex-fixed;
}

.position--sticky-top {
  position: sticky !important;
  top: 0 !important;
  z-index: $zindex-sticky;
}