// 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, 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:           0.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;
  -webkit-transform: translateZ(0);
          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, 0.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 {
  -webkit-transform: scale($overlay-scale-out-scale);
          transform: scale($overlay-scale-out-scale);
}


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


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


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


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

  -webkit-filter: grayscale(100%);
}


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

  -webkit-filter: grayscale(0%);
}


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

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


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


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


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


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