Z-index function for SCSS

z-indexes is an array which contains the z-index values for the various list items. The z-index property of a list item determines where in the DOM it will be displayed.

Shortcut: scss.function.zindex

// this list is in descending order
$z-indexes (
  "tooltip",
  "toast",
  "modal",
  "overlay",
  "sidebar",
  "dropdown",
  "base",
  "auto"
);
  
@function z-index($name) {
  @if index($z-indexes, $name) {
    @return (length($z-indexes) - index($z-indexes, $name))+1;
  }
  @else {
    @warn 'There is no item "#{$name}" in this list; choose one of: #{$z-indexes}';
    @return null;
  }
}