:host,
.ld-circular-progress {
  --ld-circular-progress-valuemin: 0;
  --ld-circular-progress-valuemax: 100;
  --ld-circular-progress-valuenow: 0;
  --ld-circular-progress-size: 7.5rem;
  --ld-circular-progress-transition-duration: var(
    --ld-transition-duration-normal
  );
  --ld-circular-progress-stroke-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 200 200"><circle cx="100" cy="100" r="89" stroke="red" stroke-width="20"/></svg>');

  /* colors */
  --ld-circular-progress-bar-col: var(--ld-thm-primary);
  --ld-circular-progress-bar-col-overflow: var(--ld-thm-error);
  --ld-circular-progress-bg-col: var(--ld-col-neutral-100);
  --ld-circular-progress-bg-col-overflow: var(--ld-thm-error);
  --ld-circular-progress-circle-bg-col: var(--ld-circular-progress-bg-col);
  --ld-circular-progress-circle-bg-col-overflow: var(
    --ld-circular-progress-bg-col-overflow
  );
  /* stylelint-disable-next-line number-max-precision */
  --ld-circular-progress-pi: 3.141592653589793;
  --ld-circular-progress-wht-overlay-col: var(--ld-col-wht-alpha-high);

  /* computed */
  --ld-circular-progress-calc-valuenow: max(
    0,
    calc(
      var(--ld-circular-progress-valuenow) -
        var(--ld-circular-progress-valuemin)
    )
  );
  --ld-circular-progress-calc-valuemax: calc(
    var(--ld-circular-progress-valuemax) - var(--ld-circular-progress-valuemin)
  );
  --ld-circular-progress-calc-relative-progress: calc(
    var(--ld-circular-progress-calc-valuenow) /
      var(--ld-circular-progress-calc-valuemax)
  );
  --ld-circular-progress-has-overflow: clamp(
    0,
    calc(
      (var(--ld-circular-progress-calc-relative-progress) - 1) * 99999999999
    ),
    1
  );

  align-items: center;
  box-sizing: content-box !important;
  display: inline-flex;
  flex-direction: column;
  gap: var(--ld-sp-4);
  height: calc(
    var(--ld-circular-progress-size) - var(--ld-circular-progress-size) * 0.4
  );
  max-width: 100%;
  justify-content: center;
  padding: calc(var(--ld-circular-progress-size) * 0.165)
    calc(var(--ld-circular-progress-size) * 0.2)
    calc(var(--ld-circular-progress-size) * 0.235);
  position: relative;
  width: calc(
    var(--ld-circular-progress-size) - var(--ld-circular-progress-size) * 0.4
  );

  &::before,
  &::after {
    content: '';
    inset: 0;
    mask-image: var(--ld-circular-progress-stroke-mask);
    position: absolute;
    transition: opacity var(--ld-circular-progress-transition-duration) linear;
  }

  &::before {
    background-color: var(--ld-circular-progress-bg-col);
    opacity: calc(1 - var(--ld-circular-progress-has-overflow));
  }

  &::after {
    box-shadow: inset 0 0 0
        calc(var(--ld-circular-progress-has-overflow) * 99rem)
        var(--ld-circular-progress-wht-overlay-col),
      inset 0 0 0 calc(var(--ld-circular-progress-has-overflow) * 99rem)
        var(--ld-circular-progress-bg-col-overflow);
    opacity: var(--ld-circular-progress-has-overflow);
    position: absolute;
  }
}

:host(.ld-circular-progress--brand-color),
.ld-circular-progress--brand-color {
  --ld-circular-progress-bar-col: var(--ld-col-wht);
  --ld-circular-progress-bg-col: var(--ld-thm-primary-focus);
  --ld-circular-progress-bg-col-overflow: var(--ld-thm-error-active);
  --ld-circular-progress-wht-overlay-col: var(--ld-col-wht-alpha-low);
}

/* HACK: Safari 7.1+ */
/* stylelint-disable selector-type-no-unknown */
_::-webkit-full-page-media,
_:future,
:root {
  --ld-circular-progress-bar-correction: 3.5px;
}
/* stylelint-enable selector-type-no-unknown */

.ld-circular-progress__stroke {
  position: absolute;
  inset: 0;
  fill: none;
  mask-image: var(--ld-circular-progress-stroke-mask);
  transform: rotate(-90deg);
  width: 100%; /* required in Safari */
  z-index: 1;

  circle {
    transform-origin: center;
    stroke-width: 2.2;
    stroke-dasharray: calc(100 / var(--ld-circular-progress-pi));
    transition: opacity var(--ld-circular-progress-transition-duration) linear,
      stroke-dashoffset var(--ld-circular-progress-transition-duration) ease;

    &:first-of-type {
      stroke: var(--ld-circular-progress-bar-col);
      /* Safari does not support a negative stroke dash offset! */
      stroke-dashoffset: calc(
        -1 * min(0px, (
                -100px + var(--ld-circular-progress-calc-relative-progress) * (100px -
                      var(--ld-circular-progress-bar-correction, 1px))
              ) / var(--ld-circular-progress-pi))
      );
      opacity: calc(1 - var(--ld-circular-progress-has-overflow));
    }
    &:last-of-type {
      stroke: var(--ld-circular-progress-bar-col-overflow);
      /* Safari does not support a negative stroke dash offset! */
      stroke-dashoffset: calc(
        -1 * max(-100px / var(--ld-circular-progress-pi), min(0px, (
                  -100px + (
                      var(--ld-circular-progress-calc-relative-progress) - 1
                    ) * (100px - var(--ld-circular-progress-bar-correction, 1px))
                ) / var(--ld-circular-progress-pi)))
      );
      opacity: var(--ld-circular-progress-has-overflow);
    }
  }
}
