/*
 * Shared look for every SegmentedControl. The control's appearance is owned here
 * — once — so the Draft/Published and fit-mode instances can't drift apart again.
 * Selected option uses --layer-02 (a neutral high-contrast fill, per Carbon's
 * content switcher); --accent stays reserved for primary actions (e.g. Publish),
 * so "current selection" never reads as "the action to take". Call sites may still
 * pass className/optionClassName/activeClassName for layout-specific additions.
 */
.group {
  display: inline-flex;
  /* The control scale (tokens.css): the 1px borders live inside the 32px box. */
  height: var(--control-height);
  border: var(--border-width) solid var(--border-strong);
}

.option {
  appearance: none;
  display: inline-flex;
  align-items: center;
  border: none;
  background: var(--bg);
  color: var(--text-secondary);
  font: inherit;
  font-size: 13px;
  line-height: 1;
  padding: 0 var(--space-3);
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}

.option + .option {
  border-left: var(--border-width) solid var(--border-strong);
}

.option:hover {
  background: var(--layer-01);
  color: var(--text);
}

.active,
.active:hover {
  background: var(--layer-02);
  color: var(--text);
}

/* Disabled option: perceivable but inert (dimmed, no hover affordance). */
.option[aria-disabled='true'],
.option[aria-disabled='true']:hover {
  color: var(--text-placeholder);
  background: var(--bg);
  cursor: not-allowed;
}