@use './theme.scss' as *;

$root: 'segment-button';
$selected: 'Mui-selected';
$disabled: 'Mui-disabled';
$toggle-button-root: 'MuiToggleButton-root';

.#{$root} {
  @include segment-button-theme-modifiers();

  height: 25px;
  background: segment-button-theme-color('background');
  border: 0 !important;
  padding: 5px 30px;
  margin: 0 !important;
  max-width: calc(25ch + 60px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  &:hover {
    background: segment-button-theme-color('hover-background');
  }

  &.#{$toggle-button-root}:not(:first-of-type) {
    border-left: 1px solid segment-button-theme-color('border') !important;
  }

  &.#{$selected}.#{$toggle-button-root} {
    background: segment-button-theme-color('selected-background');

    &:hover {
      background: segment-button-theme-color('selected-hover-background');
    }
  }

  &.#{$disabled} {
    &.#{$selected} {
      background: segment-button-theme-color('disabled-selected-background');
    }
  }
}