/**
 * XWUIViewSwitcher — icon-tab toggle.
 */

.xwui-view-switcher {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: var(--bg-secondary, color-mix(in srgb, var(--text-primary) 4%, transparent));
    border-radius: var(--radius-md, 8px);
    padding: 3px;
    border: 1px solid var(--border-light, var(--border-color, transparent));
    flex-wrap: wrap;
}

.xwui-view-switcher-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 5px 10px;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    border-radius: var(--radius-sm, 6px);
    cursor: pointer;
    font-weight: var(--font-weight-medium, 500);
    font-family: inherit;
    transition: background 0.15s, color 0.15s, transform 0.1s;
    line-height: 1;
    position: relative;
}
.xwui-view-switcher-tab:hover:not(:disabled) {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.xwui-view-switcher-tab:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.xwui-view-switcher-tab:focus-visible {
    outline: 2px solid var(--role-info-fg, var(--accent-primary, #2e90fa));
    outline-offset: 2px;
}

.xwui-view-switcher-tab-active {
    background: var(--bg-primary, var(--bg-elevated, #fff));
    color: var(--text-primary);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.06));
}

.xwui-view-switcher-tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.xwui-view-switcher-tab-icon svg {
    width: 1.05em;
    height: 1.05em;
    display: block;
}

.xwui-view-switcher-tab-label { white-space: nowrap; }

.xwui-view-switcher-tab-badge {
    margin-left: 0.25rem;
    min-width: 1.25em;
    height: 1.25em;
    padding: 0 0.35em;
    border-radius: 999px;
    background: var(--role-danger-fg, #d92d20);
    color: #fff;
    font-size: 0.7em;
    font-weight: var(--font-weight-semibold, 600);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Variants */
.xwui-view-switcher-pills {
    background: transparent;
    border-color: transparent;
    gap: 0.4rem;
    padding: 0;
}
.xwui-view-switcher-pills .xwui-view-switcher-tab {
    border: 1px solid var(--border-color);
    border-radius: 999px;
}
.xwui-view-switcher-pills .xwui-view-switcher-tab-active {
    background: var(--accent-primary-light, color-mix(in srgb, var(--accent-primary, #2e90fa) 14%, transparent));
    color: var(--accent-primary, #2e90fa);
    border-color: var(--accent-primary, #2e90fa);
    box-shadow: none;
}

.xwui-view-switcher-segmented {
    /* default tab style already gives this look */
}

/* Sizes */
.xwui-view-switcher-xs { font-size: 0.6875rem; }
.xwui-view-switcher-xs .xwui-view-switcher-tab { padding: 3px 7px; }
:is(.xwui-view-switcher-s,.xwui-view-switcher-sm) { font-size: 0.75rem; }
:is(.xwui-view-switcher-s,.xwui-view-switcher-sm) .xwui-view-switcher-tab { padding: 4px 8px; }
:is(.xwui-view-switcher-m,.xwui-view-switcher-md) { font-size: 0.8125rem; }
:is(.xwui-view-switcher-l,.xwui-view-switcher-lg) { font-size: 0.9375rem; }
:is(.xwui-view-switcher-l,.xwui-view-switcher-lg) .xwui-view-switcher-tab { padding: 7px 13px; }