@import "./chip-icon.vars";

:host {
  /**
   * @prop --background: Background of the Chip Icon
   * @prop --color: Color of the Chip Icon
   */
  @include border-radius(50%);

  display: inline-flex;

  align-items: center;
  justify-content: center;

  width: var(--width, 32px);
  height: var(--height, 32px);

  background: var(--background);
  color: var(--color);

  font-size: 18px;
}

:host(.chip-icon-clear) {
  --background: transparent;
  --color: #{$chip-icon-clear-color};
}

:host(.chip-icon-solid) {
  --background: #{ion-color(primary, base)};
  --color: #{ion-color(primary, contrast)};
}

:host(.chip-icon-solid.ion-color) {
  background: current-color(base);
  color: current-color(contrast);
}

:host(.chip-icon-clear.ion-color) {
  background: transparent;
  color: current-color(base);
}