.PopoutWrapper {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  left: 0;
  top: 0;
  }

  .PopoutWrapper--closing .PopoutWrapper__mask {
    opacity: 0;
    }

  .PopoutWrapper__mask {
    opacity: 1;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, .4);
    animation: animation-full-fade-in .3s ease;
    user-select: none;
    }

  .PopoutWrapper__container {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    box-sizing: border-box;
    z-index: 2;
    }

  .PopoutWrapper--v-center .PopoutWrapper__container {
    align-items: center;
    }

  .PopoutWrapper--v-bottom .PopoutWrapper__container {
    align-items: flex-end;
    }

  .PopoutWrapper--v-top .PopoutWrapper__container {
    align-items: flex-start;
    }

  .PopoutWrapper--h-center .PopoutWrapper__container {
    justify-content: center;
    }

  .PopoutWrapper--h-left .PopoutWrapper__container {
    justify-content: flex-start;
    }

  .PopoutWrapper--h-right .PopoutWrapper__container {
    justify-content: flex-end;
    }

/**
 * iOS version
 */

.PopoutWrapper--ios.PopoutWrapper--closing .PopoutWrapper__mask {
  transition: opacity .3s var(--ios-easing);
  }

/**
 * Android version
 */

.PopoutWrapper--android.PopoutWrapper--closing .PopoutWrapper__mask {
  transition: opacity .2s var(--android-easing);
  }

@keyframes animation-full-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}