.btn {
    padding: 0.375rem 1rem !important;
    font-size: var(--font-base) !important;
    font-weight: 500 !important;
    border-radius: var(--radius-xs) !important;
    transition: background-color 0.3s ease, transform 0.3s ease !important;
}

.primary-solid-button {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--text-white) !important;

    &:hover {
        background-color: var(--primary-hover) !important;
    }
}

.primary-canvas-button {
    background-color: var(--primary-canvas) !important;
    border-color: var(--primary-canvas) !important;
    color: var(--primary) !important;

    &:hover {
        border-color: var(--primary) !important;
    }
}

/* --- SOLID BUTTONS --- */
.success-solid-button {
    background-color: var(--success) !important;
    border-color: var(--success) !important;
    color: var(--text-white) !important;

    &:hover {
        background-color: var(--success-hover) !important;
    }
}

.danger-solid-button {
    background-color: var(--danger) !important;
    border-color: var(--danger) !important;
    color: var(--text-white) !important;

    &:hover {
        background-color: var(--danger-hover) !important;
    }
}

.info-solid-button {
    background-color: var(--info) !important;
    border-color: var(--info) !important;
    color: var(--text-white) !important;

    &:hover {
        background-color: var(--info-hover) !important;
    }
}

.warning-solid-button {
    background-color: var(--warning) !important;
    border-color: var(--warning) !important;
    color: var(--text) !important;

    &:hover {
        background-color: var(--warning-hover) !important;
    }
}

/* --- CANVAS BUTTONS --- */
.success-canvas-button {
    background-color: var(--success-canvas) !important;
    border-color: var(--success-canvas) !important;
    color: var(--success) !important;

    &:hover {
        background-color: var(--success-hover) !important;
        color: var(--text-white) !important;
    }
}

.danger-canvas-button {
    background-color: var(--danger-canvas) !important;
    border-color: var(--danger-canvas) !important;
    color: var(--danger) !important;

    &:hover {
        background-color: var(--danger-hover) !important;
        color: var(--text-white) !important;
    }
}

.info-canvas-button {
    background-color: var(--info-canvas) !important;
    border-color: var(--info-canvas) !important;
    color: var(--info) !important;

    &:hover {
        background-color: var(--info-hover) !important;
        color: var(--text-white) !important;
    }
}

.warning-canvas-button {
    background-color: var(--warning-canvas) !important;
    border-color: var(--warning-canvas) !important;
    color: var(--text) !important;

    &:hover {
        background-color: var(--warning-hover) !important;
        color: var(--text) !important;
    }
}

/* --- ICON BUTTONS --- */
.icon-btn {
    padding: 0 !important;
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--text) !important;
}

.success-icon-button {
    &:hover {
        color: var(--success) !important;
    }
}

.danger-icon-button {
    &:hover {
        color: var(--danger) !important;
    }
}

.info-icon-button {
    &:hover {
        color: var(--info) !important;
    }
}

.warning-icon-button {
    &:hover {
        color: var(--warning) !important;
    }
}