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

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

$chip-background-color:      rgba(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, .87) !default;
$chip-icon-color:            rgba(0, 0, 0, .87) !default;

ion-chip {
  display: inline-flex;

  align-self: center;

  margin: $chip-margin;
  padding: $chip-padding;

  height: $chip-height;

  border-radius: $chip-border-radius;
  font-size: $chip-font-size;
  font-weight: normal;
  line-height: $chip-height;
  background: $chip-background-color;

  vertical-align: middle;

  box-sizing: border-box;

  ion-label {
    margin: 0;

    color: $chip-label-color;
  }

  > ion-icon,
  > ion-avatar {
    margin-left: -12px;

    width: 32px;
    height: 32px;

    border-radius: 50%;
    font-size: 18px;
    line-height: 32px;
    text-align: center;
    color: $chip-icon-color;
    vertical-align: top;

    img {
      display: block;

      width: 100%;
      max-width: 100%;
      height: 100%;
      max-height: 100%;

      border-radius: 50%;
    }

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

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

  .button {
    margin: 0;
    margin-right: -4px;

    height: inherit;
  }

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