.segmented {
  display: inline-flex;
  gap: var(--space-hair);
  padding: var(--space-hair);
  box-sizing: border-box;
  block-size: var(--control-h);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-sunken);
}

.segmented__option {
  display: inline-flex;
  align-items: center;
  padding-inline: var(--space-3);
  border: none;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--color-text-muted);
  font-family: inherit;
  font-size: var(--text-sm);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

@media (hover: hover) {
  .segmented__option:hover {
    color: var(--color-text);
  }
}

.segmented__option--active {
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: var(--weight-medium);
  box-shadow: var(--shadow-sm);
}

@media (max-width: 768px) {
  .segmented {
    block-size: var(--control-h-touch);
  }

  .segmented__option {
    flex: 1 1 0;
    justify-content: center;
    min-inline-size: 0;
    padding-inline: var(--space-2);
  }
}