.amplify-loader {
  width: var(--amplify-components-loader-width);
  height: var(--amplify-components-loader-height);
  font-size: var(--amplify-components-loader-font-size);
  fill: none;
  stroke: var(--amplify-components-loader-stroke-empty);

  // these are css variables used to keep the structure flat but allow multiple states to effect the value
  --amplify-internal-loader-linear-font-size: var(
    --amplify-components-loader-linear-font-size
  );
  --amplify-internal-loader-linear-stroke-width: var(
    --amplify-components-loader-linear-stroke-width
  );

  circle:last-of-type {
    transform-origin: center center;
    animation-name: amplify-loader-circular;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: var(--amplify-components-loader-animation-duration);
    @media (prefers-reduced-motion) {
      animation: none;
      stroke-dasharray: 100% 200%;
      stroke-dashoffset: 50%;
    }
    stroke: var(--amplify-components-loader-stroke-filled);
    stroke-linecap: var(--amplify-components-loader-stroke-linecap);
  }

  line:last-of-type {
    stroke: var(--amplify-components-loader-linear-stroke-filled);
    stroke-dasharray: 50% 200%; // This will affect the animation. We don't want this to be overridden
    animation-name: amplify-loader-linear;
    animation-duration: var(
      --amplify-components-loader-linear-animation-duration
    );
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    @media (prefers-reduced-motion) {
      animation: none;
      stroke-dashoffset: -50%;
    }
  }

  &--small {
    width: var(--amplify-components-loader-small-width);
    height: var(--amplify-components-loader-small-height);
    font-size: var(--amplify-components-loader-small-font-size);
    // set the internal css variables for the small and linear state
    --amplify-internal-loader-linear-stroke-width: var(
      --amplify-components-loader-linear-small-stroke-width
    );
    --amplify-internal-loader-linear-font-size: var(
      --amplify-components-loader-linear-small-font-size
    );
  }

  &--large {
    width: var(--amplify-components-loader-large-width);
    height: var(--amplify-components-loader-large-height);
    font-size: var(--amplify-components-loader-large-font-size);
    // set the css variables for the large and linear state
    --amplify-internal-loader-linear-stroke-width: var(
      --amplify-components-loader-linear-large-stroke-width
    );
    --amplify-internal-loader-linear-font-size: var(
      --amplify-components-loader-linear-large-font-size
    );
  }

  &--linear {
    width: var(--amplify-components-loader-linear-width);
    min-width: var(--amplify-components-loader-linear-min-width);
    stroke: var(--amplify-components-loader-linear-stroke-empty);
    stroke-linecap: var(--amplify-components-loader-linear-stroke-linecap);
    // use the internal css variables that have the small/large states set to them
    stroke-width: var(--amplify-internal-loader-linear-stroke-width);
    font-size: var(--amplify-internal-loader-linear-font-size);
  }

  // This is not supposed to be customized by users
  &--determinate {
    circle:last-of-type {
      animation: none;
      transform: rotate(-90deg);
    }

    line:last-of-type {
      animation: none;
      stroke-dashoffset: 0%;
      stroke-dasharray: none;
    }
  }

  &__percentage-text {
    fill: var(--amplify-components-loader-text-fill);
    stroke: none;
  }
}

@keyframes amplify-loader-circular {
  0% {
    stroke-dasharray: 100% 200%;
    transform: rotate(120deg);
  }
  50% {
    stroke-dasharray: 20% 400%;
  }
  100% {
    stroke-dasharray: 100% 200%;
    transform: rotate(480deg);
  }
}

@keyframes amplify-loader-linear {
  0% {
    stroke-dashoffset: 200%;
  }
  100% {
    stroke-dashoffset: -50%;
  }
}