.btn {
  &.btn-raised,
  .btn-group-raised & {

    box-shadow: $box-shadow-raised;

    // // enlarged shadow on hover, focus
    // &:focus {
    //   z-index: 1; // add to the z-index so that the expanded shadow is above anything below it i.e. another button
    //   box-shadow: 0 0 8px rgba(0,0,0,.18), 0 8px 16px rgba(0,0,0,.36);
    // }

    // :active - momentary press: big shadow, release and it is gone
    // .active - persistent big shadow
    &.active,
    &:active,
    &:focus,
    &:hover {
      z-index: 1; // add to the z-index so that the expanded shadow is above anything below it i.e. another button
      box-shadow: $box-shadow-raised-focus;
    }

    // reverse any of the above for links
    &.btn-link {
      box-shadow: none;

      &.active {
        box-shadow: none;
      }
      @include hover-focus-active() {
        box-shadow: none;
      }
    }

    fieldset[disabled] &,
    &.disabled,
    &:disabled,
    &[disabled] {
      box-shadow: none;
    }
  }
}