@property --hold-progress {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

button.hold-confirm {
  --hold-color: #bf3631;
  appearance: none !important;
  position: relative !important;
  isolation: isolate;
  display: inline-flex !important;
  flex: 0 0 46px !important;
  align-items: center !important;
  justify-content: center !important;
  width: 46px !important;
  min-width: 46px !important;
  max-width: none !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--hold-color) !important;
  color: #fff !important;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 160ms ease, background-color 180ms ease, width 220ms ease, border-radius 220ms ease;
}
button.hold-confirm[hidden] { display: none !important; }

button.hold-confirm::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: -5px;
  border-radius: 50%;
  background: conic-gradient(from -90deg, #e45752 calc(var(--hold-progress) * 1turn), rgba(191,54,49,.18) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  transition: --hold-progress 220ms ease-out;
  pointer-events: none;
}

button.hold-confirm .hold-confirm__icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
}
button.hold-confirm .hold-confirm__icon svg {
  display: block;
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
button.hold-confirm .hold-confirm__label {
  position: absolute;
  z-index: 1;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
button.hold-confirm:hover:not(:disabled) { filter: brightness(1.07); }
button.hold-confirm:active:not(:disabled), button.hold-confirm.is-holding { transform: scale(.94); }
button.hold-confirm:focus-visible { outline: 3px solid rgba(191,54,49,.38) !important; outline-offset: 6px; }
button.hold-confirm:disabled:not(.is-confirming):not(.is-done) { opacity: .42; cursor: default; }
button.hold-confirm.is-rewinding::before { transition: --hold-progress 260ms cubic-bezier(.2,.7,.25,1); }
button.hold-confirm.is-confirming { cursor: progress; }
button.hold-confirm.is-confirming .hold-confirm__label,
button.hold-confirm.is-done .hold-confirm__label {
  position: static;
  width: auto;
  height: auto;
  clip-path: none;
  overflow: visible;
  font: inherit;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}
button.hold-confirm.is-confirming,
button.hold-confirm.is-done {
  flex-basis: auto !important;
  width: auto !important;
  min-width: 96px !important;
  padding: 0 14px !important;
  gap: 6px !important;
  border-radius: 999px !important;
}
button.hold-confirm.is-confirming .hold-confirm__icon,
button.hold-confirm.is-done .hold-confirm__icon { width: 16px; height: 16px; }
button.hold-confirm.is-done { --hold-color: #397d55; background: var(--hold-color) !important; cursor: default; }
button.hold-confirm.is-done::before { background: conic-gradient(from -90deg, #67ad7d 1turn, rgba(63,143,95,.18) 0); }
button.hold-confirm.is-done .hold-confirm__icon { animation: hold-confirm-shake 300ms ease-out both; }
@keyframes hold-confirm-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  50% { transform: translateX(3px); }
  75% { transform: translateX(-1px); }
}
@media (prefers-reduced-motion: reduce) {
  button.hold-confirm, button.hold-confirm::before { transition: none !important; }
  button.hold-confirm.is-done .hold-confirm__icon { animation: none; }
}