@import '../style/functions.scss';
@import '../style/theme.scss';
@import '../style/mixins.scss';

$spin-prefix: 'dk-spin';

.#{$spin-prefix} {
  @include reset-component();
  display: none;
  position: absolute;
  transition: transform 0.3s cubic-bezier(.78, .14, .15, .86);
  vertical-align: middle;
  text-align: center;
  opacity: 0;

  &.#{$spin-prefix}-spinning {
    opacity: 1;
    position: static;
    display: inline-block;
  }

  &-circle {
    position: relative;
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-left: 2px solid $primary;
    animation: spinRotate 1s infinite linear;
    box-sizing: border-box;
  }

  &-large {
    width: 32px;
    height: 32px;
  }

  &-small {
    width: 18px;
    height: 18px;
  }

  &-text {
    margin-top: 5px;
    color: $primary;
    font-size: 13px;
  }

  &-box {
    position: relative;
  }

  &-container {
    position: relative;
  }

  &-blur {
    pointer-events: none;
    user-select: none;
    overflow: hidden;
    opacity: 0.7;
    filter: blur(0.5px);

    &:after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background: $white;
      opacity: 0.3;
      transition: all .3s;
      z-index: 10;
    }
  }

  &-loading {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

    .#{$spin-prefix} {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}

@keyframes spinRotate {
  0% {
    transform: rotate(120deg)
  }
  100% {
    transform: rotate(-240deg)
  }
}