/* ============================================================================
   @UTILITIES -> POSITION
   ========================================================================= */


/**
 * Various utilities for positioning elements.
 *
 * All the utilities (available as silent placeholder selectors also):
 *
   .u-position-relative
   .u-position-absolute
   .u-position-fixed
   .u-position-static
   .u-position-left
   .u-position-right
   .u-position-top
   .u-position-bottom
   .u-position-top-left
   .u-position-top-right
   .u-position-bottom-left
   .u-position-bottom-right
   .u-position-pin-all
   .u-position-pin-ends
   .u-position-pin-sides
   .u-position-pin-sides-top
   .u-position-pin-sides-bottom
   .u-position-v-middle
   .u-position-h-middle
   .u-position-middle
 */


/**
 * Settings.
 */

/**
 * Apply at these breakpoints (turned off by default).
 */

$u-position-apply-at-breakpoints:                        $default-breakpoints !default;

// From the above breakpoints choose which utilities you wish to apply it too
$u-position-apply-at-breakpoints-for-relative:           false !default;

$u-position-apply-at-breakpoints-for-absolute:           false !default;

$u-position-apply-at-breakpoints-for-fixed:              false !default;

$u-position-apply-at-breakpoints-for-static:             false !default;

$u-position-apply-at-breakpoints-for-left:               false !default;

$u-position-apply-at-breakpoints-for-right:              false !default;

$u-position-apply-at-breakpoints-for-top:                false !default;

$u-position-apply-at-breakpoints-for-bottom:             false !default;

$u-position-apply-at-breakpoints-for-top-left:           false !default;

$u-position-apply-at-breakpoints-for-top-right:          false !default;

$u-position-apply-at-breakpoints-for-bottom-left:        false !default;

$u-position-apply-at-breakpoints-for-bottom-right:       false !default;

$u-position-apply-at-breakpoints-for-pin-all:            false !default;

$u-position-apply-at-breakpoints-for-pin-ends:           false !default;

$u-position-apply-at-breakpoints-for-pin-sides:          false !default;

$u-position-apply-at-breakpoints-for-pin-sides-top:      false !default;

$u-position-apply-at-breakpoints-for-pin-sides-bottom:   false !default;

$u-position-apply-at-breakpoints-for-v-middle:           false !default;

$u-position-apply-at-breakpoints-for-h-middle:           false !default;

$u-position-apply-at-breakpoints-for-middle:             false !default;


/**
 * Standard positioning properties.
 */

// Relative
%u-position-relative,
.u-position-relative {
  position: relative !important;
}

@if $u-position-apply-at-breakpoints-for-relative {
  @include generate-at-breakpoints('.u-position-relative',
    $u-position-apply-at-breakpoints) {
    position: relative !important;
  }
}

// Absolute
%u-position-absolute,
.u-position-absolute {
  position: absolute !important;
}

@if $u-position-apply-at-breakpoints-for-absolute {
  @include generate-at-breakpoints('.u-position-absolute',
    $u-position-apply-at-breakpoints) {
    position: absolute !important;
  }
}

// Fixed
%u-position-fixed,
.u-position-fixed {
  position: fixed !important;
}

@if $u-position-apply-at-breakpoints-for-fixed {
  @include generate-at-breakpoints('.u-position-fixed',
    $u-position-apply-at-breakpoints) {
    position: fixed !important;
  }
}

// Static
%u-position-static,
.u-position-static {
  position: static !important;
}

@if $u-position-apply-at-breakpoints-for-static {
  @include generate-at-breakpoints('.u-position-static',
    $u-position-apply-at-breakpoints) {
    position: static !important;
  }
}


/**
 * Different ways to position an element.
 */

// Left
%u-position-left,
.u-position-left {
  position: absolute !important;
  left: 0 !important;
}

@if $u-position-apply-at-breakpoints-for-left {
  @include generate-at-breakpoints('.u-position-left',
    $u-position-apply-at-breakpoints) {
    position: absolute !important;
    left: 0 !important;
  }
}

// Right
%u-position-right,
.u-position-right {
  position: absolute !important;
  right: 0 !important;
}

@if $u-position-apply-at-breakpoints-for-right {
  @include generate-at-breakpoints('.u-position-right',
    $u-position-apply-at-breakpoints) {
    position: absolute !important;
    right: 0 !important;
  }
}

// Top
%u-position-top,
.u-position-top {
  position: absolute !important;
  top: 0 !important;
}

@if $u-position-apply-at-breakpoints-for-top {
  @include generate-at-breakpoints('.u-position-top',
    $u-position-apply-at-breakpoints) {
    position: absolute !important;
    top: 0 !important;
  }
}

// Bottom
%u-position-bottom,
.u-position-bottom {
  position: absolute !important;
  bottom: 0 !important;
}

@if $u-position-apply-at-breakpoints-for-bottom {
  @include generate-at-breakpoints('.u-position-bottom',
    $u-position-apply-at-breakpoints) {
    position: absolute !important;
    bottom: 0 !important;
  }
}

// Top left corner
%u-position-top-left,
.u-position-top-left {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
}

@if $u-position-apply-at-breakpoints-for-top-left {
  @include generate-at-breakpoints('.u-position-top-left',
    $u-position-apply-at-breakpoints) {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
  }
}

// Top right corner
%u-position-top-right,
.u-position-top-right {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
}

@if $u-position-apply-at-breakpoints-for-top-right {
  @include generate-at-breakpoints('.u-position-top-right',
    $u-position-apply-at-breakpoints) {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
  }
}

// Bottom left corner
%u-position-bottom-left,
.u-position-bottom-left {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
}

@if $u-position-apply-at-breakpoints-for-bottom-left {
  @include generate-at-breakpoints('.u-position-bottom-left',
    $u-position-apply-at-breakpoints) {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
  }
}

// Bottom right corner
%u-position-bottom-right,
.u-position-bottom-right {
  position: absolute !important;
  bottom: 0 !important;
  right: 0 !important;
}

@if $u-position-apply-at-breakpoints-for-bottom-right {
  @include generate-at-breakpoints('.u-position-bottom-right',
    $u-position-apply-at-breakpoints) {
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
  }
}

// Pin to all corners
%u-position-pin-all,
.u-position-pin-all {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
}

@if $u-position-apply-at-breakpoints-for-pin-all {
  @include generate-at-breakpoints('.u-position-pin-all',
    $u-position-apply-at-breakpoints) {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
  }
}

// Pin to top and bottom
%u-position-pin-ends,
.u-position-pin-ends {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
}

@if $u-position-apply-at-breakpoints-for-pin-ends {
  @include generate-at-breakpoints('.u-position-pin-ends',
    $u-position-apply-at-breakpoints) {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
  }
}

// Pin to the sides
%u-position-pin-sides,
.u-position-pin-sides {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
}

@if $u-position-apply-at-breakpoints-for-pin-sides {
  @include generate-at-breakpoints('.u-position-pin-sides',
    $u-position-apply-at-breakpoints) {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
  }
}

// Pin to the sides and top
%u-position-pin-sides-top,
.u-position-pin-sides-top {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
}

@if $u-position-apply-at-breakpoints-for-pin-sides-top {
  @include generate-at-breakpoints('.u-position-pin-sides-top',
    $u-position-apply-at-breakpoints) {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
  }
}

// Pin to the sides and bottom
%u-position-pin-sides-bottom,
.u-position-pin-sides-bottom {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
}

@if $u-position-apply-at-breakpoints-for-pin-sides-bottom {
  @include generate-at-breakpoints('.u-position-pin-sides-bottom',
    $u-position-apply-at-breakpoints) {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
  }
}

// Vertically in the middle
%u-position-v-middle,
.u-position-v-middle {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

@if $u-position-apply-at-breakpoints-for-v-middle {
  @include generate-at-breakpoints('.u-position-v-middle',
    $u-position-apply-at-breakpoints) {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
}

// Horizontally in the middle
%u-position-h-middle,
.u-position-h-middle {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

@if $u-position-apply-at-breakpoints-for-h-middle {
  @include generate-at-breakpoints('.u-position-h-middle',
    $u-position-apply-at-breakpoints) {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
}

// Vertically and horizontally in the middle
%u-position-middle,
.u-position-middle {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

@if $u-position-apply-at-breakpoints-for-middle {
  @include generate-at-breakpoints('.u-position-middle',
    $u-position-apply-at-breakpoints) {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
}