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

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

:host(.ion-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),
:host(.label-floating) {
  @include margin(0, 0, 0, 0);
  /* stylelint-disable property-disallowed-list */
  transform-origin: top left;
  /* stylelint-enable property-disallowed-list */
}

:host(.label-stacked.label-rtl),
:host(.label-floating.label-rtl) {
  /* stylelint-disable property-disallowed-list */
  transform-origin: top right;
  /* stylelint-enable property-disallowed-list */
}

:host(.label-stacked) {
  @include transform(translateY(50%), scale(0.75));

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

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

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

:host-context(.ion-focused).label-floating,
: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(translateY(50%), scale(0.75));
}

:host-context(.ion-focused).label-stacked:not(.ion-color),
:host-context(.ion-focused).label-floating:not(.ion-color),
: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(.ion-focused.ion-color).label-stacked:not(.ion-color),
:host-context(.ion-focused.ion-color).label-floating:not(.ion-color),
: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)};
}

:host-context(.ion-invalid.ion-touched).label-stacked:not(.ion-color),
:host-context(.ion-invalid.ion-touched).label-floating:not(.ion-color) {
  color: var(--highlight-color-invalid);
}

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

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

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

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

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

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

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

  line-height: normal;
}

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

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

  line-height: dynamic-font(20px);

  text-overflow: inherit;

  overflow: inherit;
}

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

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