@import "../../globals.core";

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

$chip-background-color:      rgba(0,0,0,0.12) !default;
$chip-font-size:             13px !default;
$chip-height:                32px !default;
$chip-border-radius:         16px !default;
$chip-padding:               0 12px !default;
$chip-margin:                2px 0 !default;

$chip-label-color:           rgba(0,0,0,0.87) !default;

$chip-icon-color:            rgba(0,0,0,0.87) !default;

ion-chip {
  background: $chip-background-color;
  display: inline-block;
  height: $chip-height;
  line-height: $chip-height;
  border-radius: $chip-border-radius;
  padding: $chip-padding;
  margin: $chip-margin;

  box-sizing: border-box;
  vertical-align: middle;
  display: inline-flex;
  align-self: center;

  font-size: $chip-font-size;
  font-weight: normal;

  ion-label {
    margin: 0;
    color: $chip-label-color;
  }

  > ion-icon,
  > ion-avatar {
    width: 32px;
    height: 32px;
    margin-left: -12px;
    vertical-align: top;
    border-radius: 50%;
    text-align: center;
    line-height: 32px;
    color: $chip-icon-color;
    font-size: 18px;

    img {
      max-width: 100%;
      max-height: 100%;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      display: block;
    }

    + ion-label {
      margin-left: 8px;
    }
  }

  ion-avatar {
    min-width: 32px;
    min-height: 32px;
  }

  .button {
    height: inherit;
    margin: 0;
    margin-right: -4px;
  }

  ion-icon[name="close-circle"] {
    font-size: 1.2em;
  }
}