MetaPhase-Consulting/State-TalentMAP

.tm-spinner {

  margin: auto;
  width: 100px;
  z-index: $spinner-z; // make sure spinner is on top

  img {
    position: absolute;
    width: 10em;
  }
  //jsoneditor library uses spin as a class, so spin -> logo-spin
  .center {
    -moz-animation: logo-spin 3s linear infinite;
    -webkit-animation: logo-spin 3s linear infinite;
    animation: logo-spin 3s linear infinite;
  }

  .middle {
    -moz-animation: logo-spin 4s linear infinite;
    -webkit-animation: logo-spin 4s linear infinite;
    animation: logo-spin 4s linear infinite;
  }

  .outer {
    -moz-animation: logo-spin 5s linear infinite;
    -webkit-animation: logo-spin 5s linear infinite;
    animation: logo-spin 5s linear infinite;
  }

  @-moz-keyframes logo-spin { 100% { -moz-transform: rotate(360deg); } }
  @-webkit-keyframes logo-spin { 100% { -webkit-transform: rotate(360deg); } }
  @keyframes logo-spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
}

.tm-spinner-color-inverted {
  color: $color-white;
}

.tm-spinner-small {
  img {
    height: 50px;
    width: 50px;
  }
}

.tm-spinner-medium{
  img {
    height: 75px;
    width: 75px;
  }
}

.tm-spinner-results-filter {
  left: 40%;
  position: absolute;
  top: 7px;
}

.tm-spinner-homepage-position-results {
  left: 45%;
  position: absolute;
  top: 7px;
}

.tm-spinner-gsa-location-results {
  left: 45%;
  position: absolute;
}

.tm-spinner-saved-searches {
  left: 40%;
  position: absolute;
  top: 7px;
}

.tm-spinner-portfolio-additional {
  left: 45%;
  position: absolute;
  top: 50px;
}

.tm-spinner-position-results {
  left: 40%;
  position: absolute;
  top: 20px;
}

.tm-spinner-position-details {
  left: 45%;
  position: absolute;
  top: 20px;
}

.tm-spinner-favorites {
  float: left;
  margin: 2px 6px 0 0;
}

.tm-spinner-glossary {
  left: 30%;
  position: absolute;
  top: 100px;
}

.tm-spinner-bureau-results {
  left: 45%;
  position: absolute;
  top: 450px;
  z-index: $bureau-spinner-z;
}

.tm-spinner-standard-center {
  left: 50%;
  position: absolute;
  top: 40%;
}

@media screen and (max-width: 1400px) {
  .tm-spinner-standard-center {
    left: 60%;
  }
}

.tm-spinner-bureau-filters {
  left: 45%;
  position: absolute;
  top: 50px;
}

.tm-spinner-post-access-filters {
  left: 50%;
  position: absolute;
  top: 50px;
}

.tm-spinner-job-categories-results {
  left: 45%;
  position: absolute;
  top: 60px;
}

.tm-spinner-job-categories-dropdown {
  left: 22%;
  position: absolute;
  top: 145px;
}


.tm-spinner-manage-el-filters {
  left: 45%;
  position: absolute;
  top: 30px;
}

.tm-spinner-manage-el-positions {
  left: 45%;
  position: absolute;
  top: 300px;
}

$favorite-spinner-border-width: 3px;
$favorite-spinner-size: 14px;

.bid-list-button,
.favorite-container {
  .ds-c-spinner {
    color: $tm-navy;
    height: $favorite-spinner-size;
    top: 2px;
    width: $favorite-spinner-size;

    &::before,
    &::after {
      border-width: $favorite-spinner-border-width;
      height: $favorite-spinner-size;
      width: $favorite-spinner-size;
    }
  }
}

.bid-list-button {
  .ds-c-spinner {
    color: $color-white;
  }
}

// Favorite's Loading Spinner
.favorite-container {
  &.usa-button {
    .ds-c-spinner {
      // scss-lint:disable PseudoElement
      &,
      &::before,
      &::after {
        height: $favorite-spinner-size - 1;
        width: ($favorite-spinner-size - 1);
      }
      // scss-lint:enable PseudoElement
    }
  }

  .spinner-white {
    color: $color-white;
    margin-right: .5em;
  }

  .spinner-blue {
    color: $blue-primary;
    margin-right: .5em;
  }
}

.btn-icon-to-spinner {
  &.usa-button {
    .ds-c-spinner {
      &,
      &::before,
      &::after {
        height: 12px;
        width: 12px;
      }
    }
  }
  .btn-icon-to-spinner-text {
    padding-left: 10px;
  }
}

.tm-spinner-panel-admin-remarks {
  left: 35%;
  position: absolute;
  top: 7px;
}

.button-tiny-loading-spinner {
  align-items: center;
  display: flex;
  justify-content: center;
}
.tiny-loading-spinner {
  -webkit-animation: tiny-loading-spin 1s linear infinite; /* Safari */
  animation: tiny-loading-spin 1s linear infinite;
  border: 3px solid $bg-gray-medium-0;
  border-radius: 50%;
  border-top: 3px solid $primary-blue;
  height: 15px;
  left: -10px;
  position: relative;
  width: 15px;
}
/* Safari */
@-webkit-keyframes tiny-loading-spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes tiny-loading-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}