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

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

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

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

  height: $chip-ios-height;

  font-family: $chip-ios-font-family;

  font-size: $chip-ios-font-size;
  color: $chip-ios-text-color;
  background: $chip-ios-background-color;
}

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

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

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

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


// Generate iOS Chip 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-ios-#{$color-name} {
    color: $color-contrast;
    background-color: $color-base;
  }

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

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