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

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

.chip-button-md {
  color: $chip-button-md-text-color;
  background-color: $chip-button-md-background-color;
}


// Material Design Clear Chip Button
// --------------------------------------------------

.chip-button-clear-md {
  color: $chip-button-md-clear-text-color;
  background-color: $chip-button-md-clear-background-color;
}


// Generate Material Design Chip Button 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-button-md-#{$color-name} {
    color: $color-contrast;
    background-color: $color-base;
  }

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

  // Clear Chip Buttons
  // --------------------------------------------------

  .chip-button-clear-md-#{$color-name} {
    color: $color-base;
    background-color: transparent;
  }

  .chip-md-#{$color-name} .chip-button-clear-md {
    color: $color-contrast;
    background-color: transparent;
  }
}
