@import '../helpers/helpers';

.payment-loader {
  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;

  &--hidden {
    display: none;
  }

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

    .paypal-checkout-logo,
    .klarna-checkout-logo,
    .billie-checkout-logo,
    .clearpay-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%;
    }

    .klarna-spinner {
      height: 26px;
      width: 26px;
    }

    @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%;
    }
  }
}

.klarna-spinner-logo {
  display: block;
  background: url('../img/klarna-spinner.svg') no-repeat;
  height: 32px;
  width: 136px;
}

.google-spinner-logo {
  display: block;
  background: url('../img/google-spinner.svg') no-repeat;
  height: 55px;
  width: 135px;
  margin-bottom: 20px;
}

.clearpay-spinner-logo {
  display: block;
  background: url('../img/clearpay-spinner.svg') no-repeat;
  height: 28px;
  width: 135px;
  margin-bottom: 20px;
}

.billie-spinner-logo {
  display: block;
  background: url('../img/billie-spinner.svg') no-repeat;
  height: 38px;
  width: 111px;
}

.apple-spinner-logo {
  height: 58px;
  width: 136px;
}

.loader-wrapper {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, .5);
  display: flex;
  justify-content: center;
  align-items: center;

  .loader-spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0;

    .circular-loader {
      width: 76px;
      height: 76px;
      stroke-width: 2px;
      animation: rotate 2s linear infinite;
      stroke: $blue;
    }

    .loader-path {
      stroke: $blue;
      animation: animate-stroke 1.5s ease-in-out infinite;
    }
  }

  &--full-page {
    z-index: 150;
    position: fixed;
    background: rgba(255, 255, 255, .8);

    .loader-container {
      width: calc(100% - 40px);
      margin: 0 20px;
    }

    & .loader {
      border-top-color: $blue;
      position: relative;
    }

    & .loader-message {
      margin-top: 25px;
      color: $blue-dark;
      font-size: 1.625rem;
      font-weight: 500;
      text-align: center;
    }
  }

  &.smart-banner-loader {
    background: $white-transparent90;
    flex-direction: column;
    row-gap: 8px;

    .loader-spinner {
      .circular-loader {
        width: 24px;
        height: 24px;
        stroke-width: 6px;
      }
    }

    h2 {
      color: $blue-dark;
      text-align: center;
      font-style: normal;
      font-weight: 500;
      font-size: .75rem;
      line-height: 16px;
      margin-bottom: 0;
    }
  }
}


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

@keyframes animate-stroke {
  from {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35;
  }

  to {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124;
  }
}

.basket-loader,
.add-all-loader {
  flex-direction: column;
  z-index: 101;
  position: fixed;
  background: rgba(255, 255, 255, .8);

  h2 {
    margin-top: 25px;
    font-size: 1.625rem;
    font-weight: 400;
    line-height: 2.25rem;
    color: $blue-dark;
    text-align: center;
  }
}

.add-list-id-loader {
  display: flex;
  height: auto;
  position: relative;
  flex-direction: column-reverse;
  padding: 0 15px;

  h2 {
    font-weight: 500;
    line-height: 1.35;
    font-size: 1.625rem;
    margin-bottom: 10px;
  }
}

@include media-breakpoint-up(sm) {
  .empty-basket-loader h2 {
    font-size: 2.125rem;
    margin-bottom: 20px;
  }
}

@include media-breakpoint-up(md) {
  .basket-loader,
  .add-all-loader {
    h2 {
      font-size: 2.125rem;
      line-height: 2.875rem;
    }
  }

  .loader-wrapper {
    &--full-page {
      & .loader-message {
        font-size: 2.125rem;
      }
    }
  }
}