$prefix: "adui-spinner";

.#{$prefix} {
  &-base {
    display: inline-block;
    text-align: center;
    font-size: 0;
    line-height: 0;
  }
  &-normal {
    color: var(--primary-color);
  }
  &-primary {
    color: var(--primary-color);
  }
  &-success {
    color: var(--ad-green);
  }
  &-warning {
    color: var(--ad-orange);
  }
  &-danger {
    color: var(--ad-red);
  }
  &-spinning {
    .#{$prefix}-circular {
      animation: rotate 2.25s linear infinite;
      transform-origin: center;
    }
    .#{$prefix}-head {
      animation: dash 5s cubic-bezier(0.35, 0, 0.25, 1) infinite;
    }
  }
  &-circular {
    display: inline-block;
    transform: rotate(-90deg);

    path {
      fill-opacity: 0;
    }
  }
  &-track {
    stroke: var(--gray-500);
    opacity: 0.4;
  }
  &-head {
    transform-origin: center center;
    transition: stroke-dashoffset 0.2s cubic-bezier(0.4, 1, 0.75, 0.9);
    stroke: currentColor;
    stroke-linecap: round;
  }
  &-text {
    margin-top: 4px;
    text-align: center;
    font-size: 13px;
    line-height: 20px;
    color: currentColor;
  }

  &-nestedWrapper {
    position: relative;

    .#{$prefix}-base {
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      width: 100%;
      height: 100%;
      z-index: 11;
    }
  }
  &-container {
    position: relative;
    transition: opacity var(--motion-duration-base) var(--ease-in-out);
  }
  &-blur {
    pointer-events: none;
    user-select: none;
    opacity: 0.4;
    -webkit-filter: blur(0.5px);
    filter: blur(0.5px);

    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #fff;
      opacity: 0.3;
      transition: all var(--motion-duration-base) var(--ease-in-out);
      z-index: 10;
    }
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes dash {
  0% {
    stroke-dashoffset: 268.60617px;
    transform: rotate(0);
    stroke-opacity: 0.7;
  }
  12.5% {
    stroke-dashoffset: 56.54867px;
    transform: rotate(0);
    stroke-opacity: 1;
  }
  12.5001% {
    stroke-dashoffset: 56.54867px;
    transform: rotateX(180deg) rotate(72.5deg);
    stroke-opacity: 1;
  }
  25% {
    stroke-dashoffset: 268.60617px;
    transform: rotateX(180deg) rotate(72.5deg);
    stroke-opacity: 0.7;
  }
  25.0001% {
    stroke-dashoffset: 268.60617px;
    transform: rotate(270deg);
    stroke-opacity: 0.7;
  }
  37.5% {
    stroke-dashoffset: 56.54867px;
    transform: rotate(270deg);
    stroke-opacity: 1;
  }
  37.5001% {
    stroke-dashoffset: 56.54867px;
    transform: rotateX(180deg) rotate(161.5deg);
    stroke-opacity: 1;
  }
  50% {
    stroke-dashoffset: 268.60617px;
    transform: rotateX(180deg) rotate(161.5deg);
    stroke-opacity: 0.7;
  }
  50.0001% {
    stroke-dashoffset: 268.60617px;
    transform: rotate(180deg);
    stroke-opacity: 0.7;
  }
  62.5% {
    stroke-dashoffset: 56.54867px;
    transform: rotate(180deg);
    stroke-opacity: 1;
  }
  62.5001% {
    stroke-dashoffset: 56.54867px;
    transform: rotateX(180deg) rotate(251.5deg);
    stroke-opacity: 1;
  }
  75% {
    stroke-dashoffset: 268.60617px;
    transform: rotateX(180deg) rotate(251.5deg);
    stroke-opacity: 0.7;
  }
  75.0001% {
    stroke-dashoffset: 268.60617px;
    transform: rotate(90deg);
    stroke-opacity: 0.7;
  }
  87.5% {
    stroke-dashoffset: 56.54867px;
    transform: rotate(90deg);
    stroke-opacity: 1;
  }
  87.5001% {
    stroke-dashoffset: 56.54867px;
    transform: rotateX(180deg) rotate(341.5deg);
    stroke-opacity: 1;
  }
  100% {
    stroke-dashoffset: 268.60617px;
    transform: rotateX(180deg) rotate(341.5deg);
    stroke-opacity: 0.7;
  }
}