/*
 *  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--padding: 0.5em;

$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%;
  }

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

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

  &__box {
    @include t-absolute-center-x-y();
    width: 100%;
    height: 100%;
    max-width: 95%;
    max-height: 95%;

    &-inner {
      position: relative;
      @extend %t-flexbox;
      @include t-flex-wrap(wrap);
      @include t-flex-direction(column);
      @include t-align-items(flex-start);
      @include t-align-content(flex-start);
      @extend %t-dp--shadow;
      width: 100%;
      height: 100%;
      background: $o-modal--background;

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

    &-body {
      position: relative;
      @include t-flex-grow(1);
      width: 100%;

      /* Unfortunately flex can only get us half way there */
      &-inner {//Hacks our content so it will never overflow its container.
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow-y: auto;
        padding: $o-modal--padding;
      }
    }

    &-footer {
      width: 100%;
      padding: $o-modal--padding;
    }
  }

  @include t-media-query($s-xsmall-up) {
    &__box {
      width: 800px;
      height: 600px;
    }
  }

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

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

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

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

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