/* Shared semantic hold-progress action variants. */

.vk-paper-delete-hold-button.vk-paper-button {
  --vk-paper-delete-hold-fill: var(--vk-form-delete-hold-fill, var(--vk-hold-danger-fill));
  --vk-paper-delete-hold-progress: 0;
  --vk-paper-lift-hold-fill: var(--vk-paper-delete-hold-fill);
  --hold-fill-color: var(--vk-paper-delete-hold-fill);
}

.vk-paper-delete-hold-button--variation.vk-paper-button {
  --vk-paper-delete-hold-progress: var(--vk-hold-progress, 0);
}

.vk-paper-delete-hold-button--content-object.vk-paper-button {
  --vk-paper-delete-hold-progress: var(--vk-hold-progress, 0);
}

.vk-paper-delete-hold-button--content-link.vk-paper-button {
  --vk-paper-delete-hold-progress: var(--vk-hold-progress, 0);
}

.vk-paper-success-hold-button {
  --vk-hold-progress: 0;
  --vk-paper-delete-hold-progress: var(--vk-hold-progress);
  --hold-fill-color: var(--vk-hold-fill-success);
  --vk-paper-lift-hold-fill: var(--hold-fill-color);
  --vk-paper-delete-hold-fill: var(--hold-fill-color);
}

.vk-paper-success-hold-button.is-holding::before {
  width: calc(var(--vk-hold-progress, 0) * 100%);
}

.vk-paper-success-hold-button > * {
  position: relative;
  z-index: 1;
}

.vk-paper-delete-hold-button.vk-paper-button::before {
  background:
    linear-gradient(
      to bottom,
      color-mix(in srgb, #000 24%, transparent) 0,
      color-mix(in srgb, #000 12%, transparent) 4px,
      transparent 10px
    ),
    var(--vk-paper-delete-hold-fill);
}

.vk-paper-delete-hold-button.vk-paper-button.is-holding::before {
  width: calc(var(--vk-paper-delete-hold-progress, 0) * 100%);
}