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

// Forced to use important here, because of inline styles
/* stylelint-disable declaration-no-important */
.mfp-bg {
  background-color: $color-dark;
  opacity: 1;
  z-index: 99999 !important;
}
/* stylelint-enable */

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

// Forced to use important here, because of inline styles
/* stylelint-disable declaration-no-important */
.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-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 64px 64px;
    height: 64px;
    margin-bottom: 0;
    margin-top: 0;
    position: absolute;
    width: 64px;

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

  // Forced to use display none here, because of inline styles
  /* stylelint-disable a11y/no-display-none */
  .mfp-arrow-left {
    background-image: url('../../svg/left-arrow.svg');

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

    &::before,
    &::after {
      display: none;
    }
  }
  /* stylelint-enable */

  // Forced to use display none here, because of inline styles
  /* stylelint-disable a11y/no-display-none */
  .mfp-arrow-right {
    background-image: url('../../svg/right-arrow.svg');

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

    &::before,
    &::after {
      display: none;
    }
  }
  /* stylelint-enable */

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

  // Forced to use display none here, because of inline styles
  /* stylelint-disable a11y/no-display-none */
  .mfp-figure {
    opacity: .5;
    transform: scale(.95);
    transition: all $transition-duration ease-out;

    &::after {
      display: none;
    }
  }

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

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

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

      &:hover,
      &:focus {
        background-color: $color-links;
      }
    }
  }
}
/* stylelint-enable */