@import "./chip";
@import "./chip.md.vars";

// Material Design Chip
// --------------------------------------------------

.chip-md {
  @include border-radius($chip-md-border-radius);

  @include margin($chip-md-margin-top, $chip-md-margin-end, $chip-md-margin-bottom, $chip-md-margin-start);

  height: $chip-md-height;

  font-family: $chip-md-font-family;
  font-size: $chip-md-font-size;

  color: $chip-md-text-color;
  background: $chip-md-background-color;
}

.chip-md > ion-label {
  @include margin($chip-md-label-margin-top, $chip-md-label-margin-end, $chip-md-label-margin-bottom, $chip-md-label-margin-start);
}

.chip-md > ion-icon {
  color: $chip-md-icon-fill-color;

  background-color: $chip-md-icon-background-color;
}

.chip-md ion-avatar {
  width: $chip-md-avatar-width;
  height: $chip-md-avatar-height;
}


// Generate Material Design Chip Colors
// --------------------------------------------------

@each $color-name, $color-value in $colors-md {
  $color-base: ion-color($colors-md, $color-name, base, md);
  $color-contrast: ion-color($colors-md, $color-name, contrast, md);

  .chip-md-#{$color-name} {
    color: $color-contrast;
    background-color: $color-base;
  }

  .chip-md .icon-md-#{$color-name} {
    color: $color-contrast;
    background-color: $color-base;

    svg {
      fill: $color-contrast;
      stroke: $color-contrast;
    }
  }
}
