
////////////////////////
//
// Contents:
//
// 1. Default Settings
// 2. General styles
//    - Transluscent overlay
//    - Containers, wrappers
//    - Cursors
//    - Helper classes
// 3. Appearance
//    - Preloader & text that displays error messages
//    - CSS reset for buttons
//    - Close icon
//    - "1 of X" counter
//    - Navigation (left/right) arrows
//    - Iframe content type styles
//    - Image content type styles
//    - Media query where size of arrows is reduced
//    - IE7 support
//
////////////////////////



////////////////////////
// 1. Default Settings
////////////////////////

$overlay-color                   = #fff
$overlay-opacity                 = 0.95
$shadow                          = 0 0 8px rgba(0, 0, 0, 0.6) // shadow on image or iframe
$popup-padding-left              = 8px // Padding from left and from right side
$popup-padding-left-mobile       = 6px // Same as above, but is applied when width of window is less than 800px

$z-index-base                    = 1040 // Base z-index of popup
$include-arrows                  = true // include styles for nav arrows
$controls-opacity                = 0.65
$controls-color                  = #FFF
$inner-close-icon-color          = #333
$controls-text-color             = #CCC // Color of preloader and "1 of X" indicator
$controls-text-color-hover       = #FFF
$IE7support                      = true // Very basic IE7 support

// Iframe-type options
$include-iframe-type             = true
$iframe-padding-top              = 40px
$iframe-background               = #000
$iframe-max-width                = 900px
$iframe-ratio                    = 9/16

// Image-type options
$include-image-type              = true
$image-background                = #444
$image-padding-top               = 40px
$image-padding-bottom            = 40px
$include-mobile-layout-for-image = true // Removes paddings from top and bottom

// Image caption options
$caption-title-color             = F3F3F3
$caption-subtitle-color          = #BDBDBD

// A11y
$use-visuallyhidden              = false // Hide content from browsers, but make it available for screen readers



////////////////////////
// 2. General styles
////////////////////////

// Transluscent overlay
.tpl-block-mfp-bg
  top: 0
  left: 0
  width: 100%
  height: 100%
  z-index: $z-index-base + 2
  overflow: hidden
  position: fixed

  background: $overlay-color
  opacity: $overlay-opacity
  if $IE7support
    filter: unquote("alpha(opacity=#$overlay-opacity*100)")



// Wrapper for popup
.tpl-block-mfp-wrap
  top: 0
  left: 0
  width: 100%
  height: 100%
  z-index: $z-index-base + 3
  position: fixed
  outline: none !important
  backface-visibility: hidden // fixes webkit bug that can cause "false" scrollbar


// Root container
.tpl-block-mfp-container
  text-align: center
  position: absolute
  width: 100%
  height: 100%
  left: 0
  top: 0
  padding: 0 $popup-padding-left


// Vertical centerer helper
.tpl-block-mfp-container
  &:before
    content: ''
    display: inline-block
    height: 100%
    vertical-align: middle



// Remove vertical centering when popup has class `mfp-align-top`
.tpl-block-mfp-align-top
  .tpl-block-mfp-container
    &:before
      display: none




// Popup content holder
.tpl-block-mfp-content
  position: relative
  display: inline-block
  vertical-align: middle
  margin: 0 auto
  text-align: left
  z-index: $z-index-base + 5

.tpl-block-mfp-inline-holder,
.tpl-block-mfp-ajax-holder
  .tpl-block-mfp-content
    width: 100%
    cursor: auto



// Cursors
.tpl-block-mfp-ajax-cur
  cursor: progress

.tpl-block-mfp-zoom-out-cur
  &, .tpl-block-mfp-image-holder .tpl-block-mfp-close
    cursor: zoom-out


.tpl-block-mfp-zoom
  cursor: pointer
  cursor: zoom-in

.tpl-block-mfp-auto-cursor
  .tpl-block-mfp-content
    cursor: auto



.tpl-block-mfp-close,
.tpl-block-mfp-arrow,
.tpl-block-mfp-preloader,
.tpl-block-mfp-counter
  user-select: none


// Hide the image during the loading
.tpl-block-mfp-loading
  &.tpl-block-mfp-figure
    display: none



// Helper class that hides stuff
if $use-visuallyhidden
  // From HTML5 Boilerplate https://github.com/h5bp/html5-boilerplate/blob/v4.2.0/doc/css.md#visuallyhidden
  .tpl-block-mfp-hide
    border: 0 !important
    clip: rect(0 0 0 0) !important
    height: 1px !important
    margin: -1px !important
    overflow: hidden !important
    padding: 0 !important
    position: absolute !important
    width: 1px !important

 else
  .tpl-block-mfp-hide
    display: none !important




////////////////////////
// 3. Appearance
////////////////////////

// Preloader and text that displays error messages
.tpl-block-mfp-preloader
  color: $controls-text-color
  position: absolute
  top: 50%
  width: auto
  text-align: center
  margin-top: -0.8em
  left: 8px
  right: 8px
  z-index: $z-index-base + 4
  a
    color: $controls-text-color
    &:hover
      color: $controls-text-color-hover




// Hide preloader when content successfully loaded
.tpl-block-mfp-s-ready
  .tpl-block-mfp-preloader
    display: none



// Hide content when it was not loaded
.tpl-block-mfp-s-error
  .tpl-block-mfp-content
    display: none



// Close icon
.tpl-block-mfp-close
  overflow: visible
  cursor: pointer
  display: block
  z-index: $z-index-base + 6
  width: 44px
  height: 44px
  line-height: 44px
  transition: opacity 0.2s
  position: absolute
  right: 30px
  top: 20px
  text-decoration: none
  text-align: center
  opacity: $controls-opacity
  backface-visibility: hidden
  if $IE7support
    filter: unquote("alpha(opacity=#$controls-opacity*100)")

  padding: 0 0 18px 10px
  color: $controls-color

  i
    pointer-events: none

  &:hover,
  &:focus
    opacity: 1
    if $IE7support
      filter: unquote("alpha(opacity=#1*100)")




// Iframe content type
if $include-iframe-type
  .tpl-block-mfp-iframe-holder
    padding-top: $iframe-padding-top
    padding-bottom: $iframe-padding-top
    .tpl-block-mfp-content
      line-height: 0
      width: 100%
      max-width: $iframe-max-width

    .tpl-block-mfp-close
      top: -40px


  .tpl-block-mfp-iframe-scaler
    width: 100%
    height: 0
    overflow: hidden
    padding-top: $iframe-ratio * 100%
    iframe
      position: absolute
      display: block
      top: 0
      left: 0
      width: 100%
      height: 100%
      box-shadow: $shadow
      background: $iframe-background






// Image content type
if $include-image-type

  /* Main image in popup */
  img
    &.tpl-block-mfp-img
      width: auto
      max-width: 100%
      height: auto
      display: block
      line-height: 0
      box-sizing: border-box
      padding: $image-padding-top 0 $image-padding-bottom
      margin: 0 auto



  /* The shadow behind the image */
  .tpl-block-mfp-figure
    line-height: 0
    &:after
      content: ''
      position: absolute
      left: 0
      top: $image-padding-top
      bottom: $image-padding-bottom
      display: block
      right: 0
      width: auto
      height: auto
      z-index: -1
      box-shadow: $shadow
      background: $image-background

    small
      color: $caption-subtitle-color
      display: block
      font-size: 12px
      line-height: 14px

    figure
      margin: 0

  .tpl-block-mfp-bottom-bar
    margin-top: -($image-padding-bottom) + 4
    position: absolute
    top: 100%
    left: 0
    width: 100%
    cursor: auto

  .tpl-block-mfp-title
    text-align: left
    line-height: 18px
    color: $caption-title-color
    word-wrap: break-word
    padding-right: 36px // leave some space for counter at right side


  .tpl-block-mfp-image-holder
    .tpl-block-mfp-content
      max-width: 100%



  .tpl-block-mfp-gallery
    .tpl-block-mfp-image-holder
      .tpl-block-mfp-figure
        cursor: pointer





  if $include-mobile-layout-for-image
    @media screen and (max-width: 800px) and (orientation:landscape), screen and (max-height: 300px)
      /**
       * Remove all paddings around the image on small screen
       */
      .tpl-block-mfp-img-mobile
        .tpl-block-mfp-image-holder
          padding-left: 0
          padding-right: 0

        img
          &.tpl-block-mfp-img
            padding: 0


        .tpl-block-mfp-figure
          // The shadow behind the image
          &:after
            top: 0
            bottom: 0

          small
            display: inline
            margin-left: 5px


        .tpl-block-mfp-bottom-bar
          background: rgba(0,0,0,0.6)
          bottom: 0
          margin: 0
          top: auto
          padding: 3px 5px
          position: fixed
          &:empty
            padding: 0


        .tpl-block-mfp-counter
          right: 5px
          top: 3px

        .tpl-block-mfp-close
          top: 0
          right: 0
          width: 35px
          height: 35px
          line-height: 35px
          background: rgba(0, 0, 0, 0.6)
          position: fixed
          text-align: center
          padding: 0








// Scale navigation arrows and reduce padding from sides
@media all and (max-width: 900px)
  .tpl-block-mfp-arrow
    -webkit-transform: scale(0.75)
    transform: scale(0.75)

  .tpl-block-mfp-arrow-left
    -webkit-transform-origin: 0
    transform-origin: 0

  .tpl-block-mfp-arrow-right
    -webkit-transform-origin: 100%
    transform-origin: 100%

  .tpl-block-mfp-container
    padding-left: $popup-padding-left-mobile
    padding-right: $popup-padding-left-mobile





// IE7 support
// Styles that make popup look nicier in old IE
if $IE7support
  .tpl-block-mfp-ie7
    .tpl-block-mfp-img
      padding: 0

    .tpl-block-mfp-bottom-bar
      width: 600px
      left: 50%
      margin-left: -300px
      margin-top: 5px
      padding-bottom: 5px

    .tpl-block-mfp-container
      padding: 0

    .tpl-block-mfp-content
      padding-top: 44px

    .tpl-block-mfp-close
      top: 0
      right: 0
      padding-top: 0






.tpl-block-mfp-animating
  &.tpl-block-mfp-wrap
    opacity: 0
    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out
    // transform: scale(0.8)
    // transform: translateY(-20px) perspective( 600px ) rotateX( 10deg ) scale(0.8)
    transform: scale(0.8)
  &.tpl-block-mfp-bg
    opacity: 0
    transition: opacity 0.2s ease-out
  &.tpl-block-mfp-ready
    &.tpl-block-mfp-wrap
      opacity: 1
      // transform: scale(1)
      // transform: translateY(0) perspective( 600px ) rotateX( 0 ) scale(1)
      transform: scale(1)
    &.tpl-block-mfp-bg
      opacity: 0.8
  &.tpl-block-mfp-removing
    &.tpl-block-mfp-wrap
      // transform: scale(0.8)
      transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out
      // transform: translateY(-20px) perspective( 600px ) rotateX( 10deg ) scale(0.8)
      transform: scale(0.8)
      opacity: 0
    &.tpl-block-mfp-bg
      opacity: 0






