@import '../../styles/common/colors';
@import '../../styles/common/screen';
@import '../../styles/common/mixins';
@import '../../styles/common/functions';

@mixin sharedSpinnerSettings {
  align-items: center;
  bottom: 0;
  justify-content: center;
  left: 0;
  right: 0;
  top: 0;
}

.spinner-wrap {
  background-color: $white;
  display: none;

  &.loading {
    display: flex;
  }

  &.inline {
    display: inline-flex;
  }

  &.absolute {
    @include sharedSpinnerSettings;
    position: absolute;
    z-index: z('spinner-absolute');
  }

  &.fixed {
    @include sharedSpinnerSettings;
    position: fixed;
    z-index: z('spinner-fixed');
  }

  &.is-hidden {
    display: none;
  }
}

.spinner-dots {
  animation: dots-rotate 2.0s infinite linear;
  height: 40px;
  position: relative;
  width: 40px;

  .dot1, .dot2 {
    animation: dots-bounce 2.0s infinite ease-in-out;
    background-color: $primary-1;
    border-radius: 100%;
    display: inline-block;
    height: 60%;
    position: absolute;
    top: 0;
    width: 60%;
  }

  .dot2 {
    animation-delay: -1.0s;
    background-color: $danger;
    bottom: 0;
    top: auto;
  }
}

@keyframes dots-rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes dots-bounce {
  0%, 100% {
    transform: scale(0.0);
  } 50% {
    transform: scale(1.0);
  }
}

.spinner-bounce {
  .bounce1, .bounce2, .bounce3 {
    animation: bounce-bouncedelay 1.4s infinite ease-in-out both;
    background-color: $neutral-4;
    border-radius: 100%;
    display: inline-block;
    height: 12px;
    margin-right: 3px;
    width: 12px;
  }
  .bounce1 {
    animation-delay: -0.32s;
  }
  .bounce2 {
    animation-delay: -0.16s;
  }
  .bounce3 {
    margin-right: 0;
  }
}

@keyframes bounce-bouncedelay {
  0%, 80%, 100% {
    transform: scale(0);
  } 40% {
    transform: scale(1.0);
  }
}