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

// iOS Label
// --------------------------------------------------

:host(.ion-text-wrap) {
  font-size: $label-ios-text-wrap-font-size;

  line-height: $label-ios-text-wrap-line-height;
}

// iOS Stacked & Floating Labels
// --------------------------------------------------

:host(.label-stacked) {
  @include margin(null, null, 4px, null);

  font-size: dynamic-font(14px);
}

:host(.label-floating) {
  @include margin(null, null, 0, null);
  @include transform(translate(0, 29px));
  @include transform-origin(start, top);

  transition: transform 150ms ease-in-out;
}

:host-context(.item-textarea).label-floating {
  @include transform(translate(0, 28px));
}

:host-context(.item-has-focus).label-stacked,
:host-context(.item-has-focus).label-floating {
  color: $label-ios-text-color-focused;
}

:host-context(.item-has-focus).label-floating,
:host-context(.item-has-placeholder:not(.item-input)).label-floating,
:host-context(.item-has-value).label-floating {
  @include transform(scale(0.82));
}

// iOS Typography
// --------------------------------------------------

::slotted(*) h1 {
  @include margin(3px, 0, 2px);

  font-size: dynamic-font(22px);
  font-weight: normal;
}

::slotted(*) h2 {
  @include margin(0, 0, 2px);

  font-size: dynamic-font(17px);
  font-weight: normal;
}

::slotted(*) h3,
::slotted(*) h4,
::slotted(*) h5,
::slotted(*) h6 {
  @include margin(0, 0, 3px);

  font-size: dynamic-font(14px);
  font-weight: normal;

  line-height: normal;
}

::slotted(*) p {
  @include margin(
    $item-ios-paragraph-margin-top,
    $item-ios-paragraph-margin-end,
    $item-ios-paragraph-margin-bottom,
    $item-ios-paragraph-margin-start
  );

  font-size: $item-ios-paragraph-font-size;

  line-height: normal;

  text-overflow: inherit;

  overflow: inherit;
}

::slotted(p) {
  color: #{$item-ios-paragraph-text-color};
}

:host(.in-item-color)::slotted(p) {
  color: inherit;
}

::slotted(*) h2:last-child,
::slotted(*) h3:last-child,
::slotted(*) h4:last-child,
::slotted(*) h5:last-child,
::slotted(*) h6:last-child,
::slotted(*) p:last-child {
  @include margin(null, null, 0, null);
}