.ok {
   &_line {
    stroke-dasharray:300,300;
    stroke-dashoffset:300;
    transition: all 2s linear;
   } 
   &_checkmark {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        display: block;
        stroke-width: 2;
        stroke: #fff;
        margin: 10% auto;
        box-shadow: inset 0px 0px 0px #7ac142;
        animation:  fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
        &__circle {
            stroke-dasharray: 166;
            stroke-dashoffset: 166;
            stroke-width: 2;
            stroke: #7ac142;
            fill: none;
            animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
        }
        &__check {
            transform-origin: 50% 50%;
            stroke-dasharray: 48;
            stroke-dashoffset: 0;
            animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
        }
        :global {
            @keyframes stroke {
                100% {
                    stroke-dashoffset: 0;
                }
            }
            @keyframes fill {
                100% {
                    box-shadow: inset 0px 0px 0px 30px #7ac142;
                }
            }
            @keyframes scale {
                100% {
                    transform: none;
                }
                50% {
                    transform: sc(1.1, 1.1, 1);
                }
            }
        }
   }
}