/* =========================================================
   BUTTON
   ========================================================= */

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

    min-height: 48px;

    padding: 0 24px;

    border-radius: var(--radius-medium);

    background-color: var(--color-primary);
    color: var(--color-white);

    font-weight: 700;

    cursor: pointer;

    transition:
        background-color var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
}

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

    color: var(--color-white);

    transform: translateY(-1px);

    box-shadow: var(--shadow-small);
}


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

.button--secondary {
    background-color: var(--color-white);

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

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

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

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

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


/* =========================================================
   BUTTON OUTLINE
   ========================================================= */

.button--outline {
    background-color: transparent;

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

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

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

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