/**
 * CSS Effects.
 * Let's let our hair down. You wanna get nuts? Let's get nuts!
 */

// Float Shadow.
// Element floats up on hover with a bottom shadow.
.hvr-float-shadow {
  display: inline-block;
  vertical-align: middle;
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  transition-duration: 0.3s;
  transition-property: transform;

  &:before {
    pointer-events: none;
    position: absolute;
    z-index: -1;
    content: '';
    top: 100%;
    left: 5%;
    height: 10px;
    width: 90%;
    opacity: 0;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
    transition-duration: 0.3s;
    transition-property: transform, opacity;
  }
  &:hover,
  &:focus,
  &:active {
    transform: translateY(-5px);
    /* move the element up by 5px */
  }
  &:hover:before,
  &:focus:before,
  &:active:before {
    opacity: 1;
    transform: translateY(5px);
    /* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */
  }
}

// Grow Shadow.
// Element enlarges with a bottom shadow.
.hvr-grow-shadow {
  display: inline-block;
  vertical-align: middle;
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  transition-duration: 0.3s;
  transition-property: box-shadow, transform;

  &:hover,
  &:focus,
  &:active {
    box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
    transform: scale(1.1);
  }
}
