.rocket-button {
    --background: #262730;
    --text: #fff;
    --check: #5c86ff;
    --blue: #5c86ff;
    --blue-transparent: #{rgba(#5c86ff, 0)};
    --dot: #fe5151;
    --dot-shadow: #{rgba(#fe5151, .3)};
    --smoke: #{rgba(#f7f8ff, .9)};
    --rocket: #eef0fd;
    --rocket-shadow-left: #fff;
    --rocket-shadow-right: #d3d4ec;
    --rocket-wing-right: #c2c3d9;
    --rocket-wing-left: #d3d4ec;
    --rocket-window: #275efe;
    --rocket-window-shadow: #c2c3d9;
    --rocket-line: #9ea0be;
    font-size: 14px;
    font-weight: 500;
    line-height: 19px;
    padding: 14px 28px;
    display: table;
    position: relative;
    backface-visibility: hidden;
    text-decoration: none;
    color: var(--text);
    &:before {
        content: '';
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 25px;
        backface-visibility: hidden;
        transition: transform .2s ease;
        transform: scale(var(--s, 1)) translateZ(0);
        position: absolute;
        background: var(--background);
    }
    .default,
    .success,
    .animation {
        z-index: 1;
    }
    .default,
    .success {
        span {
            display: block;
            transition: transform .2s ease, opacity .2s ease;
            transform: translateX(var(--x, 0));
            opacity: var(--o, 1);
            filter: blur(var(--b, 0px));
        }
    }
    .default {
        position: relative;
        display: flex;
        &:before {
            content: '';
            width: 5px;
            height: 5px;
            border-radius: 50%;
            margin: 7px 8px 0 0;
            box-shadow: 0 0 0 1px var(--dot-shadow);
            animation: pulse 1s ease infinite;
            vertical-align: top;
            display: inline-block;
            transition: opacity .3s linear;
            opacity: var(--o, 1);
            background: var(--dot);
        }
    }
    .success {
        opacity: var(--o, 0);
        position: absolute;
        display: flex;
        top: 14px;
        left: 50%;
        transform: translateX(-50%);
        svg {
            width: 13px;
            height: 11px;
            stroke-width: 2;
            stroke-dasharray: 20px;
            stroke-dashoffset: var(--o, 20px);
            stroke-linecap: round;
            stroke-linejoin: round;
            fill: none;
            display: block;
            color: var(--check);
            margin: 4px 8px 0 0;
        }
        & > div {
            display: flex;
            span {
                --o: 0;
                --x: 8px;
                --b: 2px;
            }
        }
    }
    .animation {
        left: 0;
        right: 0;
        bottom: 0;
        height: 120px;
        pointer-events: none;
        overflow: hidden;
        position: absolute;
        .smoke {
            left: 50%;
            top: 100%;
            position: absolute;
            i {
                opacity: 0;
                transform: scale(.7);
                border-radius: 50%;
                position: absolute;
                bottom: var(--b, -20px);
                left: var(--l, -12px);
                width: var(--s, 32px);
                height: var(--s, 32px);
                background: var(--smoke);
                &:nth-child(2) {
                    --s: 20px;
                    --l: -24px;
                    --b: -10px;
                    --d: 50ms;
                }
                &:nth-child(3) {
                    --s: 22px;
                    --l: 0;
                    --b: -12px;
                    --d: 20ms;
                }
                &:nth-child(4) {
                    --s: 12px;
                    --l: 16px;
                    --b: -6px;
                    --d: 120ms;
                }
                &:nth-child(5) {
                    --s: 24px;
                    --l: -20px;
                    --b: -14px;
                    --d: 80ms;
                }
                &:nth-child(6) {
                    --s: 12px;
                    --l: -28px;
                    --b: -8px;
                    --d: 60ms;
                }
            }
        }
        .rocket {
            position: absolute;
            left: 50%;
            top: 100%;
            z-index: 1;
            margin: 0 0 0 -12px;
            &:before {
                content: '';
                margin-left: -3px;
                left: 50%;
                top: 32px;
                position: absolute;
                width: 6px;
                border-radius: 2px;
                height: 32px;
                transform-origin: 50% 0;
                transform: scaleY(.5);
                background: linear-gradient(var(--blue), var(--blue-transparent));
            }
            svg {
                width: 24px;
                height: 36px;
                display: block;
            }
        }
    }
    &:active {
        --s: .95;
    }
    &.live {
        &:before {
            animation: shake 1.5s ease .6s;
        }
        .default {
            &:before {
                --o: 0;
            }
            span {
                --o: 0;
                --x: 8px;
                --b: 2px;
                transition: transform .3s ease var(--d), opacity .3s ease var(--d), filter .3s ease var(--d);
            }
        }
        .success {
            --o: 1;
            span {
                --o: 1;
                --x: 0;
                --b: 0;
                transition: transform .3s ease calc(var(--d) + 2200ms), opacity .3s ease calc(var(--d) + 2200ms), filter .3s ease calc(var(--d) + 2200ms);
            }
            svg {
                --o: 0;
                transition: stroke-dashoffset .3s ease 2.25s;
            }
        }
        .animation {
            .rocket {
                animation: rocket 2s ease forwards .4s;
                &:before {
                    animation: rocket-light 2s ease forwards .4s;
                }
            }
            .smoke {
                i {
                    animation: var(--n, smoke) 1.7s ease forwards calc(var(--d) + 600ms);
                    &:nth-child(3),
                    &:nth-child(6) {
                        --n: smoke-alt;
                    }
                }
            }
        }
    }
}

@keyframes pulse {
    50% {
        box-shadow: 0 0 0 2px var(--dot-shadow);
    }
}

@keyframes shake {
    8%,
    24%,
    40%,
    56%,
    72%,
    88% {
        transform: translateX(-1px);
    }
    16%,
    32%,
    48%,
    64%,
    80%,
    96% {
        transform: translateX(1px);
    }
}

@keyframes smoke {
    20%,
    80% {
        opacity: 1;
        transform: scale(1);
    }
    55% {
        transform: scale(.92);
    }
}

@keyframes smoke-alt {
    20%,
    80% {
        opacity: 1;
        transform: scale(1);
    }
    60% {
        transform: scale(1.08);
    }
}

@keyframes rocket {
    35% {
        transform: translateY(-56px);
    }
    80% {
        transform: translateY(-48px);
        opacity: 1;
    }
    100% {
        transform: translateY(-108px) scale(.6);
        opacity: 0;
    }
}

@keyframes rocket-light {
    35% {
        transform: scaleY(.6);
    }
    75% {
        transform: scaleY(.5);
    }
    100% {
        transform: scaleY(1);
    }
}

html {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

* {
    box-sizing: inherit;
    &:before,
    &:after {
        box-sizing: inherit;
    }
}

// Center & dribbble
body {
    min-height: 100vh;
    display: flex;
    font-family: 'Roboto', Arial;
    justify-content: center;
    align-items: center;
    background: #F7F8FF;
    .dribbble {
        position: fixed;
        display: block;
        right: 20px;
        bottom: 20px;
        img {
            display: block;
            height: 28px;
        }
    }
}