_loader.scss

.stdcm-loader {
  z-index: 2;
  padding: 16px 16px 18px;
  border-radius: 24px;
  background-color: var(--white100);
  width: 466px;
  box-shadow:
    0 6px 21px -5px rgba(24, 68, 239, 0.26),
    0 16px 30px -5px rgba(0, 0, 0, 0.16),
    0 3px 5px -2px rgba(0, 0, 0, 0.1);

  &.loader-fixed-bottom {
    position: fixed;
    bottom: 32px;
    top: unset;

    &.with-slide-animation {
      animation: slideUp 0.8s ease-in-out;
    }
  }

  &.loader-absolute {
    position: absolute;
    bottom: calc(-176px + 40px); // height of the loader minus the height of the launch button

    &.with-fade-in-animation {
      animation: fade-in 0.5s ease-in-out;
    }
  }

  &.loader-fixed-top {
    position: fixed;
    top: 32px;
    bottom: unset;
  }

  @keyframes fade-in {
    0% {
      opacity: 0.1;
    }
    100% {
      opacity: 1;
    }
  }

  @keyframes slideUp {
    0% {
      transform: translateY(100%);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }

  .stdcm-loader__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 8px;
    background-color: var(--info5);

    h2 {
      color: var(--info60);
      font-size: 1.5rem;
      font-weight: 400;
      line-height: 32px;
      margin-block: 15px 0;
      animation: fade 1.6s infinite;
    }

    @keyframes fade {
      0%,
      100% {
        opacity: 1;
      }
      50% {
        opacity: 0.25;
      }
    }
  }

  .stdcm-loader__cancel-btn {
    margin-block: 18px 23px;

    button {
      font-size: 0.875rem;
      font-weight: 500;
    }
  }

  .stdcm-loader__info-message {
    color: var(--grey80);
    font-size: 0.75rem;
    font-weight: 400;
    margin-block: 14px 0;
    text-align: center;
  }
}