.stream-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.stream-tabs button,
.telemetry-presets button {
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

/* Inactive chip */
.stream-tabs button[tuiButton][tuiAppearance][data-appearance='secondary']:not(.stream-active),
.telemetry-presets button[tuiButton][tuiAppearance][data-appearance='secondary']:not(.stream-active) {
  border-radius: 624.9375rem;
  font-weight: 400;
  background: var(--sg-filter-chip-bg);
  color: var(--sg-filter-chip-fg);
  border: 1px solid transparent;
  outline: none;
  box-shadow: none;
}

.stream-tabs
  button[tuiButton][tuiAppearance][data-appearance='secondary']:not(.stream-active):hover:not(:disabled):not(
    [data-state='disabled']
  ),
.telemetry-presets
  button[tuiButton][tuiAppearance][data-appearance='secondary']:not(.stream-active):hover:not(:disabled):not(
    [data-state='disabled']
  ) {
  background: var(--sg-filter-chip-bg-hover);
  color: var(--sg-filter-chip-fg);
  border-color: transparent;
  outline: none !important;
  box-shadow: none !important;
}

/* Active chip */
.stream-tabs button.stream-active[tuiButton][tuiAppearance][data-appearance='secondary'],
.telemetry-presets button.stream-active[tuiButton][tuiAppearance][data-appearance='secondary'] {
  border-radius: 624.9375rem;
  font-weight: 400;
  background: var(--sg-filter-chip-active-bg);
  color: var(--sg-filter-chip-active-fg);
  border: 1px solid transparent;
  outline: none;
  box-shadow: none;
}

.stream-tabs
  button.stream-active[tuiButton][tuiAppearance][data-appearance='secondary']:hover:not(:disabled):not(
    [data-state='disabled']
  ),
.telemetry-presets
  button.stream-active[tuiButton][tuiAppearance][data-appearance='secondary']:hover:not(:disabled):not(
    [data-state='disabled']
  ) {
  background: var(--sg-filter-chip-active-bg-hover);
  color: var(--sg-filter-chip-active-fg);
  border-color: transparent;
  outline: none !important;
  box-shadow: none !important;
}

/*
 * Remove Taiga's :focus outline/shadow after mouse click.
 * Keyboard: light ring only on :focus-visible.
 */
.stream-tabs button[tuiButton][tuiAppearance][data-appearance='secondary']:focus:not(:focus-visible),
.telemetry-presets button[tuiButton][tuiAppearance][data-appearance='secondary']:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

.stream-tabs
  button[tuiButton][tuiAppearance][data-appearance='secondary']:active:not(:disabled):not([data-state='disabled']),
.telemetry-presets
  button[tuiButton][tuiAppearance][data-appearance='secondary']:active:not(:disabled):not([data-state='disabled']) {
  outline: none !important;
  box-shadow: none !important;
}

.stream-tabs button[tuiButton][tuiAppearance][data-appearance='secondary']:focus-visible,
.telemetry-presets button[tuiButton][tuiAppearance][data-appearance='secondary']:focus-visible {
  outline: 2px solid var(--sg-filter-chip-active-bg);
  outline-offset: 2px;
  box-shadow: none;
}

.stream-tabs button.stream-active[tuiButton][tuiAppearance][data-appearance='secondary']:focus-visible,
.telemetry-presets button.stream-active[tuiButton][tuiAppearance][data-appearance='secondary']:focus-visible {
  outline-color: var(--sg-filter-chip-active-bg-hover);
}
