/* -----------------------------------------------
Loading
----------------------------------------------- */

.b-loading {
  display: flex;
  &:after {
    content: '';
    width: 50px;
    height: 50px;
    max-width: 50px;
    max-height: 50px;
    margin: auto 0.5rem;
    border: 2px solid rgba(100, 100, 100, 0.35);
    border-top: 2px solid #00abf7;
    border-radius: 50%;
    z-index: 90;
    animation: loadingSpin 0.6s linear infinite;
    transition: all 0.6s ease-in-out;
  }
}

/* Loading: Sizes */
.b-loading-sm:after {
  width: 20px;
  height: 20px;
  max-width: 20px;
  max-height: 20px;
}

.b-loading-lg:after {
  width: 70px;
  height: 70px;
  max-width: 70px;
  max-height: 70px;
}

.b-loading-xl:after {
  width: 100px;
  height: 100px;
  min-width: 100px;
  min-height: 100px;
}

.b-loading-fullscreen {
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  margin: auto;
  z-index: 2000;
  background: rgba(20, 43, 68, 0.9);
  &:after {
    width: 100px;
    height: 100px;
    max-width: 100px;
    max-height: 100px;
  }
}

/* Loading: Position */
.b-loading.center {
  width: 100%;
  display: flex;
  margin: auto;
  justify-content: center;
  align-items: center;
}

/* Loading: Visibility States */
.b-loading.is-visible {
  visibility: visible;
  display: inline-flex;
  vertical-align: middle;
  &:after {
    opacity: 1;
    display: inline-flex;
  }
}

.b-loading.is-hidden {
  display: unset;
  visibility: hidden;
  width: 0;
  height: 0;
  margin: unset;
  &:after {
    margin: 0;
    opacity: 0;
    visibility: hidden;
  }
}

/* Button loaders */
.btn,
.b-button {
  .b-loading {
    display: inline-flex;
  }
  .b-loading:after {
    border: 2px solid rgba(0, 0, 0, 0.15);
    border-top-color: #fff;
  }
}

/* Loading: Animation */
@keyframes loadingSpin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}