// Name:            Overlay
// Description:     Defines styles for image overlays
//
// Component:       `overlay`
//
// Sub-objects:     `overlay-figure`
//                  `overlay-panel`
//                  `overlay-hover`
//                  `overlay-icon`
//                  `overlay-anchor`
//
// Modifier:        `overlay-background`
//                  `overlay-image`
//                  `overlay-top`
//                  `overlay-bottom`
//                  `overlay-left`
//                  `overlay-right`
//                  `overlay-fade`
//                  `overlay-scale`
//                  `overlay-spin`
//                  `overlay-grayscale`
//                  `overlay-slide-top`
//                  `overlay-slide-bottom`
//                  `overlay-slide-left`
//
// Markup:
//
// <!-- overlay -->
// <a class="overlay" href="">
//     <img src="" alt="">
//     <div class="overlay-panel"></div>
// </a>
//
// ========================================================================

// Variables
// ========================================================================
$overlay-panel-padding: 20px !default;
$overlay-panel-color: $inverse !default;
$overlay-panel-background: rgba(0, 0, 0, .5) !default;
$overlay-icon-font-size: (2 * $font-size-icon) !default;
$overlay-icon-color: $inverse !default;
$overlay-icons-gutter: 20px !default;
$overlay-panel-link-color: inherit !default;
$overlay-panel-link-text-decoration: underline !default;
$overlay-fade-in-opacity: 1 !default;
$overlay-fade-out-opacity: .7 !default;
$overlay-scale-in-scale: 1.1 !default;
$overlay-scale-out-scale: 1 !default;
$overlay-spin-in-scale: 1.1 !default;
$overlay-spin-out-scale: 1 !default;
$overlay-spin-in-rotate: 3deg !default;
$overlay-spin-out-rotate: 0deg !default;

/* ========================================================================
   Component: Overlay
 ========================================================================== */

.overlay {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  vertical-align: middle;
  transform: translateZ(0);
  // > :first-child, .overlay-figure {
  //   width: 100%;
  //   max-width: 100%;
  //   margin-bottom: 0;
  // }
}

.overlay-figure {
  width: 100%;
  max-width: 100%;
  margin-bottom: 0;
}

/* Sub-object `overlay-panel`
 ========================================================================== */

.overlay-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: $overlay-panel-padding;
  color: $overlay-panel-color;

  a:not([class]) {
    color: $overlay-panel-link-color;
    text-decoration: $overlay-panel-link-text-decoration;
  }

  & > :last-child {
    margin-bottom: 0;
  }

  h1, h2, h3, h4, h5, h6 {
    color: inherit;
  }
}

/* Sub-object `overlay-hover`
 ========================================================================== */

.overlay-hover:not(:hover) {
  .overlay-panel:not(.overlay-background-fixed) {
    opacity: 0;
  }
}

/* Modifier `overlay-background`
 ========================================================================== */

.overlay-background {
  background: $overlay-panel-background;
}

/* Modifier `overlay-image`
 ========================================================================== */

.overlay-image {
  width: 100%;
  max-width: 100%;
  padding: 0;
}

/* Modifier `overlay-shade`
 ========================================================================== */
.overlay-shade {
  background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .87) 90%, #fff 100%) repeat scroll 0 0;
}

/* Position modifiers
 ========================================================================== */

.overlay-top {
  bottom: auto;
}

.overlay-bottom {
  top: auto;
}

.overlay-left {
  right: auto;
}

.overlay-right {
  left: auto;
}

/* Sub-object `overlay-icon`
 ========================================================================== */
.overlay-icon {
  font-size: 0;
  text-align: center;

  &::before {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    content: "";
  }

  .icon {
    display: inline-block;
    width: $overlay-icon-font-size;
    height: $overlay-icon-font-size;
    margin-right: ($overlay-icons-gutter / 2);
    margin-left: ($overlay-icons-gutter / 2);
    font-size: $overlay-icon-font-size;
    line-height: 1;
    color: $overlay-icon-color;
    text-decoration: none;
  }
}

/* Sub-object `overlay-anchor`
 ========================================================================== */
.overlay-anchor {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* Transitions
 ========================================================================== */

.overlay-fade, .overlay-scale, .overlay-spin, .overlay-grayscale, .overlay-blur, [class*="overlay-slide"] {
  transition-timing-function: ease-out;
  transition-duration: .3s;
  transition-property: opacity transform filter;
}

// Fade
.overlay-fade {
  opacity: $overlay-fade-out-opacity;
}

.overlay-hover:hover .overlay-fade {
  opacity: $overlay-fade-in-opacity;
}

// Scale
.overlay-scale {
  transform: scale($overlay-scale-out-scale);
}

.overlay-hover:hover .overlay-scale {
  transform: scale($overlay-scale-in-scale);
}

// Spin
.overlay-spin {
  transform: scale($overlay-spin-out-scale) rotate($overlay-spin-out-rotate);
}

.overlay-hover:hover .overlay-spin {
  transform: scale($overlay-spin-in-scale) rotate($overlay-spin-in-rotate);
}

// Grayscale
.overlay-grayscale {
  filter: grayscale(100%);
}

.overlay-hover:hover .overlay-grayscale {
  filter: grayscale(0%);
}

// Slide
[class*="overlay-slide"] {
  opacity: 0;
}

/* Top */
.overlay-slide-top {
  transform: translateY(-100%);
}

/* Bottom */
.overlay-slide-bottom {
  transform: translateY(100%);
}

/* Left */
.overlay-slide-left {
  transform: translateX(-100%);
}

/* Right */
.overlay-slide-right {
  transform: translateX(100%);
}

/* Hover */
.overlay-hover:hover [class*="overlay-slide"] {
  opacity: 1;
  transform: translateX(0) translateY(0);
}