/* ==========================================================================
   BUTTONS
========================================================================== */

.fumique-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 16px 32px;

    border: none;
    border-radius: var(--radius-button);

    cursor: pointer;

    font-size: var(--font-cta);
    font-weight: 600;
    text-decoration: none;

    transition: var(--transition);
}

/* ==========================================================================
   PRIMARY
========================================================================== */

.fumique-btn-primary {
    background-color: var(--color-cta);
    color: #FFFFFF;
}

.fumique-btn-primary:hover {
    background-color: var(--color-cta-hover);
}

/* ==========================================================================
   SECONDARY
========================================================================== */

.fumique-btn-secondary {
    background-color: var(--color-surface);

    border: 1px solid var(--color-primary);

    color: var(--color-primary);
}

.fumique-btn-secondary:hover {
    background-color: var(--color-background);
}

/* ==========================================================================
   GHOST
========================================================================== */

.fumique-btn-ghost {
    background: transparent;
    color: var(--color-primary);

    padding-left: 0;
    padding-right: 0;
}

.fumique-btn-ghost:hover {
    opacity: .75;
}