$badge-sizes: small, medium, large;
$badge-variants: default, success, warning, danger, info;

.mat-icon {
  &.badge__icon,
  .badge__icon--slot > & {
    width: var(--badge-icon-size);
    height: var(--badge-icon-size);
    font-size: var(--badge-icon-size);
    line-height: var(--badge-icon-size);

    &:hover {
      color: inherit;
    }
  }
}

.mdc-evolution-chip.mat-mdc-chip.badge {
  @extend .badge;

  --mdc-chip-container-height: auto;
  --mdc-chip-with-avatar-avatar-size: var(--badge-icon-size);

  min-width: 0;
  width: auto;
  justify-content: flex-start;

  @each $size in $badge-sizes {
    &.badge--#{$size} {
      @extend .badge--#{$size};
    }
  }

  @each $variant in $badge-variants {
    &.badge--#{$variant} {
      @extend .badge--#{$variant};
    }
  }

  &.badge--interactive {
    @extend .badge--interactive;
  }

  &:hover {
    border-color: var(--badge-border-color, transparent);
  }

  .mdc-evolution-chip__cell--primary,
  .mdc-evolution-chip__action--primary {
    min-width: 0;
  }

  .mdc-evolution-chip__action--primary {
    padding: 0;
    gap: var(--badge-gap);
  }

  .mdc-evolution-chip__graphic {
    flex: none;
    padding: 0;
    width: auto;

    > * {
      width: var(--badge-icon-size);
      height: var(--badge-icon-size);
      font-size: var(--badge-icon-size);
      line-height: var(--badge-icon-size);
      color: inherit;
    }
  }

  // #Trailing icon
  &.mdc-evolution-chip--with-trailing-action {
    --badge-trailing-allowance: calc(var(--badge-icon-size) + var(--badge-gap));

    max-width: calc(
      var(--badge-max-width, 100% - var(--badge-trailing-allowance)) +
      var(--badge-trailing-allowance)
    );

    .mdc-evolution-chip__graphic {
      padding: 0;
    }

    .mdc-evolution-chip__icon--trailing {
      width: var(--badge-icon-size);
      height: var(--badge-icon-size);
      padding: 0;

      font-size: var(--badge-icon-size);
      line-height: var(--badge-icon-size);
      color: inherit;

      transition: transform 150ms ease;
    }
  }

  &[aria-expanded='true'] .mdc-evolution-chip__icon--trailing {
    transform: rotate(180deg);
  }

  &,
  .mdc-evolution-chip__action {
    cursor: inherit;
  }

  &.badge--no-ripple:hover .mat-mdc-chip-focus-overlay {
    opacity: 0;
  }


  .mdc-evolution-chip__text-label {
    @extend .badge__label;

    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
  }
}