$fill-loading: var(
  --wds-loader-fill-loading,
  var(--wds-color-fill-standard-primary-active, var(--wsr-color-B00, #084ebd))
);
$fill-loading-with-error: var(
  --wds-loader-fill-loading-with-error,
  var(--wds-color-fill-destructive-primary, var(--wsr-color-R00, #b81206))
);
$fill: var(
  --wds-loader-fill,
  var(--wds-color-fill-standard-secondary, var(--wsr-color-B30, #a8caff))
);
$fill-light: var(
  --wds-loader-fill-light,
  var(--wds-color-fill-light-primary, var(--wsr-color-D80, #ffffff))
);
$fill-error: var(
  --wds-loader-fill-error,
  var(--wds-color-fill-destructive-primary, var(--wsr-color-R10, #e62214))
);
$fill-success: var(
  --wds-loader-fill-success,
  var(--wds-color-fill-standard-primary, var(--wsr-color-B00, #084ebd))
);

.loader {
  display: inline-flex;
  flex-direction: column;
  align-items: center;

  & &__status-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  & &__status-indicator svg {
    height: 14px;
    width: 19px;
  }

  &--size-tiny &__status-indicator svg {
    height: 8px;
    width: 10px;
  }

  &--size-small &__status-indicator svg {
    height: 8px;
    width: 11px;
  }

  & &__arcs-container {
    position: relative;
  }

  & &__dark-arc {
    stroke: $fill-loading;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    fill: none;
    stroke-linecap: round;
  }

  & &__light-arc {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    fill: none;
    stroke-linecap: round;
  }

  /* Apply stroke-width from design tokens based on size */
  &--size-tiny &__dark-arc path,
  &--size-tiny &__light-arc path {
    stroke-width: var(--wds-loader-stroke-width-tiny, 3px);
  }

  &--size-small &__dark-arc path,
  &--size-small &__light-arc path {
    stroke-width: var(--wds-loader-stroke-width-small, 4px);
  }

  &--size-medium &__dark-arc path,
  &--size-medium &__light-arc path {
    stroke-width: var(--wds-loader-stroke-width-medium, 4px);
  }

  &--size-large &__dark-arc path,
  &--size-large &__light-arc path {
    stroke-width: var(--wds-loader-stroke-width-large, 4px);
  }

  & &__text {
    margin-top: 18px;
    max-width: 150px;
    word-wrap: break-word;
    text-align: center;
  }

  &--status-success {
    color: $fill-success;
  }

  &--status-success#{&}--size-tiny {
    color: $fill-light;
  }

  &--status-success#{&}--size-tiny &__dark-arc {
    fill: $fill-success;
  }

  &--status-error {
    color: $fill-error;
  }

  &--status-loading-with-errors {
    color: $fill-error;
  }

  &--status-error &__dark-arc {
    stroke: $fill-error;
  }

  &--status-loading-with-errors &__dark-arc {
    stroke: $fill-loading-with-error;
  }

  &--status-success &__dark-arc {
    stroke: $fill-success;
  }

  &--status-error#{&}--size-tiny {
    color: $fill-light;
  }

  &--status-error#{&}--size-tiny &__dark-arc {
    fill: $fill-error;
  }

  &--status-loading-with-errors#{&}--size-tiny &__dark-arc {
    fill: none;
  }

  &--status-loading#{&}--size-tiny &__arcs-container &__light-arc,
  &--status-loading-with-errors#{&}--size-tiny
    &__arcs-container
    &__light-arc {
    animation: loader-rotation 2s linear infinite;
  }

  &--status-loading#{&}--size-tiny &__arcs-container &__dark-arc,
  &--status-loading-with-errors#{&}--size-tiny
    &__arcs-container
    &__dark-arc {
    animation: loader-rotation 666ms linear infinite;
  }

  &--status-loading#{&}--size-small &__arcs-container &__light-arc,
  &--status-loading-with-errors#{&}--size-small
    &__arcs-container
    &__light-arc {
    animation: loader-rotation 2s linear infinite;
  }

  &--status-loading#{&}--size-small &__arcs-container &__dark-arc,
  &--status-loading-with-errors#{&}--size-small
    &__arcs-container
    &__dark-arc {
    animation: loader-rotation 0.5s linear infinite;
  }

  &--status-loading#{&}--size-medium &__arcs-container,
  &--status-loading-with-errors#{&}--size-medium &__arcs-container {
    animation: loader-rotation 2s linear infinite;
  }

  &--status-loading#{&}--size-medium &__arcs-container &__light-arc,
  &--status-loading-with-errors#{&}--size-medium
    &__arcs-container
    &__light-arc {
    animation: loader-rotation 666ms ease-in-out infinite;
  }

  &--status-loading#{&}--size-large &__arcs-container,
  &--status-loading-with-errors#{&}--size-large &__arcs-container {
    animation: loader-rotation 2s linear infinite;
  }

  &--status-loading#{&}--size-large &__arcs-container &__light-arc,
  &--status-loading-with-errors#{&}--size-large
    &__arcs-container
    &__light-arc {
    animation: loader-staggered-rotation 2s ease-in-out infinite;
  }

  &--color-blue &__light-arc {
    stroke: $fill;
  }

  &--color-white &__light-arc {
    stroke: $fill-light;
  }

  @media (prefers-reduced-motion) {
    &--status-loading &__arcs-container,
    &--status-loading &__arcs-container &__light-arc,
    &--status-loading &__arcs-container &__dark-arc,
    &--status-loading-with-errors &__arcs-container,
    &--status-loading-with-errors &__arcs-container &__light-arc,
    &--status-loading-with-errors &__arcs-container &__dark-arc {
      animation: none !important;
    }
  }
}

@keyframes loader-rotation {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes loader-staggered-rotation {
  50% {
    transform: rotate(180deg);
  }

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