//
// Shadow classes for elevation
// Inspired by Bootstrap v4
// --------------------------------------------------

.responsive-shadow(@infix) {
  @media (min-width: ~"@{screen-@{infix}-min}") {
    .shadow-@{infix}-0 { .shadow-0; }
    .shadow-@{infix}-1 { .shadow-1; }
    .shadow-@{infix}-2 { .shadow-2; }
    .shadow-@{infix}-3 { .shadow-3; }
    .shadow-@{infix}-4 { .shadow-4; }
    .shadow-@{infix}-5 { .shadow-5; }
  }
}

.shadow-0 { box-shadow: none !important; }
.shadow-1 { box-shadow: @box-shadow-xs !important; }
.shadow-2 { box-shadow: @box-shadow-sm !important; }
.shadow-3 { box-shadow: @box-shadow !important; }
.shadow-4 { box-shadow: @box-shadow-lg !important; }
.shadow-5 { box-shadow: @box-shadow-xl !important; }

.responsive-shadow(sm);
.responsive-shadow(md);
.responsive-shadow(lg);

// Deprecated do not use

.shadow-xs   { box-shadow: @box-shadow-xs !important; }
.shadow-sm   { box-shadow: @box-shadow-sm !important; }
.shadow-md   { box-shadow: @box-shadow !important; }
.shadow-lg   { box-shadow: @box-shadow-lg !important; }
.shadow-xl   { box-shadow: @box-shadow-xl !important; }
.shadow-none { box-shadow: none !important; }