.confirmation {
  display: grid;
  justify-items: start;
  gap: 8px;
  padding: 20px;
  border-radius: var(--radius);
  background: var(--soft);
}

.confirmation__icon {
  width: 48px;
  height: 48px;
  animation: confirmation-pop 0.5s cubic-bezier(0.3, 1.4, 0.5, 1) both;
}

.confirmation__icon circle {
  fill: var(--acc);
}

.confirmation__icon path {
  fill: none;
  stroke: var(--accf);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  animation: confirmation-draw 0.4s 0.35s ease-out both;
}

.confirmation__title {
  font-size: 19px;
  font-weight: 700;
}

@keyframes confirmation-pop {
  from {
    opacity: 0;
    transform: scale(0.4);
  }
}

@keyframes confirmation-draw {
  from {
    stroke-dashoffset: 1;
  }
}