/* Sizes list */
$sizes: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 14, 15, 16, 20, 24, 32, 48, 64;

/*========================
  Core .al utilities
=========================*/
.al {

  /*=== position top +ve utilities ===*/
  @each $value in $sizes {
    &-top-#{$value} {
      top: #{$value}px !important;
    }
  }

  /*=== position bottom +ve utilities ===*/
  @each $value in $sizes {
    &-bottom-#{$value} {
      bottom: #{$value}px !important;
    }
  }

  /*=== position top -ve utilities ===*/
  @each $value in $sizes {
    &-top-n-#{$value} {
      top: -#{$value}px !important;
    }
  }

  /*=== position bottom -ve utilities ===*/
  @each $value in $sizes {
    &-bottom-n-#{$value} {
      bottom: -#{$value}px !important;
    }
  }

  /*=== object center ===*/
  &-object-center {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;

    &-y {
      top: 50% !important;
      transform: translateY(-50%) !important;
    }

    &-x {
      left: 50% !important;
      transform: translateX(-50%) !important;
    }
  }
}

/*========================
  RTL / LTR directional utilities
=========================*/

html {
  &:not([dir]), &[dir=""], &[dir=ltr]{
    .al {
      @each $value in $sizes {
        &-start-#{$value} { left: #{$value}px !important; }
        &-start-n-#{$value} { left: -#{$value}px !important; }
        &-end-#{$value} { right: #{$value}px !important; }
        &-end-n-#{$value} { right: -#{$value}px !important; }
      }
    }
  }
  
  &[dir=rtl]{
    .al {
      @each $value in $sizes {
        &-start-#{$value} { right: #{$value}px !important; }
        &-start-n-#{$value} { right: -#{$value}px !important; left: inherit !important; }
        &-end-#{$value} { left: #{$value}px !important; }
        &-end-n-#{$value} { left: -#{$value}px !important; right: inherit !important; }
      }
    }
  }
}

/*========================
  Responsive position utilities
=========================*/
@mixin position-utilities($prefix, $min-width) {
  @media (min-width: $min-width) {
    .al#{$prefix} {
      &-fixed { position: fixed !important; }
      &-absolute { position: absolute !important; }
      &-relative { position: relative !important; }
      &-sticky { position: sticky !important; }
      &-static { position: static !important; }
    }
  }
}

/* Generate responsive classes */
@include position-utilities('-position-xxl', 1400px);
@include position-utilities('-position-xl', 1200px);
@include position-utilities('-position-lg', 992px);
@include position-utilities('-position-md', 768px);
@include position-utilities('-position-sm', 575px);