.alignmentGroupsContainer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--node-editor-inspector-space-xs);
}

.alignmentGroup {
  display: flex;
  align-items: stretch;
  gap: var(--node-editor-inspector-segment-gap);
  height: var(--node-editor-inspector-control-height);
  padding: 2px;
  background: var(--node-editor-inspector-segment-background);
  border-radius: var(--node-editor-inspector-segment-border-radius);
  box-sizing: border-box;
}

.alignmentButton {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 0;
  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;
  box-sizing: border-box;
  transition:
    background-color var(--node-editor-transition-duration) ease,
    color var(--node-editor-transition-duration) ease;
}

.alignmentButton>svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.alignmentButton:hover:not(:disabled) {
  background: var(--node-editor-inspector-segment-button-background-hover);
  color: var(--node-editor-inspector-segment-button-color-hover);
}

.alignmentButton:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--node-editor-keyboard-focus-indicator-color);
}

.alignmentButton:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  color: var(--node-editor-disabled-control-text-color);
}