// Name:            Overlay
// Description:     Defines styles for image overlays
//
// Component:       `overlay`
//
// Sub-objects:     `overlay-panel`
//                  `overlay-hover`
//                  `overlay-active`
//                  `overlay-icon`
//
// 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`
//                  `overlay-slide-right`
//
// States:          `hover`
//                  `active`
//                  `ignore`
//
// Uses:            Icon: `[class*='icon-']`
//                  `border-circle`
//
// Markup:
//
// <!-- overlay -->
// <figure class="overlay" href="">
//     <img src="" alt="">
//     <figcaption class="overlay-panel"></figcaption>
// </figure>
//
// ========================================================================

// Variables
// ========================================================================

@overlay-panel-padding: 20px;
@overlay-panel-color: #fff;

@overlay-panel-background: rgba(0, 0, 0, 0.5);

@overlay-icon: "\f002";
@overlay-icon-size: 50px;
@overlay-icon-color: #fff;

@overlay-fade-in-opacity: 1;
@overlay-fade-out-opacity: 0.7;

@overlay-scale-in-scale: 1.1;
@overlay-scale-out-scale: 1;

@overlay-spin-in-scale: 1.1;
@overlay-spin-out-scale: 1;
@overlay-spin-in-rotate: 3deg;
@overlay-spin-out-rotate: 0deg;

@overlay-panel-link-color: inherit;
@overlay-panel-link-text-decoration: underline;

// DEPRECATED
@overlay-area-background: rgba(0, 0, 0, 0.3);

@overlay-area-icon: "\f002";
@overlay-area-icon-size: 50px;
@overlay-area-icon-color: #fff;

@overlay-area-content-font-size: 1rem;
@overlay-area-content-padding-horizontal: 15px;
@overlay-area-content-color: #fff;
@overlay-area-content-link-color: inherit;

@overlay-caption-background: rgba(0, 0, 0, 0.5);
@overlay-caption-padding: 15px;
@overlay-caption-color: #fff;

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

/*
 * 1. Container width fits its content
 * 2. Create position context
 * 3. Set max-width for responsive images to prevent `inline-block` consequences
 * 4. Remove the gap between the container and its child element
 * 5. Needed for transitions and to fixed wrong scaling calculation for images in Chrome
 * 6. Fixed `overflow: hidden` to be ignored with border-radius and CSS transforms in Webkit
 * 7. Reset margin
 */

.overlay {
  /* 1 */
  display: inline-block;
  /* 2 */
  position: relative;
  /* 3 */
  max-width: 100%;
  /* 4 */
  vertical-align: middle;
  /* 5 */
  overflow: hidden;
  /* 6 */
  -webkit-transform: translateZ(0);
  /* 7 */
  margin: 0;
}

/* 6 for Safari */
.overlay.border-circle {
  -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}

/*
 * Remove margin from content
 */

.overlay > :first-child {
  margin-bottom: 0;
}

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

/*
 * 1. Position cover
 * 2. Style
 */

.overlay-panel {
  /* 1 */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  /* 2 */
  padding: @overlay-panel-padding;
  color: @overlay-panel-color;
  .hook-overlay-panel;
}

/*
 * Remove margin from the last-child
 */

.overlay-panel > :last-child,
.overlay-panel.flex > * > :last-child {
  margin-bottom: 0;
}

/*
 * Keep color for headings if the default heading color is changed
 */

.overlay-panel h1,
.overlay-panel h2,
.overlay-panel h3,
.overlay-panel h4,
.overlay-panel h5,
.overlay-panel h6 {
  color: inherit;
}

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

.overlay-panel a[class*='icon-']:not(.icon-button) {
  color: @overlay-panel-link-color;
}

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

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

.overlay-active :not(.active) > .overlay-panel:not(.ignore) {
  opacity: 0;
}

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

.overlay-background {
  background: @overlay-panel-background;
  .hook-overlay-background;
}

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

/*
 * Reset panel
 */

.overlay-image {
  padding: 0;
  .hook-overlay-image;
}

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

.overlay-top {
  bottom: auto;
}

.overlay-bottom {
  top: auto;
}

.overlay-left {
  right: auto;
}

.overlay-right {
  left: auto;
}

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

.overlay-icon:before {
  content: @overlay-icon;
  position: absolute;
  top: 50%;
  left: 50%;
  width: @overlay-icon-size;
  height: @overlay-icon-size;
  margin-top: -(@overlay-icon-size / 2);
  margin-left: -(@overlay-icon-size / 2);
  font-size: @overlay-icon-size;
  line-height: 1;
  font-family: FontAwesome;
  text-align: center;
  color: @overlay-icon-color;
  .hook-overlay-icon;
}

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

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

.overlay-active .overlay-fade,
.overlay-active .overlay-scale,
.overlay-active .overlay-spin,
.overlay-active [class*='overlay-slide'] {
  transition-duration: 0.8s;
}

/*
 * Fade
 */

.overlay-fade {
  opacity: @overlay-fade-out-opacity;
}

.overlay-hover:hover .overlay-fade,
.overlay-active .active > .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,
.overlay-active .active > .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,
.overlay-active .active > .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 {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

.overlay-hover:hover .overlay-grayscale,
.overlay-active .active > .overlay-grayscale {
  -webkit-filter: grayscale(0%);
  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'],
.overlay-active .active > [class*='overlay-slide'] {
  opacity: 1;
  -webkit-transform: translateX(0) translateY(0);
  transform: translateX(0) translateY(0);
}


// Hooks
// ========================================================================

.hook-overlay-misc(){};

.hook-overlay-panel(){}

.hook-overlay-background() {}

.hook-overlay-image() {}

.hook-overlay-icon() {}

.hook-overlay-misc() {}