$aui-modal-close-size: 45px !default; // sync with JS
$aui-modal-close-size-large: 81px !default; // sync with JS
$aui-modal-content-padding-x: $aui-grid-container-offset !default;
$aui-modal-content-padding-y: unit(6.5) !default;
$aui-modal-dialog-padding: unit(8) !default;
$aui-modal-dialog-offset: unit(5) !default;
$aui-modal-duration: .4s !default;
$aui-modal-delay: .4s !default;
$aui-modal-content-translate-y: 10px !default;
$aui-modal-breakpoint: map-get($aui-breakpoint, xsmall) !default;
$aui-modal-morph-duration: .4s !default;
$aui-modal-max-width: 1200px !default;
$aui-modal-background: $aui-color-gray20 !default;
$aui-modal-close-color: $aui-color-white !default;
$aui-modal-close-hover-color: $aui-color-gray80 !default;

/**
 * Prevent scrolling of body, when modal is open.
 * Added to body by JS.
 */
.aui-modal-open {
  overflow: hidden;
}

/**
 * Modal container stretched to viewport size.
 */
.aui-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  outline: 0; // Prevent Chrome on Windows from adding a focus outline. For details, see https://github.com/twbs/bootstrap/pull/10951.
  z-index: $aui-zindex-modal;
  overflow: hidden;

  &.is-active {
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/**
 * Modal dialog
 */
.aui-modal-dialog {
  display: flex;
  flex-flow: row;
  justify-content: center;
  position: relative;
  min-height: 100vh;
  opacity: 0;
  transition: opacity $aui-modal-duration $aui-easing;
  background-color: $aui-modal-background;

  &__body {
    display: flex;
    flex-flow: column;
    justify-content: center; // vertical, because of `flex-direction: column`
    position: relative;
    min-width: 1px;
    max-width: 100%;
    min-height: 100vh;
    padding: $aui-modal-content-padding-y $aui-modal-content-padding-x;
  }

  &__body--full {
    padding: 0;
  }

  &__content {
    max-width: 100%;
  }

  &__close {
    position: fixed;
    top: rem(6);
    right: rem(6);
    width: $aui-modal-close-size;
    height: $aui-modal-close-size;
    cursor: pointer;
    vertical-align: middle;
    outline: none;
    box-sizing: border-box;
    border: none;
    @include aui-remove-tap-highlight;
    transition: color .3s $aui-easing;
    color: $aui-modal-close-color;

    &:hover {
      color: $aui-modal-close-hover-color;
    }
  }
}

.aui-modal-close-icon-large,
.aui-modal-close-icon-small {
  display: block;
  stroke-width: 1px;
}

.aui-modal-close-icon-large {
  display: none;
}

/**
 * Styles when modal is open:
 */
.aui-modal-open .aui-modal.is-active {
  .aui-modal-dialog {
    opacity: 1;
    transition-delay: $aui-modal-delay;
  }

  .aui-modal-dialog--morph {
    transition-delay: 0s;

    .aui-modal-dialog__body {
      transition-delay: 0s;
    }
  }
}

/**
 * Responsive adaptions:
 */
@media (min-width: $aui-modal-breakpoint) {

  .aui-modal-dialog__body {
    width: 62.5%;
    max-width: $aui-modal-max-width;
  }

  .aui-modal-dialog--fullpage,
  .aui-modal-dialog--window {
    .aui-modal-dialog__close {
      top: 0;
      right: 0;
      width: $aui-modal-close-size-large;
      height: $aui-modal-close-size-large;
    }
  }

  .aui-modal-dialog--fullpage {
    .aui-modal-dialog__body {
      padding-left: 0;
      padding-right: 0;
    }
  }
  .aui-modal-dialog--window,
  .aui-modal-dialog--layer {
    background-color: transparent;
  }

  .aui-modal-dialog--window {
    .aui-modal-dialog__body {
      width: 80%;
      padding-left: $aui-modal-close-size-large;
      padding-right: $aui-modal-close-size-large;
      background-color: $aui-modal-background;
    }
  }

  .aui-modal-dialog--layer {
    padding: 0 $aui-modal-content-padding-x;

    .aui-modal-dialog__body {
      padding: $aui-modal-content-padding-y 0;
    }

    .aui-modal-dialog__content {
      transform: translateY(0);
      background-color: $aui-modal-background;
    }

    .aui-modal-dialog__content {
      padding: $aui-modal-dialog-padding;
    }

    &:not(.aui-modal-dialog--morph) .aui-modal-dialog__body {
      transform: translateY($aui-modal-content-translate-y);
      transition: transform $aui-modal-duration $aui-easing;
    }

    .aui-modal-dialog__close {
      position: absolute;
    }
  }

  .aui-modal-dialog--layer .aui-modal-dialog__body--full,
  .aui-modal-dialog__body--full {
    padding: 0;
  }

  .aui-modal-close-icon-small {
    display: none;
  }

  .aui-modal-close-icon-large {
    display: block;
  }

  /**
   * Styles when modal is open:
   */
  .aui-modal-open .aui-modal.is-active {
    .aui-modal-dialog {
      opacity: 1;
      transition-delay: $aui-modal-delay;
    }

    .aui-modal-dialog__content {
      transform: translateY(0);
      transition-delay: $aui-modal-delay;
    }

    .aui-modal-dialog--layer .aui-modal-dialog__body {
      transform: translateY(0);
      transition-delay: $aui-modal-delay;
    }
  }
}

/**
 * Modal morph
 * Created by JS
 */
.aui-modal-morph {
  position: absolute;
  opacity: 0;
  background-color: $aui-modal-background;
  transition-property: top, left, width, height, opacity;
  transition-duration: $aui-modal-duration;
  transition-timing-function: $aui-easing;
  z-index: $aui-zindex-modal-morph;

  &.is-morphing {
    opacity: 1;
  }
}

/**
 * Modal backdrop
 * Created by JS
 */
.aui-modal-backdrop {
  opacity: 0;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0, .9);
  transition: opacity .6s $aui-easing;
  z-index: $aui-zindex-modal-backdrop;
}

.aui-modal-open .aui-modal-backdrop {
  opacity: 1;
}