@import '../../scss/includes/components';

:host {
  @extend %component-host;
}

@mixin handle-loading-status($status) {
  &.#{$status} {
    border-color: var(--anywhere-#{$status});
  }
}

.wrapper {
  position: relative;
}

/* generated by https://loading.io/ */
@keyframes loading {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.loading-wrapper {
  top: 50%;
  left: 50%;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loading {
  width: 1rem;
  height: 1rem;
  position: relative;
  transform: translateZ(0) scale(1);
  backface-visibility: hidden;
  transform-origin: 0 0;
}
.loading div {
  box-sizing: content-box;
}
.loading div {
  position: absolute;
  width: 1rem;
  height: 1rem;
  border-width: 5px solid;
  border-style: solid;
  border-top-color: transparent !important;
  border-radius: 50%;

  @include handle-loading-status('primary');
  @include handle-loading-status('secondary');
  @include handle-loading-status('success');
  @include handle-loading-status('danger');
  @include handle-loading-status('warn');
  @include handle-loading-status('info');
}
.loading div {
  animation: loading 1s linear infinite;
  top: 0;
  left: 0;
}
