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

// iOS Chip Button
// --------------------------------------------------

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


// iOS Clear Chip Button
// --------------------------------------------------

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


// Generate iOS Chip Button Colors
// --------------------------------------------------

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

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

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

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

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

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