.wml-confetti-button-wrapper {
    position: relative;
    display: inline-block;
    --wml-confetti-primary: #1f2335;
    --wml-confetti-text: #f4f7ff;
    --wml-confetti-success: #5cffa1;
    --wml-confetti-loading: #5c86ff;
}

.wml-confetti-button {
    background: none;
    border: none;
    color: var(--wml-confetti-text);
    cursor: pointer;
    font-family: inherit;
    font-size: 1em;
    font-weight: 500;
    min-height: 3em;
    /* 42px at 14px base */
    outline: none;
    overflow: hidden;
    padding: 0 0.8em;
    position: relative;
    min-width: 13.5em;
    /* 190px at 14px base */
    -webkit-tap-highlight-color: transparent;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wml-confetti-button::before {
    background: var(--wml-confetti-primary);
    border-radius: 99em;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .4) inset;
    content: '';
    display: block;
    height: 100%;
    margin: 0 auto;
    position: absolute;
    left: 0;
    top: 0;
    transition: width .2s cubic-bezier(.39, 1.86, .64, 1) .3s;
    width: 100%;
    z-index: -1;
}

/* READY STATE */
.wml-confetti-button.ready .submitMessage svg {
    opacity: 1;
    top: 0;
    transition: top .4s ease 600ms, opacity .3s linear 600ms;
}

.wml-confetti-button.ready .submitMessage .button-text span {
    top: 0;
    opacity: 1;
    transition: all .2s ease calc(var(--dr) + 600ms);
}

/* LOADING STATE */
.wml-confetti-button.loading::before {
    transition: width .3s ease;
    width: 80%;
}

.wml-confetti-button.loading .loadingMessage {
    opacity: 1;
}

.wml-confetti-button.loading .loadingCircle {
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-name: wml-loading;
    cy: 10;
}

/* COMPLETE STATE */
.wml-confetti-button.complete .submitMessage svg {
    top: -2.5em;
    transition: none;
}

.wml-confetti-button.complete .submitMessage .button-text span {
    top: -0.6em;
    transition: none;
}

.wml-confetti-button.complete .loadingMessage {
    top: 6em;
}

.wml-confetti-button.complete .successMessage .button-text span {
    left: 0;
    opacity: 1;
    transition: all .2s ease calc(var(--d) + 1000ms);
}

.wml-confetti-button.complete .successMessage svg {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset .3s ease-in-out 1.4s;
}

.wml-confetti-button .button-text span {
    opacity: 0;
    position: relative;
    display: inline-block;
}

.wml-confetti-button .message {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.wml-confetti-button .message svg {
    display: inline-block;
    fill: none;
    margin-right: 0.4em;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.wml-confetti-button .submitMessage {
    width: 100%;
}

.wml-confetti-button:not(.ready) .submitMessage .button-text {
    opacity: 0;
    transition: opacity 0.3s;
}

.wml-confetti-button .submitMessage .button-text span {
    top: 0.6em;
    transition: all .2s ease var(--d);
}

.wml-confetti-button .submitMessage svg {
    color: var(--wml-confetti-loading);
    margin-left: -1px;
    opacity: 0;
    position: relative;
    top: 2.5em;
    transition: top .4s ease, opacity .3s linear;
    width: 1em;
}

.wml-confetti-button .loadingMessage {
    opacity: 0;
    transition: opacity .3s linear .3s, top .4s cubic-bezier(.22, 0, .41, -0.57);
}

.wml-confetti-button .loadingMessage svg {
    fill: var(--wml-confetti-loading);
    margin: 0;
    width: 1.6em;
}

.wml-confetti-button .successMessage {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.wml-confetti-button.complete .successMessage {
    opacity: 1;
    pointer-events: auto;
}

.wml-confetti-button .successMessage .button-text span {
    left: 5px;
    transition: all .2s ease var(--dr);
}

.wml-confetti-button .successMessage svg {
    color: var(--wml-confetti-success);
    stroke-dasharray: 20;
    stroke-dashoffset: 20;
    transition: stroke-dashoffset .3s ease-in-out;
    width: 1em;
}

.wml-confetti-button .loadingCircle:nth-child(2) {
    animation-delay: .1s
}

.wml-confetti-button .loadingCircle:nth-child(3) {
    animation-delay: .2s
}

@keyframes wml-loading {
    0% {
        cy: 10;
    }

    25% {
        cy: 3;
    }

    50% {
        cy: 10;
    }
}

.wml-confetti-canvas {
    height: 100vh;
    pointer-events: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
}