// ┌────────┐
// │ Modals │
// └────────┘
//  ↳ http://esri.github.io/calcite-web/documentation/patterns/#modals
//  ↳ patterns → _modals.md

@mixin modal-overlay() {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  overflow-y: hidden;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  background: $transparent-black;
  @include transition(visibility 0ms linear 300ms, opacity 300ms $easing-function);
  z-index: 101;
  &.is-active {
    visibility: visible;
    opacity: 1;
    @include transition-delay(0ms);
    .modal-content {
      visibility: visible;
      opacity: 1;
      @include transition-delay(0ms);
      @include transform(translate3d(0,0,0))
    }
  }
}

  @mixin modal-content() {
    box-sizing: border-box;
    max-height: 80vh;
    z-index: 102;
    float: none;
    @include text-left();
    @if ($include-right-to-left) {
      html[dir="rtl"] & {
        float: none;
      }
    }
    background: $white;
    padding: $baseline;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: inline-block;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    opacity: 0;
    visibility: hidden;
    @include transition-prefixed(transform 300ms $easing-function, visibility 0ms linear 300ms, opacity 300ms $easing-function);
    @include transform(translate3d(0, 20px, 0));
  }

@if $include-modal == true {
  .modal-overlay { @include modal-overlay() ;}
  .modal-content { @include modal-content() ;}
}
