:host {
  display: flex;
  flex-direction: row;
  align-items: center;
}

button {
  all: unset;
}

.gux-segmented-control-item {
  font-family: var(--gse-ui-button-text-fontFamily);
  font-size: var(--gse-ui-button-text-fontSize);
  font-weight: var(--gse-ui-button-text-fontWeight);
  line-height: var(--gse-ui-button-text-lineHeight);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: var(--gse-ui-segmentedControl-button-gap);
  place-content: stretch flex-start;
  align-items: center;
  block-size: 100%;
  padding: var(--gse-ui-segmentedControl-button-padding);
  color: var(--gse-ui-segmentedControl-button-default-foregroundColor);
  white-space: nowrap;
  cursor: pointer;
  border-radius: var(--gse-ui-segmentedControl-borderRadius);
}
.gux-segmented-control-item.gux-icon-only {
  padding: var(--gse-ui-segmentedControl-iconOnly-padding);
}
.gux-segmented-control-item.gux-icon-only .gux-text.gux-icon-only {
  /* stylelint-disable-next-line nesting-selector-no-missing-scoping-root */
}
.gux-segmented-control-item.gux-icon-only .gux-text.gux-icon-only:not(:focus):not(:active) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}
.gux-segmented-control-item:hover {
  color: var(--gse-ui-segmentedControl-button-hover-foregroundColor);
  background-color: var(--gse-ui-segmentedControl-button-hover-backgroundColor);
}
.gux-segmented-control-item[disabled] {
  color: var(--gse-ui-segmentedControl-button-disabled-foregroundColor);
  pointer-events: none;
  cursor: default;
  user-select: none;
  background-color: var(--gse-ui-segmentedControl-button-disabled-backgroundColor);
  opacity: var(--gse-ui-segmentedControl-button-disabled-opacity);
}
.gux-segmented-control-item.gux-selected {
  color: var(--gse-ui-segmentedControl-button-active-foregroundColor);
  background-color: var(--gse-ui-segmentedControl-button-active-backgroundColor);
  box-shadow: var(--gse-ui-segmentedControl-button-active-boxShadow);
}
.gux-segmented-control-item:focus-visible {
  position: relative;
  z-index: var(--gse-semantic-zIndex-showFocus);
  outline-offset: var(--gse-ui-segmentedControl-focus-offset);
  outline: var(--gse-semantic-focusOutline-md-borderWidth) solid var(--gse-semantic-border-focus);
  outline-offset: var(--gse-semantic-focusOutline-offset);
}
.gux-segmented-control-item .gux-icon {
  line-height: 0;
}
.gux-segmented-control-item .gux-icon slot[name=icon]::slotted(gux-icon) {
  inline-size: var(--gse-ui-icon-small-size);
  block-size: var(--gse-ui-icon-small-size);
}

:host(:last-of-type) gux-segmented-control-divider {
  display: none;
}