page-slide-to-accept {
  &[ng-reflect-disabled='true'] {
    opacity: 0;
  }
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 1),
    rgba(255, 255, 255, 1)
  );
  background: -webkit-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 1),
    rgba(255, 255, 255, 1)
  );
  position: fixed;
  bottom: 0;
  padding-bottom: calc(env(safe-area-inset-bottom));
  padding-bottom: -webkit-calc(env(safe-area-inset-bottom));
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  @keyframes bounce {
    0%,
    20%,
    60%,
    100% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }

    40% {
      -webkit-transform: translateX(10px);
      transform: translateX(10px);
    }

    80% {
      -webkit-transform: translateX(-5px);
      transform: translateX(-5px);
    }
  }

  .animation {
    -webkit-animation-duration: 400ms;
    animation-duration: 400ms;
    -webkit-animation-name: bounce;
    animation-name: bounce;
  }

  .button-slider {
    z-index: 10;
    width: 120%;
    border-bottom-right-radius: 45px;
    border-top-right-radius: 45px;
    margin-left: -119%;
    height: 100%;
    background: $slider-bg-button !important;
    &.doge {
      background: linear-gradient(180deg, #d8c172 0%, #bb9f32 100%) !important;
    }
  }

  @mixin center-vertically {
    border-radius: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 77px;
    margin: 25px auto;
    width: 300px;
  }

  .slide {
    &__listener {
      @include center-vertically;
      box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.28);
      overflow: hidden;
      position: relative;
      background: $slider-bg-color;
      z-index: 11;
      // &:hover, &:active, &:focus {
      //   .button-slider {
      //     animation: bounce 1s;
      //   }
      // }

      ///// Animation ///////
      opacity: 0;
      transform: translateY(-20px);
      transition: opacity 200ms ease, transform 200ms ease;
      &.show {
        opacity: 1;
        pointer-events: all;
        transform: translateY(0);
      }
      ///////////////////////

      .enter {
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        border-radius: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: $slider-bg-button;
        height: 100%;
      }
    }
    &__slider {
      @include center-vertically;
      box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.28);
      background: $slider-bg-color;
      -webkit-transform: translateX(100);
      transform: translateX(100);
      margin-left: -92%;
      z-index: 200;

      &::before {
        @include center-vertically;
        content: '';
        width: 10000px;
        left: -10000px + 1;
        background: $slider-bg-color;
      }

      &::after {
        @include center-vertically;
        content: '';
        width: 150px;
        right: -10px;
        background: $slider-bg-color;
      }

      &__tip {
        @include center-vertically;
        width: 124px;
        height: 116px;
        background: $slider-bg-color;
        right: -71px;
        border-radius: 50%;
        top: 50%;
        -webkit-transform: translateY(-47%);
        transform: translateY(-47%);
      }
    }
    &__bitcoin {
      z-index: 10;
      position: absolute;
      right: 25px;
      top: 20px;
      > img {
        height: 36px;
      }
      &.doge {
        top: 0px;
        right: 0px;
        > img {
          height: 77px;
        }
      }
    }
    &__button-text {
      color: color($colors, blank);
      font-size: 16px;
      font-weight: 500;
      letter-spacing: 0.03rem;
      z-index: 1;
      width: 50%;
      text-overflow: ellipsis;
      display: inline-block;
      clear: both;
      overflow: hidden;
      text-align: center;
    }

    &__status-text {
      border-radius: 38px;
      color: color($colors, blank);
      z-index: 4;
      width: 100%;
      font-size: 17px;
      letter-spacing: 0.02rem;
      -webkit-transform: translateY(2rem);
      transform: translateY(2rem);
      opacity: 0;
      text-align: center;
      ion-spinner * {
        stroke: color($colors, light) !important;
      }

      &.enter {
        transition: transform 2500ms ease, opacity 2500ms ease;
        -webkit-transition: -webkit-transform 2500ms ease, opacity 2500ms ease;
        -webkit-transform: translateY(0);
        transform: translateY(100);
        opacity: 1;
      }

      img {
        width: 17px;
        margin-right: 10px;
        animation-name: spin;
        animation-duration: 500ms;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
      }
    }

    &__arrow {
      position: absolute;
      right: 20px;
      top: 32px;
      opacity: 0.6;
      z-index: 1;
    }
  }

  @keyframes spin {
    from {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    to {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
}
