@import "./title";

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

:host {
  @include position(0, null, null, 0);
  @include padding(var(--padding-top), 90px, var(--padding-bottom));

  position: absolute;

  width: 100%;
  height: 100%;

  transform: translateZ(0);

  font-size: dynamic-font-max(17px, 1.2);
  font-weight: 600;

  text-align: center;
  box-sizing: border-box;
  pointer-events: none;
}


// iOS Title: Small
// --------------------------------------------------

:host(.title-small) {
  @include padding(6px, 9px, 16px, 9px);

  position: relative;

  font-size: dynamic-font-max(13px, 1.8);
  font-weight: normal;
}


// iOS Title: Large
// --------------------------------------------------

:host(.title-large) {
  @include padding(2px, 12px, 4px, 12px);
  @include transform-origin(left, center);

  position: static;

  align-items: flex-end;

  min-width: 100%;

  font-size: dynamic-font-max(34px, 1.8);

  font-weight: 700;

  text-align: start;
}

:host(.title-large.title-rtl) {
  @include transform-origin(right, center);
}

:host(.title-large.ion-cloned-element) {
  --color: #{$text-color};
  font-family: var(--ion-font-family);
}

:host(.title-large) .toolbar-title {
  @include transform-origin(inherit);

  /**
   * During a page transition
   * if the large title and the back button
   * texts match up, the back button should be
   * scaled to roughly match the dimensions of
   * the large title text. The following line
   * ensures that the scale values are accurate.
   */
  width: auto;
}