@import "./chip.vars";

// Chip
// --------------------------------------------------

:host {
  /**
   * @prop --background: Background of the chip
   * @prop --color: Color of the chip
   *
   * @prop --label-margin-top: Margin top of the chip label
   * @prop --label-margin-end: Margin end of the chip label
   * @prop --label-margin-bottom: Margin bottom of the chip label
   * @prop --label-margin-start: Margin start of the chip label
   *
   * @prop --avatar-width: Width of the chip avatar
   * @prop --avatar-height: Height of the chip avatar
   * @prop --avatar-margin-top: Margin top of the chip avatar
   * @prop --avatar-margin-end: Margin end of the chip avatar
   * @prop --avatar-margin-bottom: Margin bottom of the chip avatar
   * @prop --avatar-margin-start: Margin start of the chip avatar
   */

  @include font-smoothing();

  display: inline-flex;

  align-items: center;
  align-self: center;

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

  font-family: $font-family-base;
  font-weight: normal;

  vertical-align: middle;
  box-sizing: border-box;
}

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

:host(.ion-color)::slotted(*) ion-chip-icon,
:host(.ion-color)::slotted(*) ion-chip-button {
  --color: currentColor;
}

::slotted(*) ion-label {
  @include margin(var(--label-margin-top), var(--label-margin-end), var(--label-margin-bottom), var(--label-margin-start));
}

::slotted(*) ion-avatar {
  @include margin(var(--avatar-margin-top), var(--avatar-margin-end), var(--avatar-margin-bottom), var(--avatar-margin-start));

  width: var(--avatar-width);
  height: var(--avatar-height);
}