/* Animation master - Success check */

/*
  Usage:
    <span class="t-success-check" data-state="out">...</span>

  State: set data-state="in" to show the success mark.
  Add `.is-exiting` when dismissing it.
*/

:root {
  --success-check-opacity-dur: 550ms;
  --success-check-rotate-dur: 550ms;
  --success-check-rotate-from: 80deg;
  --success-check-bob-dur: 450ms;
  --success-check-y: 40px;
  --success-check-blur-dur: 500ms;
  --success-check-blur-from: 10px;
  --success-check-blur-out: 4px;
  --success-check-path-dur: 550ms;
  --success-check-path-delay: 80ms;
  --success-check-out-dur: 500ms;
  --success-check-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --success-check-ease-opacity: cubic-bezier(0.22, 1, 0.36, 1);
  --success-check-ease-rotate: cubic-bezier(0.22, 1, 0.36, 1);
  --success-check-ease-bob: cubic-bezier(0.34, 1.35, 0.64, 1);
  --success-check-ease-path: cubic-bezier(0.22, 1, 0.36, 1);
}

.t-success-check {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 48px;
  background: #35ba00;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.05) inset,
    0 1px 1px rgba(0, 0, 0, 0.1),
    0 1px 4px rgba(0, 0, 0, 0.08),
    0 -1px 1px rgba(0, 0, 0, 0.09) inset;
  opacity: 0;
  transform-origin: center;
  will-change: transform, opacity, filter;
}

.t-success-check svg {
  width: 48px;
  height: 48px;
  display: block;
  overflow: visible;
}

.t-success-check path {
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
}

.t-success-check[data-state="in"] {
  animation:
    t-success-check-fade var(--success-check-opacity-dur) var(--success-check-ease-opacity) forwards,
    t-success-check-rotate var(--success-check-rotate-dur) var(--success-check-ease-rotate) forwards,
    t-success-check-blur var(--success-check-blur-dur) var(--success-check-ease-out) forwards,
    t-success-check-bob var(--success-check-bob-dur) var(--success-check-ease-bob) forwards;
}

.t-success-check[data-state="in"] path {
  animation: t-success-check-draw var(--success-check-path-dur) var(--success-check-ease-path) var(--success-check-path-delay) forwards;
}

.t-success-check.is-exiting {
  animation:
    t-success-check-fade-out var(--success-check-out-dur) var(--success-check-ease-out) forwards,
    t-success-check-blur-out var(--success-check-out-dur) var(--success-check-ease-out) forwards;
}

@keyframes t-success-check-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes t-success-check-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes t-success-check-rotate {
  from { transform: rotate(var(--success-check-rotate-from)); }
  to { transform: rotate(0deg); }
}

@keyframes t-success-check-blur {
  from { filter: blur(var(--success-check-blur-from)); }
  to { filter: blur(0); }
}

@keyframes t-success-check-blur-out {
  from { filter: blur(0); }
  to { filter: blur(var(--success-check-blur-out)); }
}

@keyframes t-success-check-bob {
  from { translate: 0 var(--success-check-y); }
  to { translate: 0 0; }
}

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

@media (prefers-reduced-motion: reduce) {
  .t-success-check,
  .t-success-check path {
    animation: none !important;
    filter: none !important;
  }
}