slide-to-accept-success {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;

  .slide-success {
    $duration: 400ms;
    &__background {
      $start-radius: 5;
      $scale-factor: 20;
      height: 10vmax;
      width: 10vmax;
      background: $v-slider-bg-color;
      bottom: 0;
      position: absolute;
      left: calc(50% - 5vmax);
      border-radius: 50%;
      transition: transform $duration*1.5 ease, background $duration*1.5 ease;

      &.fill-screen {
        -webkit-transform: scale3d($scale-factor, $scale-factor, 1) translateY(-40%);
        transform: scale3d($scale-factor, $scale-factor, 1) translateY(-40%);
        background: $v-success-bg-color;
      }
    }

    &__content {
      position: relative;
      z-index: 1;
      margin-top: -10vh;

      > img {
        width: 45vw;
        max-width: 166px;
        margin-bottom: 1.8rem;
        -webkit-transform: translateY(5rem);
        transform: translateY(5rem);
        opacity: 0;
        transition: transform $duration ease, opacity $duration ease;
        transition-delay: 200ms;

        &.reveal {
          -webkit-transform: translateY(0);
          transform: translateY(0);
          opacity: 1;
        }
      }

      &__header {
        color: #FFFFFF;
        font-size: 29px;
        -webkit-transform: translateY(5rem);
        transform: translateY(5rem);
        opacity: 0;
        transition: transform $duration ease, opacity $duration ease;
        transition-delay: 250ms;

        &.reveal {
          -webkit-transform: translateY(0);
          transform: translateY(0);
          opacity: 1;
        }
      }
      &__share {
        transition: transform $duration ease, opacity $duration ease;
        transition-delay: 600ms;
        opacity: 0;
        margin-top: 15vh;
        span {
          color: #FFF;
          font-size: 22px;
          height: 28px;
        }
        img {
          height: 28px;
          width: auto;
          vertical-align: bottom;
          margin-right: 4px;
        }
        &.reveal {
          opacity: 0.79;
        }
      }
    }

    &__footer {
      position: absolute;
      left: 0;
      bottom: 0;
      padding: 0 1.75rem;
      width: 100%;
      -webkit-transform: translateY(5rem);
      transform: translateY(5rem);
      opacity: 0;
      transition: transform $duration ease, opacity $duration ease;
      transition-delay: 250ms;

      margin-bottom: constant(safe-area-inset-bottom); /* iOS 11.0 */
      margin-bottom: env(safe-area-inset-bottom); /* iOS 11.2 */

      &.reveal {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
      }

      &__btn {
        display: block;
        color: #FFFFFF;
        font-size: 22px;
        font-weight: 600;
        letter-spacing: 2.86px;
        padding: 2rem 0 2.1rem;
        border-top: 1px solid rgba(255, 255, 255, 0.25);
        cursor: pointer;
      }
    }
  }
}