:host {
  display: block;
  box-sizing: border-box;
  /** @prop --segmented-button-background-color: [DEPRECATED] Segmented button background color */
  --segmented-button-background-color: var(--color-background-base-default);
  /** @prop --segmented-button-text-color: [DEPRECATED] Segmented button text color */
  --segmented-button-text-color: var(--color-background-interactive-default);
  /** @prop --segmented-button-border-color: [DEPRECATED] Segmented button border color */
  --segmented-button-border-color: var(--color-border-interactive-muted);
  /** @prop --segmented-button-hover-background-color: [DEPRECATED] Segmented button hover background color */
  --segmented-button-hover-background-color: var(
      --color-background-base-hover
  );
  /** @prop --segmented-button-hover-text-color: [DEPRECATED] Segmented button hover text color */
  --segmented-button-hover-text-color: var(--color-text-interactive-hover);
  /** @prop --segmented-button-hover-border-color: [DEPRECATED]  Segmented button hover border color */
  --segmented-button-hover-border-color: var(
      --color-border-interactive-muted
  );
  /** @prop --segmented-button-selected-background-color: [DEPRECATED] Segmented button selected background color */
  --segmented-button-selected-background-color: var(
      --color-background-surface-selected
  );
  /** @prop --segmented-button-selected-text-color: [DEPRECATED] Segmented button selected text color */
  --segmented-button-selected-text-color: var(--color-text-primary);
  /** @prop --segmented-button-selected-hover-background-color: [DEPRECATED] Segmented button selected hover background color */
  --segmented-button-selected-hover-background-color: var(
      --color-background-surface-selected
  );
  /** @prop --segmented-button-selected-hover-text-color: [DEPRECATED] Segmented button selected hover text color */
  --segmented-button-selected-hover-text-color: var(--color-text-primary);
  /** @prop --segmented-button-selected-hover-border-color: [DEPRECATED] Segmented button selected hover border color */
  --segmented-button-selected-hover-border-color: var(
      --color-border-interactive-muted
  );
  /** @prop --segmented-button-border-radius: [DEPRECATED] Segmented button border radius */
  --segmented-button-border-radius: var(--radius-base);
}

:host([disabled]) {
  opacity: var(--disabled-opacity);
  cursor: not-allowed;
  pointer-events: none;
}
:host([disabled]) label {
  border-color: var(--segmented-button-border-color);
}

:host([hidden]) {
  display: none;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

.rux-segmented-button {
  display: inline-flex;
  height: 1.625rem;
  padding: 0;
  margin: 0;
  list-style: none;
  border-radius: var(--segmented-button-border-radius);
  background-color: var(--segmented-button-background-color);
}
.rux-segmented-button--large {
  height: 2.875rem;
}
.rux-segmented-button--medium {
  height: 2.125rem;
}

.rux-segmented-button__segment {
  width: auto;
  margin: 0;
  padding: 0;
}
.rux-segmented-button__segment + .rux-segmented-button__segment label {
  border-right: none;
}
.rux-segmented-button__segment:hover + .rux-segmented-button__segment label {
  border-left-color: var(--segmented-button-hover-border-color);
}
.rux-segmented-button__segment label {
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  height: 1.5625rem;
  margin: 0;
  padding: 0 0.75rem;
  border: 1px solid var(--segmented-button-border-color);
  color: var(--segmented-button-text-color);
  background-color: var(--segmented-button-background-color);
  font-family: var(--font-body-1-font-family);
  font-size: var(--font-body-1-font-size);
  letter-spacing: var(--font-body-1-letter-spacing);
  font-weight: var(--font-body-1-font-weight);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.rux-segmented-button__segment label:hover {
  background-color: var(--segmented-button-hover-background-color);
  border-color: var(--segmented-button-hover-border-color);
  color: var(--segmented-button-hover-text-color);
  outline: none;
}
.rux-segmented-button__segment .rux-segmented-button-label {
  height: 1.625rem;
  padding: 0.219rem 1rem;
}
.rux-segmented-button__segment .rux-segmented-button-label--large {
  height: 2.875rem;
  padding: 0.844rem 1rem;
}
.rux-segmented-button__segment .rux-segmented-button-label--medium {
  height: 2.125rem;
  padding: 0.469rem 1rem;
}
.rux-segmented-button__segment input {
  display: none !important;
}
.rux-segmented-button__segment input:checked + label {
  background-color: var(--segmented-button-selected-background-color);
  color: var(--segmented-button-selected-text-color);
}
.rux-segmented-button__segment input:checked:hover + label {
  background-color: var(--segmented-button-selected-hover-background-color);
  color: var(--segmented-button-selected-hover-text-color);
  border-color: var(--segmented-button-hover-border-color);
}
.rux-segmented-button__segment:first-child label {
  border-radius: var(--segmented-button-border-radius) 0 0 var(--segmented-button-border-radius);
  border-right: none;
}
.rux-segmented-button__segment:first-child label:hover {
  border-color: var(--segmented-button-hover-border-color);
}
.rux-segmented-button__segment:last-child label {
  border-radius: 0 var(--segmented-button-border-radius) var(--segmented-button-border-radius) 0;
  border-right: 1px solid var(--segmented-button-border-color);
}
.rux-segmented-button__segment:last-child label:hover {
  border-right-color: var(--segmented-button-hover-border-color);
}