/**
 * @file Inspector toggle group styles
 * Uses same segment control appearance as InspectorButtonGroup for consistency
 */

.group {
  display: inline-flex;
  gap: var(--node-editor-inspector-segment-gap);
  padding: 2px;
  background: var(--node-editor-inspector-segment-background);
  border-radius: var(--node-editor-inspector-segment-border-radius);
}

/* Size variants */
.group[data-size="default"] {
  padding: 2px;
}

.group[data-size="compact"] {
  padding: 1px;
}

.button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--node-editor-inspector-segment-padding);
  font: var(--node-editor-control-text-font);
  border: none;
  border-radius: calc(var(--node-editor-inspector-segment-border-radius) - 2px);
  background: transparent;
  color: var(--node-editor-inspector-segment-button-color);
  cursor: pointer;
  transition:
    background-color var(--node-editor-transition-duration) ease,
    color var(--node-editor-transition-duration) ease,
    box-shadow var(--node-editor-transition-duration) ease;
}

.group[data-size="compact"] .button {
  padding: 4px 6px;
}

/* Content wrapper for icons and text */
.content {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* SVG icons need line-height: 0 to remove extra space */
.content > svg {
  width: 14px;
  height: 14px;
  line-height: 0;
}

.group[data-size="compact"] .content > svg {
  width: 12px;
  height: 12px;
}

/* Hover state */
.button:hover:not([data-selected="true"]):not(:disabled) {
  background: var(--node-editor-inspector-segment-button-background-hover);
  color: var(--node-editor-inspector-segment-button-color-hover);
}

/* Selected/active state */
.button[data-selected="true"] {
  background: var(--node-editor-inspector-segment-button-background-active);
  color: var(--node-editor-inspector-segment-button-color-active);
  box-shadow: var(--node-editor-inspector-segment-button-shadow-active);
}

/* Focus state */
.button:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--node-editor-keyboard-focus-indicator-color);
}

.button[data-selected="true"]:focus {
  box-shadow:
    var(--node-editor-inspector-segment-button-shadow-active),
    0 0 0 2px var(--node-editor-keyboard-focus-indicator-color);
}

/* Disabled state */
.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  color: var(--node-editor-disabled-control-text-color);
}