/*
 *  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 {
  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;
  }

  &__box {
    @include t-absolute-center-x-y();
    @extend %t-dp--shadow;
    @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);
    background: $o-modal--background;
    width: 100%;
    height: 100%;
    max-width: 95%;
    max-height: 95%;

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

      /* 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;
    }
  }
}