//                   d8b
//                   Y8P
//
// .d8888b  88888b.  888 88888b.  88888b.   .d88b.  888d888 .d8888b
// 88K      888 "88b 888 888 "88b 888 "88b d8P  Y8b 888P"   88K
// "Y8888b. 888  888 888 888  888 888  888 88888888 888     "Y8888b.
//      X88 888 d88P 888 888  888 888  888 Y8b.     888          X88
//  88888P' 88888P"  888 888  888 888  888  "Y8888  888      88888P'
//          888
//          888
//          888

@keyframes spCircRot {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

.spinner {
  height: $space-xl;
  margin: $space-m auto;
  width: $space-xl;

  .button-spinner & {
    margin: 0 auto;
  }
}

.button-loader {
  position: absolute;
}

.invisible-text {
  &,
  &::selection {
    color: transparent;
  }
}

.spinner-circle {
  animation: spCircRot 0.6s infinite linear;
  border: 4px rgba($color-theme-base-spinner, 0.25) solid;
  border-top-color: rgba($color-theme-base-spinner, 0.75);
  border-radius: $border-radius-circle;

  .on-dark & {
    border-color: rgba($color-theme-dark-spinner, 0.25);
    border-top-color: rgba($color-theme-dark-spinner, 0.75);
  }
}

.spinner-s {
  height: ($space-s + $space-xs);
  width: ($space-s + $space-xs);
}

.spinner-wrapper {
  color: $color-theme-base-spinner;
  font-size: $font-size-xs;
  font-weight: $font-weight-bold;
  margin-bottom: 0;
  text-align: center;

  p:last-child {
    margin-bottom: $space-m;
  }

  .on-dark & {
    color: $color-theme-dark-text;
  }
}

.table-spinner {
  background-color: color(white, 100, 10);
}