@import "./card-title";
@import "./card-title.ios.vars";

// iOS Card Title
// --------------------------------------------------

.card-title-ios {
  @include margin($card-ios-title-margin-top, $card-ios-title-margin-end, $card-ios-title-margin-bottom, $card-ios-title-margin-start);

  @include padding($card-ios-title-padding-top, $card-ios-title-padding-end, $card-ios-title-padding-bottom, $card-ios-title-padding-start);

  display: block;

  font-size: $card-ios-title-font-size;
  font-weight: $card-ios-title-font-weight;
  line-height: 1.2;
  color: $card-ios-title-text-color;
}


// Generate iOS Card Title 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);

  .card-ios-#{$color-name} {

    .card-title-ios {
      color: $color-contrast;
    }

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

      .card-title-ios-#{$color-name} {
        color: $color-base;
      }
    }
  }

  .card-title-ios-#{$color-name} {
    color: $color-base;
  }
}
