.dummy-positioning{width:100%;height:100vh;display:flex;align-items:center;justify-content:center}:root{--green:#4cc93f;--red:#e74c3c;--icon-base-size:15px;--lighten-green:#8de588;--lighten-red:#ff7f7f}.error-icon,.success-icon{display:inline-block;width:6em;height:6em;font-size:var(--icon-base-size);border-radius:50%;border:3px solid var(--lighten-green);background-color:#fff;position:relative;overflow:hidden;transform-origin:center;animation:showSuccess .18s ease-in-out;transform:scale(1)}.error-icon{border-color:var(--lighten-red)}.error-icon__line1,.error-icon__line2,.success-icon__long,.success-icon__tip{display:block;position:absolute;height:3px;background-color:var(--lighten-green);border-radius:7.5px}.error-icon__line1,.error-icon__line2{background-color:var(
    --lighten-red
  )}.success-icon__tip{width:1.8em;top:3.225em;left:1.05em;transform:rotate(45deg);animation:tipInPlace .3s ease-in-out;animation-fill-mode:forwards;animation-delay:.18s;visibility:hidden}.success-icon__long{width:3em;transform:rotate(-45deg);top:2.775em;left:2.0625em;animation:longInPlace .14s ease-in-out;animation-fill-mode:forwards;visibility:hidden;animation-delay:calc(.3s + .14s)}.error-icon__line1{transform:rotate(45deg)}.error-icon__line1,.error-icon__line2{width:4em;top:3em;left:1em;animation:lineInPlace .3s ease-in-out;animation-fill-mode:forwards;animation-delay:.18s;visibility:hidden}.error-icon__line2{transform:rotate(-45deg)}@keyframes showSuccess{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes lineInPlace{0%{width:0;top:2.8em;left:.8em}to{width:4em;top:2.9em;left:.9em;visibility:visible}}