/* =========================
    BUTTONS
    ========================= */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.65rem 1rem;
    border: 1px solid transparent;
    border-radius: 0.4rem;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}


/* =========================
    PRIMARY BUTTON
    ========================= */
.button--primary {
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
}

.button--primary:hover {
    background: var(--button-primary-hover);
}


/* =========================
    SECONDARY BUTTON
    ========================= */
.button--secondary {
    background: var(--button-secondary-bg);

    color: var(--button-secondary-text);
}

.button--secondary:hover {
    background: var(--button-secondary-hover);
}