/*
 *  Modal
 *    Popup box designed to alert, or offer a unique interaction method.
 *
 *  Dependencies:
 *    styles/tools/_absolute-centering.scss
 *    styles/tools/_shadow.scss
 *    styles/settings/z.scss
 *
 *  Version:
 *    1.0.0 - 2018/07/05
 */
$o-modal--backdrop: rgba(0, 0, 0, 0.7);
$o-modal--background: white;

$o-modal--transition: 0.2s $s-animation--ease-out;

.o-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: $s-z--modal;

  &__inner {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: auto;
  }

  &__backdrop {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: $o-modal--backdrop;

    //Transition Properties
    transition: opacity #{$o-modal--transition};
    opacity: 0;
  }

  &__box {
    @extend %t-dp--shadow;
    background: $o-modal--background;
    position: relative;
    width: 100%;
    margin: 5em auto;

    //Transition properties
    transition: all #{$o-modal--transition};
    @include t-scale(0.4);
    opacity: 0;

    &-heading,
    &-body,
    &-footer {
      padding: 1em;
    }
  }

  &__title {
    margin: 1em 0 0.5em;
  }


  //Media Queries
  @include t-media-query($s-xsmall-up) {
    &__box {
      max-width: 600px;

      &.is-large {
        max-width: 900px;
      }
    }
  }


  //Transition related
  &__transition {
    &-container {}//Top level container

    //Entry animation
    &-enter {
      &-active {}
      &-done {}

      &-active,&-done {
        .o-modal__backdrop {
          opacity: 1;
        }

        .o-modal__box {
          @include t-scale(1);
          opacity: 1;
        }
      }
    }

    //Exit animation
    &-exit {
      &-active {}
      &-done {
      }
    }
  }
}