/* -----------------------------------
   BASE
----------------------------------- */
.button,
button {
    display: inline-block;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 12px 25px;
    border-radius: 90px;
    font-size: 16px;
    border: none;
    outline: 2px solid #8739f4;

    background: #8739f4;
    color: #fff;

    font-weight: 700;

    cursor: pointer;
    transition: background 0.15s ease, transform 0.05s ease;
}

.button::first-letter,
button::first-letter {
    text-transform: uppercase;
}

/* -----------------------------------
   HOVER
----------------------------------- */
.button:hover:not(:disabled):not(.loading),
button:hover:not(:disabled):not(.loading) {
    background: #7130cd;
    outline-color: #7130cd;
}

/* -----------------------------------
   PRESSED
----------------------------------- */
.button:active:not(:disabled):not(.loading),
button:active:not(:disabled):not(.loading) {
    background: #5c27a6;
    outline-color: #5c27a6;
    transform: translateY(1px);
}

/* -----------------------------------
   DISABLED
----------------------------------- */
button:disabled,
.button.disabled {
    background: #5c27a6;
    outline-color: #5c27a6;
    color: white;
    cursor: not-allowed;
    pointer-events: none;
}


/* --------- */

.button.button--light {
    border: none;
    outline: 2px solid #6b25c5;
    color: #6b25c5;
}
button.button--light:hover:not(:disabled):not(.loading),
.button.button--light:hover:not(:disabled):not(.loading) {
    background: #ecdffd;
    outline-color: #521d99;
    color: #521d99;
}
button.button--light:active:not(:disabled):not(.loading),
.button.button--light:active:not(:disabled):not(.loading) {
    background: #d9c0fb;
    outline-color: #3a166f;
    color:#3a166f;
    transform: translateY(1px);
}
button:disabled,
.button.disabled {
    background: white;
    outline-color: #c4a8e8;
    color: #c4a8e8;
}