/* ==========================================
   Base Button Styles
========================================== */

.button,
button[type="submit"] {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    padding: 10px 20px;

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

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

    cursor: pointer;

    font: inherit;
    text-decoration: none;

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

/* ==========================================
   Hover
========================================== */

.button:hover,
button[type="submit"]:hover {
    background: var(--color-primary-hover);
}

/* ==========================================
   Active
========================================== */

.button:active,
button[type="submit"]:active {
    transform: scale(0.98);
}

/* ==========================================
   Disabled
========================================== */

.button:disabled,
button[type="submit"]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}