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

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

.toolbar-ios ion-title {
  @include position(0, null, null, 0);
  @include padding(0, 90px, 1px);

  position: absolute;

  width: 100%;
  height: 100%;

  transform: translateZ(0);

  pointer-events: none;
}

.toolbar-title-ios {
  @include text-align($toolbar-ios-title-text-align);

  font-size: $toolbar-ios-title-font-size;
  font-weight: $toolbar-ios-title-font-weight;
  color: $toolbar-ios-title-text-color;

  letter-spacing: -.01em;

  pointer-events: auto;
}

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

  .toolbar-#{$color-name} .toolbar-title-ios {
    color: $color-contrast;
  }
}
