/* ========================================================================== *\
   Utilities -> Z-Index ($utilities-z-index)
\* ========================================================================== */


//
// z = z-index
// # = value
//

.z1 {
  z-index: @z-index-1 !important;
}

.z2 {
  z-index: @z-index-2 !important;
}

.z3 {
  z-index: @z-index-3 !important;
}

.z4 {
  z-index: @z-index-4 !important;
}

.z5 {
  z-index: @z-index-5 !important;
}

.z6 {
  z-index: @z-index-6 !important;
}

.z7 {
  z-index: @z-index-7 !important;
}

.z8 {
  z-index: @z-index-8 !important;
}

.z9 {
  z-index: @z-index-9 !important;
}

.z10 {
  z-index: @z-index-10 !important;
}

.screens({
  .xs-z1 {
    z-index: @z-index-1 !important;
  }

  .xs-z2 {
    z-index: @z-index-2 !important;
  }

  .xs-z3 {
    z-index: @z-index-3 !important;
  }

  .xs-z4 {
    z-index: @z-index-4 !important;
  }

  .xs-z5 {
    z-index: @z-index-5 !important;
  }

  .xs-z6 {
    z-index: @z-index-6 !important;
  }

  .xs-z7 {
    z-index: @z-index-7 !important;
  }

  .xs-z8 {
    z-index: @z-index-8 !important;
  }

  .xs-z9 {
    z-index: @z-index-9 !important;
  }

  .xs-z10 {
    z-index: @z-index-10 !important;
  }

},{
  .sm-z1 {
    z-index: @z-index-1 !important;
  }

  .sm-z2 {
    z-index: @z-index-2 !important;
  }

  .sm-z3 {
    z-index: @z-index-3 !important;
  }

  .sm-z4 {
    z-index: @z-index-4 !important;
  }

  .sm-z5 {
    z-index: @z-index-5 !important;
  }

  .sm-z6 {
    z-index: @z-index-6 !important;
  }

  .sm-z7 {
    z-index: @z-index-7 !important;
  }

  .sm-z8 {
    z-index: @z-index-8 !important;
  }

  .sm-z9 {
    z-index: @z-index-9 !important;
  }

  .sm-z10 {
    z-index: @z-index-10 !important;
  }
},{
  .md-z1 {
    z-index: @z-index-1 !important;
  }

  .md-z2 {
    z-index: @z-index-2 !important;
  }

  .md-z3 {
    z-index: @z-index-3 !important;
  }

  .md-z4 {
    z-index: @z-index-4 !important;
  }

  .md-z5 {
    z-index: @z-index-5 !important;
  }

  .md-z6 {
    z-index: @z-index-6 !important;
  }

  .md-z7 {
    z-index: @z-index-7 !important;
  }

  .md-z8 {
    z-index: @z-index-8 !important;
  }

  .md-z9 {
    z-index: @z-index-9 !important;
  }

  .md-z10 {
    z-index: @z-index-10 !important;
  }
},{
  .lg-z1 {
    z-index: @z-index-1 !important;
  }

  .lg-z2 {
    z-index: @z-index-2 !important;
  }

  .lg-z3 {
    z-index: @z-index-3 !important;
  }

  .lg-z4 {
    z-index: @z-index-4 !important;
  }

  .lg-z5 {
    z-index: @z-index-5 !important;
  }

  .lg-z6 {
    z-index: @z-index-6 !important;
  }

  .lg-z7 {
    z-index: @z-index-7 !important;
  }

  .lg-z8 {
    z-index: @z-index-8 !important;
  }

  .lg-z9 {
    z-index: @z-index-9 !important;
  }

  .lg-z10 {
    z-index: @z-index-10 !important;
  }
},{
  .xl-z1 {
    z-index: @z-index-1 !important;
  }

  .xl-z2 {
    z-index: @z-index-2 !important;
  }

  .xl-z3 {
    z-index: @z-index-3 !important;
  }

  .xl-z4 {
    z-index: @z-index-4 !important;
  }

  .xl-z5 {
    z-index: @z-index-5 !important;
  }

  .xl-z6 {
    z-index: @z-index-6 !important;
  }

  .xl-z7 {
    z-index: @z-index-7 !important;
  }

  .xl-z8 {
    z-index: @z-index-8 !important;
  }

  .xl-z9 {
    z-index: @z-index-9 !important;
  }

  .xl-z10 {
    z-index: @z-index-10 !important;
  }
},{
  .xxl-z1 {
    z-index: @z-index-1 !important;
  }

  .xxl-z2 {
    z-index: @z-index-2 !important;
  }

  .xxl-z3 {
    z-index: @z-index-3 !important;
  }

  .xxl-z4 {
    z-index: @z-index-4 !important;
  }

  .xxl-z5 {
    z-index: @z-index-5 !important;
  }

  .xxl-z6 {
    z-index: @z-index-6 !important;
  }

  .xxl-z7 {
    z-index: @z-index-7 !important;
  }

  .xxl-z8 {
    z-index: @z-index-8 !important;
  }

  .xxl-z9 {
    z-index: @z-index-9 !important;
  }

  .xxl-z10 {
    z-index: @z-index-10 !important;
  }
});
