.base-success-check {
  --success-check-size: 84px;
  --success-check-color: var(--success, #1f9d6b);
  --success-check-soft: color-mix(
    in srgb,
    var(--success-check-color) 14%,
    transparent
  );
  --success-check-accent: var(
    --brand,
    var(--primary-color, var(--primary-blue, #fb596e))
  );
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--success-check-size);
  height: var(--success-check-size);
}

.base-success-check[hidden],
[hidden] > .base-success-check {
  display: none;
}

.base-success-check svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: base-success-check-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.base-success-check__ring {
  fill: var(--success-check-soft);
  stroke: var(--success-check-color);
  stroke-width: 3;
  stroke-dasharray: 176;
  stroke-dashoffset: 176;
  transform: rotate(-90deg);
  transform-origin: 32px 32px;
  animation: base-success-check-draw 0.55s ease-out forwards;
}

.base-success-check__tick {
  fill: none;
  stroke: var(--success-check-color);
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: base-success-check-draw 0.35s 0.45s ease-out forwards;
}

.base-success-check__dot {
  --r: 0deg;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--success-check-accent);
  opacity: 0;
  animation: base-success-check-burst 0.7s 0.55s ease-out forwards;
}

.base-success-check__dot:nth-of-type(even) {
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  background: var(--success-check-color);
}

.base-success-check__dot:nth-of-type(2) {
  --r: 45deg;
}
.base-success-check__dot:nth-of-type(3) {
  --r: 90deg;
}
.base-success-check__dot:nth-of-type(4) {
  --r: 135deg;
}
.base-success-check__dot:nth-of-type(5) {
  --r: 180deg;
}
.base-success-check__dot:nth-of-type(6) {
  --r: 225deg;
}
.base-success-check__dot:nth-of-type(7) {
  --r: 270deg;
}
.base-success-check__dot:nth-of-type(8) {
  --r: 315deg;
}

@keyframes base-success-check-pop {
  from {
    transform: scale(0.6);
  }
  to {
    transform: scale(1);
  }
}

@keyframes base-success-check-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes base-success-check-burst {
  0% {
    opacity: 0;
    transform: rotate(var(--r)) translateY(0) scale(0.4);
  }
  25% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(var(--r))
      translateY(calc(var(--success-check-size) * -0.64)) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .base-success-check svg,
  .base-success-check__ring,
  .base-success-check__tick,
  .base-success-check__dot {
    animation: none;
  }

  .base-success-check__ring,
  .base-success-check__tick {
    stroke-dashoffset: 0;
  }
}