/***************** SAVE BUTTON/WITH API INTEGRATION *****************/


.loading-btn-wrapper {
    position: relative;
    display: inline-block;
    width: 240px;
    height: 60px;
    text-align: center;
    bottom: 2.5rem;
    margin-top: 2rem;
    float:left;
}

.loading-btn {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
    border: 2px solid var(--color-positive);
    color: var(--color-primary-text);
    background-color: var(--color-positive);    border: 0;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.33s ease-in-out;
}
.loading-btn:hover {
    border: 2px solid var(--color-tertiary);
    color: var(--color-primary-text);
    background-color: var(--color-tertiary);
}
.loading-btn, .loading-btn:focus {
    outline: none;
}
.loading-btn--pending, .loading-btn--success, .loading-btn--fail {
    width: 60px;
    pointer-events: none;
    cursor: default;
}
.loading-btn--pending .loading-btn__text, .loading-btn--success .loading-btn__text, .loading-btn--fail .loading-btn__text {
    opacity: 0;
}
.loading-btn--pending:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-block;
    height: 28px;
    width: 28px;
    border: 3px solid rgba(255, 255, 255, 0.33);
    border-top-color: #fff;
    border-radius: 50%;
    -webkit-animation: loading-btn--fade-in 0.33s ease, loading-btn--rotation 0.66s linear 0s infinite;
    animation: loading-btn--fade-in 0.33s ease, loading-btn--rotation 0.66s linear 0s infinite;
}
.loading-btn--success, .loading-btn--success:hover {
    background: #8bc34a;
}
.loading-btn--success:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-block;
    height: 25%;
    width: 50%;
    border: 3px solid #fff;
    border-top-width: 0;
    border-right-width: 0;
    transform: translate(-50%, -75%) rotate(-45deg);
    -webkit-animation: loading-btn--fade-in 0.6s ease;
    animation: loading-btn--fade-in 0.6s ease;
}
.loading-btn--fail, .loading-btn--fail:hover {
    background: #ff5722;
}
.loading-btn--fail:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-block;
    height: 65%;
    width: 65%;
    background: linear-gradient(to bottom, transparent 44%, #fff 44%, #fff 56%, transparent 56%), linear-gradient(to right, transparent 44%, #fff 44%, #fff 56%, transparent 56%);
    transform: translate(-50%, -50%) rotate(-45deg);
    -webkit-animation: loading-btn--fade-in 0.6s ease;
    animation: loading-btn--fade-in 0.6s ease;
}
.loading-btn__text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 13px;
    color: #fff;
    transition: inherit;
}

/**
 * Animations
 */
@-webkit-keyframes loading-btn--fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes loading-btn--fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-webkit-keyframes loading-btn--rotation {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}
@keyframes loading-btn--rotation {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}
/**
 * Optical stuff - has nothing to do with button animation.
 */
.state-list {
    margin-bottom: 12px;
}
.state-list .loading-btn-wrapper {
    background: repeating-linear-gradient(45deg, #fff, #fff 10px, #f0f0f0 10px, #f0f0f0 20px);
}

.loading-btn-wrapper + .loading-btn-wrapper {
    margin-left: 8px;
}