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

$root: 'chip';
$disabled: 'Mui-disabled';
$chip-delete-icon: 'MuiChip-deleteIcon';

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

  background: chip-theme-color('background');

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

  &:active {
    box-shadow: unset;
    background: chip-theme-color('active-background');
  }

  &:focus {
    background: chip-theme-color('focus-background');
  }

  &.#{$disabled} {
    opacity: 1;
    pointer-events: none;
    background: chip-theme-color('disabled-background');
  }

  &--regular {
    height: 25px;
    border-radius: 6px;
  }

  &--compact {
    height: 18px;
    border-radius: 10px;
  }

  &__label {
    padding: 0 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  &__delete-icon {
    &.#{$chip-delete-icon} {
      height: 100%;
      display: flex;
      align-items: center;
      margin: 0 10px 0 -5px;
    }
  }
}