@keyframes form-submit-spin {
    to {
        transform: rotate(360deg);
    }
}

button.form-submit--pending {
    position: relative;
    pointer-events: none;
    cursor: wait;
    opacity: 0.88;
}

button.form-submit--pending::after {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-left: 0.5em;
    vertical-align: -0.12em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: form-submit-spin 0.65s linear infinite;
}

input.form-submit--pending[type="submit"],
input.form-submit--pending[type="image"] {
    pointer-events: none;
    cursor: wait;
    opacity: 0.88;
    padding-left: 2.35em;
    background-repeat: no-repeat;
    background-position: 0.65em center;
    background-size: 1em 1em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%23666' stroke-width='3' stroke-dasharray='16 48' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='0.65s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E");
}