.tbg {
  --tbg-bg: var(--color-gray-50);
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-8);
  box-sizing: border-box;
  font-family: var(--font-family-base);
  font-optical-sizing: none;
}

.tbg--off              { --tbg-bg: var(--color-gray-50); }
.tbg--on               { --tbg-bg: var(--color-gray-0); }
.tbg--disabled.tbg--off { --tbg-bg: var(--color-gray-25); }
.tbg--disabled.tbg--on  { --tbg-bg: var(--color-gray-0); }

.tbg__label {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  width: 100%;
}
.tbg__label-text { color: var(--color-gray-800); }
.tbg__optional {
  flex: 1 0 0;
  min-width: 0;
  color: var(--color-gray-300);
}

.tbg__group {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  padding: var(--spacing-4);
  width: 100%;
  box-sizing: border-box;
  border-radius: var(--radius-8);
  background: var(--tbg-bg);
}

.tbg__group .tgl {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
}

.tbg--disabled .tbg__label-text,
.tbg--disabled .tbg__optional { color: var(--color-gray-100); }

.tbg--disabled .tgl {
  --tgl-bg: transparent;
  --tgl-fg: var(--color-gray-100);
  --tgl-shadow: none;
  cursor: default;
}

.tbg__group .tgl--live:focus-visible {
  outline: 2px solid var(--color-accent-400);
  outline-offset: 2px;
}