@import '../helpers/helpers';

.loader-full-page {
  position: fixed;
  z-index: 10000000000;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  transform: translate3d(0, 0, 0);
  background: $black-transparent10 $radial-black-gradient;
  color: $white;

  &__modal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    text-align: center;

    .paypal-checkout-logo {
      margin-bottom: 25px;
    }

    .spinner {
      height: 30px;
      width: 30px;
      display: inline-block;
      box-sizing: content-box;
      opacity: 1;
      animation: spin .7s infinite linear;
      border: 8px solid $black-transparent20;
      border-top-color: $white;
      border-radius: 100%;
    }

    @keyframes spin {
      to {
        transform: rotateZ(360deg);
      }
    }
  }
}

.loader-line {
  width: 200px;
  height: 3px;
  position: relative;
  overflow: hidden;
  background-color: $gray;
  border-radius: 20px;

  &::before {
    content: '';
    position: absolute;
    left: -50%;
    height: 3px;
    width: 40%;
    background-color: $gray-dark;
    animation: lineAnim 1s linear infinite;
    border-radius: 20px;
  }

  @keyframes lineAnim {
    0% {
      left: -40%;
    }

    50% {
      left: 20%;
      width: 80%;
    }

    100% {
      left: 100%;
      width: 100%;
    }
  }
}
