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

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

:host {
  @include margin($label-md-margin-top, $label-md-margin-end, $label-md-margin-bottom, $label-md-margin-start);

  font-family: $label-md-font-family;
}

:host([text-wrap]) {
  font-size: $label-md-text-wrap-font-size;

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


// Material Design Default Label Inside An Input/Select Item
// --------------------------------------------------

// TODO, takes high priority
:host-context(.item-interactive) {
  --ion-color-base: #{$label-md-text-color};
}


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

:host(.label-stacked) {
  font-size: 12px;
}

:host(.label-floating) {
  @include transform(translate3d(0, 27px, 0));
  @include transform-origin(start, top);

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

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

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

// 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: normal;

  text-overflow: inherit;

  overflow: inherit;
}

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

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