/* Consistent colors for the map and component filter switches. */
:is(.portal-filterbar, .component-filter-panel) :is(.category-filter, .status-filter, .component-filter-button) {
    --filter-ink: #1e40af;
    --filter-off-ink: #49638f;
    --filter-active: #bfdbfe;
    --filter-soft: #eff6ff;
    --filter-border: #60a5fa;
    --filter-soft-border: #c7dafa;
    --filter-ring: rgba(37, 99, 235, .16);
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.portal-filterbar [data-category-filter="a"],
.portal-filterbar [data-status-filter="observation"],
.component-filter-button.category-a,
.component-filter-button.action-monitor {
    --filter-ink: #166534;
    --filter-off-ink: #456c51;
    --filter-active: #bbf7d0;
    --filter-soft: #f0fdf4;
    --filter-border: #4ade80;
    --filter-soft-border: #bbebcd;
    --filter-ring: rgba(22, 163, 74, .16);
}

.portal-filterbar [data-category-filter="c"],
.component-filter-button.category-c,
.component-filter-button.category-ck {
    --filter-ink: #9a3412;
    --filter-off-ink: #87583f;
    --filter-active: #fed7aa;
    --filter-soft: #fff7ed;
    --filter-border: #fb923c;
    --filter-soft-border: #f5d6b3;
    --filter-ring: rgba(234, 88, 12, .15);
}

.portal-filterbar [data-category-filter="d"],
.portal-filterbar [data-status-filter="action"],
.component-filter-button.category-d,
.component-filter-button.category-dk,
.component-filter-button.action-action-required {
    --filter-ink: #991b1b;
    --filter-off-ink: #915050;
    --filter-active: #fecaca;
    --filter-soft: #fef2f2;
    --filter-border: #f87171;
    --filter-soft-border: #f3c9c9;
    --filter-ring: rgba(220, 38, 38, .14);
}

.portal-filterbar [data-category-filter="none"],
.portal-filterbar [data-status-filter="none"],
.component-filter-button.category-none,
.component-filter-button.action-none {
    --filter-ink: #475569;
    --filter-off-ink: #64748b;
    --filter-active: #e8eef5;
    --filter-soft: #fafbfc;
    --filter-border: #a7b5c6;
    --filter-soft-border: #dce3eb;
    --filter-ring: rgba(100, 116, 139, .12);
}

:is(.portal-filterbar, .component-filter-panel) :is(.category-filter, .status-filter, .component-filter-button)[aria-pressed="true"] {
    color: var(--filter-ink);
    background: var(--filter-active);
    border-color: var(--filter-border);
    font-weight: 650;
    box-shadow: 0 0 0 2px var(--filter-ring);
}

:is(.portal-filterbar, .component-filter-panel) :is(.category-filter, .status-filter, .component-filter-button)[aria-pressed="false"],
:is(.portal-filterbar, .component-filter-panel) :is(.category-filter, .status-filter, .component-filter-button)[aria-pressed="mixed"] {
    color: var(--filter-off-ink);
    background: var(--filter-soft);
    border-color: var(--filter-soft-border);
    font-weight: 500;
    box-shadow: none;
}

:is(.portal-filterbar, .component-filter-panel) :is(.category-filter, .status-filter, .component-filter-button):hover {
    border-color: var(--filter-border);
    box-shadow: 0 0 0 2px var(--filter-ring);
}

:is(.portal-filterbar, .component-filter-panel) :is(.category-filter, .status-filter, .component-filter-button):focus-visible {
    outline: 2px solid var(--filter-ink);
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    :is(.portal-filterbar, .component-filter-panel) :is(.category-filter, .status-filter, .component-filter-button) { transition: none; }
}