@import '../variables/default.scss';
@import '../mixins/index.scss';

@keyframes loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.at-loading {
  display: inline-block;
  position: relative;
  width: $at-loading-size;
  height: $at-loading-size;

  &__circle {
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center center;

    /* prettier-ignore */
    background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20140%20140%22%3E%3Ccircle%20cx%3D%2270%22%20cy%3D%2270%22%20r%3D%2230%22%20stroke%3D%22'+rgba($at-loading-color, 0.999) +'%22%20stroke-width%3D%22'+4*$hd+'%22%20stroke-linecap%3D%22round%22%20fill%3D%22none%22%20transform%3D%22rotate\(0%2070%2070\)%22%3E%3CanimateTransform%20attributeName%3D%22transform%22%20type%3D%22rotate%22%20repeatCount%3D%22indefinite%22%20dur%3D%221.5s%22%20values%3D%22-90%2070%2070%3B%2015%2070%2070%3B270%2070%2070%22%20keyTimes%3D%220%3B0.5%3B1%22%3E%3C%2FanimateTransform%3E%3Canimate%20attributeName%3D%22stroke-dasharray%22%20repeatCount%3D%22indefinite%22%20dur%3D%221.5s%22%20values%3D%221%20200%3B50%20200%3B1%20200%22%20keyTimes%3D%220%3B0.5%3B1%22%3E%3C%2Fanimate%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%2270%22%20cy%3D%2270%22%20r%3D%2250%22%20stroke%3D%22'+rgba($at-loading-color, 0.999) +'%22%20stroke-width%3D%22'+4*$hd+'%22%20stroke-linecap%3D%22round%22%20fill%3D%22none%22%20transform%3D%22rotate\(0%2070%2070\)%22%3E%3CanimateTransform%20attributeName%3D%22transform%22%20type%3D%22rotate%22%20repeatCount%3D%22indefinite%22%20dur%3D%221.5s%22%20values%3D%22180%2070%2070%3B360%2070%2070%3B900%2070%2070%22%20keyTimes%3D%220%3B0.5%3B1%22%3E%3C%2FanimateTransform%3E%3Canimate%20attributeName%3D%22stroke-dasharray%22%20repeatCount%3D%22indefinite%22%20dur%3D%221.5s%22%20values%3D%2225%20500%3B70%20500%3B25%20500%22%20keyTimes%3D%220%3B0.5%3B1%22%3E%3C%2Fanimate%3E%3C%2Fcircle%3E%3C%2Fsvg%3E');
  }

  &__ring {
    box-sizing: border-box;
    display: block !important;
    position: absolute !important;
    width: $at-loading-size;
    height: $at-loading-size;

    /* prettier-ignore */
    margin: 1PX;

    /* prettier-ignore */
    border-width: 1PX;
    border-style: solid;
    border-color: $at-loading-color transparent transparent transparent;
    border-radius: 50%;
    animation: loading 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;

    &:nth-child(1) {
      animation-delay: -0.45s;
    }

    &:nth-child(2) {
      animation-delay: -0.3s;
    }

    &:nth-child(3) {
      animation-delay: -0.15s;
    }
  }
}