// Position Utility
// ================


// Position
// --------
/// Shortcut for positioning an element,
/// using the common `top right bottom left` (TRBL) syntax,
/// where a single value will be used for all sides,
/// two values will set vertical/horizontal,
/// and three values will set top/horizontal/bottom values.
/// Use `null` for a value to keep it from displaying,
/// and `auto` or `initial` to reset a given value.
///
/// @group position
///
/// @param {list} $position [null] -
///   A shorthand-syntax of positioning values
///   using the common TRBL pattern,
///   e.g. `absolute 0 0 3em auto` or `fixed 0 2%`.
///   The position value (absolute, relative, etc)
///   defaults to `absolute`.
/// @output `top`, `right`, `bottom`, `left`, and `position` properties
///
/// @example scss - stretch over the full viewport
///   .overlay {
///     @include position(fixed 0);
///   }
/// @example scss - top right offset (absolute positioning implied)
///   .overlay {
///     @include position(2em 2em auto auto);
///   }
/// @example scss - vertical offset without horizontal output
///   .overlay {
///     @include position(2em null);
///   }
@mixin position(
  $position: null
) {
  $sides: ();
  $type: 'absolute';

  // Syntax parsing
  @each $item in $position {
    @if (type-of($item) == 'number') or index('auto' null, $item) {
      $sides: append($sides, $item);
    } @else if index('absolute' 'fixed' 'relative' 'static', $item) {
      $type: $item;
    } @else {
      @error 'Unknown positioning value: #{$item}';
    }
  }

  // TRBL logic
  $length: length($sides);
  $top: if($length > 0, nth($sides, 1), null);
  $right: if($length > 1, nth($sides, 2), $top);
  $bottom: if($length > 2, nth($sides, 3), $top);
  $left: if($length > 3, nth($sides, 4), $right);

  // CSS Output
  bottom: $bottom;
  left: $left;
  position: unquote($type);
  right: $right;
  top: $top;
}