mat-chip{
  height: 20px !important;
  background-color: var(--color-surface-brand-idle) !important;
  border-radius: var(--border-radius-button) !important;
  color: var(--color-on-surface-alt-primary);
  font-size: var(--font-size-s);
  padding: 0 8px !important;
  vertical-align: top;
  .mat-chip-ripple{
    display: none !important;
  }
  span{
    padding: 0 !important;
  }
  &.neutral{
    background-color: var(--color-surface-alt-idle) !important;
  }
  &.success{
    background-color: var(--color-surface-success-idle) !important;
  }
  &.info{
    background-color: var(--color-surface-info-idle) !important;
  }
  &.warning{
    background-color: var(--color-surface-warning-idle) !important;
  }
  &.danger{
    background-color: var(--color-surface-danger-idle) !important;
  }
  &.alternative{
    background-color: var(--color-surface-neutral-idle) !important;
    color: var(--color-on-surface-neutral-primary) !important;
  }
}

/* Disabled state */

mat-chip{
  &.mat-mdc-chip-disabled{
    opacity: 1 !important;
    background-color: var(--color-surface-brand-disabled) !important;
    &.neutral{
      background-color: var(--color-surface-alt-disabled) !important;
    }
    &.success{
      background-color: var(--color-surface-success-disabled) !important;
    }
    &.info{
      background-color: var(--color-surface-info-disabled) !important;
    }
    &.warning{
      background-color: var(--color-surface-warning-disabled) !important;
    }
    &.danger{
      background-color: var(--color-surface-danger-disabled) !important;
    }
    &.alternative{
      background-color: var(--color-surface-neutral-disabled) !important;
      color: var(--color-on-surface-neutral-disabled) !important;
    }
  }
}

/* With icons */

mat-chip{
  i{
    font-size: var(--font-size-m);
  }
  span{
    display: flex;
    align-items: center;
  }
  &.icon-left{
    i{
      margin-right: 4px;
      margin-left: -4px;
    }
  }
  &.icon-right{
    i{
      margin-left: 4px;
      margin-right: -4px;
    }
  }
  &.icon-left.icon-right{
    i:first-of-type{
      margin-right: 4px !important;
      margin-left: -4px !important;
    }
  }
}

.mdc-evolution-chip__action--primary:before{
  display: none !important;
}