// Name:            Overlay
// Description:     Defines styles for image overlays
//
// Component:       `uk-overlay`
//
// Sub-objects:     `uk-overlay-panel`
//                  `uk-overlay-hover`
//                  `uk-overlay-active`
//                  `uk-overlay-icon`
//
// Modifier:        `uk-overlay-background`
//                  `uk-overlay-image`
//                  `uk-overlay-top`
//                  `uk-overlay-bottom`
//                  `uk-overlay-left`
//                  `uk-overlay-right`
//                  `uk-overlay-fade`
//                  `uk-overlay-scale`
//                  `uk-overlay-spin`
//                  `uk-overlay-grayscale`
//                  `uk-overlay-slide-top`
//                  `uk-overlay-slide-bottom`
//                  `uk-overlay-slide-left`
//                  `uk-overlay-slide-right`
//
// DEPRECATED:      `uk-overlay-area`
//                  `uk-overlay-area-content`
//                  `uk-overlay-caption`
//                  `uk-overlay-toggle`
//
// States:          `uk-hover`
//                  `uk-active`
//                  `uk-ignore`
//
// Uses:            Icon: `[class*='uk-icon-']`
//                  `uk-border-circle`
//
// Markup:
//
// <!-- uk-overlay -->
// <figure class="uk-overlay" href="">
//     <img src="" alt="">
//     <figcaption class="uk-overlay-panel"></figcaption>
// </figure>
//
// ========================================================================


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

$overlay-panel-padding:                          20px !default;
$overlay-panel-color:                            #fff !default;

$overlay-panel-background:                       rgba(0,0,0,0.5) !default;

$overlay-icon:                                   "\f002" !default;
$overlay-icon-size:                              50px !default;
$overlay-icon-color:                             #fff !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;

$overlay-panel-link-color:                       inherit !default;
$overlay-panel-link-text-decoration:             underline !default;

// DEPRECATED
$overlay-area-background:                        rgba(0,0,0,0.3) !default;

$overlay-area-icon:                              "\f002" !default;
$overlay-area-icon-size:                         50px !default;
$overlay-area-icon-color:                        #fff !default;

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

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


/* ========================================================================
   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
 */

.uk-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 */
.uk-overlay.uk-border-circle { -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); }

/*
 * Remove margin from content
 */

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


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

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

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

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

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

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

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

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

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


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

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

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


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

.uk-overlay-background {
    background: $overlay-panel-background;
    @include hook-overlay-background();
}


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

/*
 * Reset panel
 */

.uk-overlay-image {
    padding: 0;
    @include hook-overlay-image();
}


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

.uk-overlay-top { bottom: auto; }

.uk-overlay-bottom { top: auto; }

.uk-overlay-left { right: auto; }

.uk-overlay-right { left: auto; }


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

.uk-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;
    @include hook-overlay-icon();
}


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

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

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

/*
 * Fade
 */

.uk-overlay-fade { opacity: $overlay-fade-out-opacity; }

.uk-overlay-hover:hover .uk-overlay-fade,
.uk-overlay-active .uk-active > .uk-overlay-fade { opacity: $overlay-fade-in-opacity; }

/*
 * Scale
 */

.uk-overlay-scale {
    -webkit-transform: scale($overlay-scale-out-scale);
    transform: scale($overlay-scale-out-scale);
}

.uk-overlay-hover:hover .uk-overlay-scale,
.uk-overlay-active .uk-active > .uk-overlay-scale {
    -webkit-transform: scale($overlay-scale-in-scale);
    transform: scale($overlay-scale-in-scale);
}

/*
 * Spin
 */

.uk-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);
}

.uk-overlay-hover:hover .uk-overlay-spin,
.uk-overlay-active .uk-active > .uk-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
 */

.uk-overlay-grayscale {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

.uk-overlay-hover:hover .uk-overlay-grayscale,
.uk-overlay-active .uk-active > .uk-overlay-grayscale {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}

/*
 * Slide
 */

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

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

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

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

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

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


/* DEPRECATED
 * Sub-object `uk-overlay-area`
 ========================================================================== */

/*
 * 1. Set position
 * 2. Set style
 * 3. Fade-in transition
 */

.uk-overlay-area {
    /* 1 */
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /* 2 */
    background: $overlay-area-background;
    /* 3 */
    opacity: 0;
    -webkit-transition: opacity 0.15s linear;
    transition: opacity 0.15s linear;
    -webkit-transform: translate3d(0,0,0);
    @include hook-overlay-area();
}

/*
 * Hover
 * 1. `uk-hover` to support touch devices
 * 2. Use optional `uk-overlay-toggle` to trigger the overlay earlier
 */

.uk-overlay:hover .uk-overlay-area,
.uk-overlay.uk-hover .uk-overlay-area, // 1
.uk-overlay-toggle:hover .uk-overlay-area, // 2
.uk-overlay-toggle.uk-hover .uk-overlay-area { opacity: 1; }

/*
 * Icon
 */

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


/* DEPRECATED
 * Sub-object `uk-overlay-area-content`
 ========================================================================== */

/*
 * Remove whitespace between child elements when using `inline-block`
 * Needed for Firefox
 */

.uk-overlay-area:not(:empty) { font-size: 0.001px; }

/*
 * 1. Needed for vertical alignment
 */

.uk-overlay-area:not(:empty):before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

/*
 * 1. Set vertical alignment
 * 2. Reset whitespace hack
 * 3. Set horizontal alignment
 * 4. Set style
 */

.uk-overlay-area-content {
    /* 1 */
    display: inline-block;
    box-sizing: border-box;
    width: 100%;
    vertical-align: middle;
    /* 2 */
    font-size: $overlay-area-content-font-size;
    /* 3 */
    text-align: center;
    /* 4 */
    padding: 0 $overlay-area-content-padding-horizontal;
    color: $overlay-area-content-color;
    @include hook-overlay-area-content();
}

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

.uk-overlay-area-content > :last-child { margin-bottom: 0; }

/*
 * Links in overlay area
 */

.uk-overlay-area-content a:not([class]),
.uk-overlay-area-content a:not([class]):hover { color: $overlay-area-content-link-color; }


/* DEPRECATED
 * Sub-object `uk-overlay-caption`
 ========================================================================== */

/*
 * 1. Set position
 * 2. Set style
 * 3. Fade-in transition
 */

.uk-overlay-caption {
    /* 1 */
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    /* 2 */
    padding: $overlay-caption-padding;
    background: $overlay-caption-background;
    color: $overlay-caption-color;
    /* 3 */
    opacity: 0;
    -webkit-transition: opacity 0.15s linear;
    transition: opacity 0.15s linear;
    -webkit-transform: translate3d(0,0,0);
    @include hook-overlay-caption();
}

/*
 * Hover
 * 1. `uk-hover` to support touch devices
 * 2. Use optional `uk-overlay-toggle` to trigger the overlay earlier
 */

.uk-overlay:hover .uk-overlay-caption,
.uk-overlay.uk-hover .uk-overlay-caption, // 1
.uk-overlay-toggle:hover .uk-overlay-caption, // 2
.uk-overlay-toggle.uk-hover .uk-overlay-caption { opacity: 1; }


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

@include hook-overlay-misc();

// @mixin hook-overlay-panel(){}
// @mixin hook-overlay-background(){}
// @mixin hook-overlay-image(){}
// @mixin hook-overlay-icon(){}
// @mixin hook-overlay-misc(){}

// DEPRECATED
// @mixin hook-overlay-area(){}
// @mixin hook-overlay-area-icon(){}
// @mixin hook-overlay-area-content(){}
// @mixin hook-overlay-caption(){}