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

// Material Design Label
// --------------------------------------------------

:host(.ion-text-wrap),
:host([text-wrap]) {
  line-height: $label-md-text-wrap-line-height;
}


// Material Design Stacked & Floating Labels
// --------------------------------------------------

/**
 * When translating the label, we need to use translateY
 * instead of translate3d due to a WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=215731
 */
:host(.label-stacked) {
  @include transform-origin(start, top);
  @include transform(translateY(50%), scale(.75));

  transition: color 150ms $label-md-transition-timing-function;
}

:host(.label-floating) {
  @include transform(translateY(96%));
  @include transform-origin(start, top);

  transition:
    color 150ms $label-md-transition-timing-function,
    transform 150ms $label-md-transition-timing-function;
}

:host(.label-stacked),
:host(.label-floating) {
  @include margin(0, 0, 0, 0);
}

:host-context(.item-has-focus).label-floating,
:host-context(.item-has-placeholder).label-floating,
:host-context(.item-has-value).label-floating {
  @include transform(translateY(50%), scale(.75));
}

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

:host-context(.item-has-focus.ion-color).label-stacked:not(.ion-color),
:host-context(.item-has-focus.ion-color).label-floating:not(.ion-color) {
  color: #{current-color(contrast)};
}


// MD Typography
// --------------------------------------------------

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

  font-size: 24px;
  font-weight: normal;
}

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

  font-size: 16px;
  font-weight: normal;
}

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

  font-size: 14px;
  font-weight: normal;

  line-height: normal;
}

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

  font-size: 14px;

  line-height: 20px;

  text-overflow: inherit;

  overflow: inherit;
}

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

:host-context(.ion-color)::slotted(p) {
  color: inherit;
}
