@each $box-shadow-name, $box-shadow-value in $box-shadows {
  .bs-#{$box-shadow-name} {
    box-shadow: rem($box-shadow-value);
  }
}

.bs-unset {
  box-shadow: unset;
}

@each $breakpoint-name, $breakpoint-value in $breakpoints {
  @media #{$breakpoint-value} {
    @each $box-shadow-name, $box-shadow-value in $box-shadows {
      .#{$breakpoint-name}--bs-#{$box-shadow-name} {
        box-shadow: rem($box-shadow-value);
      }
    }

    .#{$breakpoint-name}--bs-unset {
      box-shadow: unset;
    }
  }
}

.bs-hover {
  cursor: pointer;
  position: relative;
  transition: all $transition-duration-slow $transition-function;
}

.bs-hover::after {
  content: '';
  box-shadow: inherit;
  border-radius: inherit;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  transition: opacity $transition-duration-slow $transition-function;
}

.bs-hover:hover::after,
.bs-hover:focus::after {
  opacity: 1;
}