// Built to work with:
// http://dimsemenov.com/plugins/magnific-popup/
// https://github.com/digitoimistodude/air
//
// Import this file after magnific-popup/dist/magnific-popup

.mfp-bg {
  background: rgba(#000, .8);
  opacity: 1;
  z-index: 99999 !important;
}

.mfp-title {
  font-family: $font-paragraphs;
  color: $color-paragraphs;
  opacity: 1;
  font-size: 1.5rem;
  margin-left: 1.5rem;
}

.mfp-wrap {
  opacity: 1;
  transition: all $transition-duration ease-out;
  z-index: 999999 !important;

  .mfp-bottom-bar {
    width: 98%;
  }

  .mfp-img {
    margin: 0;
    padding: 0;
  }

  button.mfp-arrow-left,
  button.mfp-arrow-right {
    background-size: 64px 64px;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent;
    width: 64px;
    height: 64px;
    position: absolute;
    margin-bottom: 0;
    margin-top: 0;

    &:hover {
      background-color: transparent;
    }
  }

  .mfp-arrow-left {
    background-image: url('../svg/left-arrow.svg');

    &:hover,
    &:focus {
      background-image: url('../svg/left-arrow.svg');
    }

    &:before,
    &:after {
      display: none;
    }
  }

  .mfp-arrow-right {
    background: url('../svg/right-arrow.svg');

    &:hover,
    &:focus {
      background-image: url('../svg/right-arrow.svg');
    }

    &:before,
    &:after {
      display: none;
    }
  }

  &.mfp-animate {
    transform: scale(1.2);
    opacity: 0;
  }

  .mfp-figure {
    transform: scale(.95);
    transition: all $transition-duration ease-out;
    opacity: .5;

    &:after {
      display: none;
    }
  }

  &.mfp-image-loaded {
    .mfp-figure {
      transform: scale(1);
      opacity: 1;
    }
  }

  .mfp-iframe-holder .mfp-content .mfp-iframe-scaler {
    .mfp-close {
      color: #fff;
      margin-top: 40px;
      margin-right: 5px;
    }
  }

  .mfp-content {
    background: transparent;
    padding: 0;

    .mfp-close {
      width: 70px;
      height: 70px;
      text-align: center;
      border: 2px solid transparent;
      line-height: 38px;
      padding: 0;
      transition: all $transition-duration ease-out;
      color: #fff;
      background: #000;
      margin-right: 5px;
      position: absolute;
      font-size: 40px;
      border-radius: 0;
      opacity: 1;

      &:hover {
        background: $color-links;
      }
    }
  }
}