.bl-confirm {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--bl-space-2);
  margin-top: var(--bl-space-2);
  padding-top: var(--bl-space-2);
  border-top: var(--bl-line-width) solid var(--bl-color-border-soft);
  color: var(--bl-color-danger);
  font-size: var(--bl-text-tiny);
  opacity: 0;
  transition:
    opacity var(--bl-motion-fast) var(--bl-easing),
    display var(--bl-motion-fast) var(--bl-easing) allow-discrete;
}

.is-confirming .bl-confirm {
  display: flex;
  opacity: 1;
}

@starting-style {
  .is-confirming .bl-confirm {
    opacity: 0;
  }
}

.bl-confirm-actions {
  display: flex;
  gap: var(--bl-space-1);
}