/*
 * OptionsPlay Shared Button Components
 * Source: Design System Spec Sections 4.1, 4.2, 4.5
 * Replaces duplicated button/pill/toggle styles across widgets
 */

/* ===== PRIMARY BUTTON ===== */
.op-btn-primary {
    background: var(--op-brand-green-600) !important;
    color: white !important;
    border: none !important;
    border-radius: var(--op-radius-lg) !important;
    padding: var(--op-space-2) var(--op-space-4) !important;
    font-size: var(--op-text-base) !important;
    font-weight: var(--op-font-semibold) !important;
    height: 36px !important;
}

.op-btn-primary:hover {
    background: var(--op-brand-green-700) !important;
    box-shadow: var(--op-shadow-md) !important;
}

/* ===== SECONDARY BUTTON ===== */
.op-btn-secondary {
    background: var(--op-bg-primary) !important;
    color: var(--op-text-secondary) !important;
    border: 1px solid var(--op-border-default) !important;
    border-radius: var(--op-radius-lg) !important;
    padding: var(--op-space-2) var(--op-space-4) !important;
    font-size: var(--op-text-base) !important;
    font-weight: var(--op-font-semibold) !important;
}

.op-btn-secondary:hover {
    background: var(--op-bg-tertiary) !important;
    border-color: var(--op-border-emphasis) !important;
}

/* ===== FILTER PILLS ===== */
.op-pill-active {
    background: var(--op-brand-green-600) !important;
    color: white !important;
    border: none !important;
    border-radius: var(--op-radius-full) !important;
    padding: var(--op-space-1) var(--op-space-3) !important;
    font-size: var(--op-text-sm) !important;
    font-weight: var(--op-font-semibold) !important;
}

.op-pill-inactive {
    background: var(--op-bg-primary) !important;
    color: var(--op-text-primary) !important;
    border: 1px solid var(--op-border-default) !important;
    border-radius: var(--op-radius-full) !important;
    padding: var(--op-space-1) var(--op-space-3) !important;
}

.op-pill-inactive:hover {
    background: var(--op-bg-tertiary) !important;
    border-color: var(--op-border-emphasis) !important;
}

/* ===== VIEW TOGGLE (RadzenSelectBar) ===== */
.op-view-toggle {
    background: var(--op-bg-primary) !important;
    border: 1px solid var(--op-border-default) !important;
    border-radius: var(--op-radius-lg) !important;
    padding: 4px !important;
    gap: 4px !important;
}

.op-view-toggle .rz-selectbar-item {
    border: none !important;
    border-radius: var(--op-radius-md) !important;
    padding: var(--op-space-2) var(--op-space-4) !important;
    font-size: var(--op-text-sm) !important;
    font-weight: var(--op-font-semibold) !important;
    color: var(--op-text-secondary) !important;
    background: transparent !important;
}

.op-view-toggle .rz-selectbar-item.rz-state-active {
    background: var(--op-brand-green-600) !important;
    color: white !important;
}