// Z-Index
// =======


// Z-Index
// -------
/// A list of named z-index layers, from lowest to highest index.
/// Nest lists (one level only) to establish a new z-index context:
/// The first item will be indexed based on top-level list position,
/// while additional values are indexed
/// by their position in the nested list.
///
/// @group z-index
/// @type list
///
/// @example scss -
///   $z-index: (
///     'main', // 1
///     'sidebar', // 2
///     'banner' 'active-nav' 'dropdown', // 3 1 2
///     'message', // 4
///     'modal', // 5
///   );
$z-index: ();


// Z-Index [function]
// ------------------
/// Return the numeric index of a named layer in your `$z-index` variable.
///
/// @group z-index
///
/// @param {string} $layer -
///   The name of a z-index layer in your configuration.
/// @require {variable} $z-index
/// @return {number} -
///   The z-index value associated with the given layer in your configuration.
@function z-index(
  $layer
) {
  $index: index($z-index, $layer);
  $nested: null;

  @if $index {
    @return $index;
  } @else {
    @for $i from 1 through length($z-index) {
      $stack: nth($z-index, $i);
      $index: $i;
      $nested: index($stack, $layer);

      @if type-of($nested) == 'number' {
        @if $nested == 1 {
          @return $index;
        } @else if $nested > 1 {
          @return $nested - 1;
        }
      }
    }
  }

  @if type-of($layer) != 'number' {
    @error '#{$layer} is not a valid z-index.';
  }

  @return $layer;
}


// Z-Index [mixin]
// ---------------
/// Output the `z-index` property and value of a given layer
/// in your `$z-index` configuration.
/// @group z-index
/// @param {string} $layer -
///   The name of a z-index layer in your configuration.
/// @output -
///   The z-index property with a value based on your configuration.
@mixin z-index(
  $layer
) {
  z-index: z-index($layer);
}