/* Box shadow */

.bs-none                { box-shadow: none; }
.bs-raise               { box-shadow: 0 3px 6px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.08); }
.bs-active              { box-shadow: 0 5px 10px rgba(0,0,0,.15),0 3px 6px rgba(0,0,0,.1); }
.bs-distant             { box-shadow: 0 6px 20px 1px hsla(208, 20%, 10%, .15), 0 3px 10px 0px hsla(208, 20%, 10%, .08); }
.bs-bevel               { box-shadow: inset 0 1px 0 0 var(--gray300), inset 1px 0 0 0 var(--gray300), inset -1px 0 0 0 var(--gray300), inset 0 -1px 0 0 var(--gray400); }

/* Hover states */

@media (hover) {
  .bs-none--hover:hover       { box-shadow: none; }
  .bs-raise--hover:hover      { box-shadow: 0 3px 6px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.08); }
  .bs-active--hover:hover     { box-shadow: 0 5px 10px rgba(0,0,0,.15),0 3px 6px rgba(0,0,0,.1); }
  .bs-distant--hover:hover    { box-shadow: 0 6px 20px 1px hsla(208, 20%, 10%, .15), 0 3px 10px 0px hsla(208, 20%, 10%, .08); }
  .bs-bevel--hover:hover      { box-shadow: inset 0 1px 0 0 var(--gray300), inset 1px 0 0 0 var(--gray300), inset -1px 0 0 0 var(--gray300), inset 0 -1px 0 0 var(--gray400); }
}