@use "../../../1-settings/color-swatches";
@use "../../../1-settings/class-vars";

#{class-vars.$base-class} {
  .spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    vertical-align: middle;
    position: relative;
    svg {
      display: block;
      path {
        fill: none;
      }
    }
    &--indeterminate {
      .spinner__animation {
        animation: spinner-animation 0.5s linear infinite;
      }
    }
    &__track {
      stroke: color-swatches.$neutral-gray-12;
    }
    &__value {
      stroke: var(--form-ele-color);
      stroke-linecap: round;
      transform-origin: center;
      transition: stroke-dashoffset 0.2s cubic-bezier(0.4, 1, 0.75, 0.9);
    }
    &__children {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }

  @keyframes spinner-animation {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(1turn);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .spinner {
      &--indeterminate .spinner__animation {
        animation: spinner-animation 2s linear 4;
      }
    }
  }
}