@import '@teamleader/ui-utilities';

:root {
  --button-border-radius: calc(0.4 * var(--unit));
  --button-margin: calc(0.6 * var(--unit));
}

.group {
  display: flex;
  align-items: center;

  > * {
    margin-left: var(--button-margin);
    margin-right: var(--button-margin);
  }

  > *:first-child {
    margin-left: 0;
  }

  > *:last-child {
    margin-right: 0;
  }
}

.segmented {
  > * {
    border-radius: 0;
    margin-left: -1px;
    margin-right: 0;
  }

  > *:first-child:not(:only-child) {
    border-radius: var(--button-border-radius) 0 0 var(--button-border-radius);
    margin-left: 0;
  }

  > *:last-child:not(:only-child) {
    border-radius: 0 var(--button-border-radius) var(--button-border-radius) 0;
  }

  > *:only-child {
    border-radius: var(--button-border-radius);
  }
}

@import '@teamleader/ui-utilities';

:root {
  --button-border-radius: calc(0.4 * var(--unit));
  --button-margin: calc(0.6 * var(--unit));
}

.group {
  display: flex;
  align-items: center;
  min-width: 0;

  > * {
    margin-left: var(--button-margin);
    margin-right: var(--button-margin);
  }

  > *:first-child {
    margin-left: 0;
  }

  > *:last-child {
    margin-right: 0;
  }
}

.segmented {
  > * {
    border-radius: 0;
    margin-left: -1px;
    margin-right: 0;
  }

  > *:first-child:not(:only-child) {
    border-radius: var(--button-border-radius) 0 0 var(--button-border-radius);
    margin-left: 0;
  }

  > *:last-child:not(:only-child) {
    border-radius: 0 var(--button-border-radius) var(--button-border-radius) 0;
  }

  > *:only-child {
    border-radius: var(--button-border-radius);
  }
}

Add min-width to fix text overflow ellipsis
Add min-width to fix text overflow ellipsis
