@use "sass:math";
@import "./item-divider";
@import "./item-divider.md.vars";

// Material Design Item Divider
// --------------------------------------------------

:host {
  --background: #{$item-divider-md-background};
  --color: #{$item-divider-md-color};
  --padding-start: #{$item-divider-md-padding-start};
  --inner-padding-end: #{$item-divider-md-padding-end};

  min-height: $item-divider-md-min-height;

  border-bottom: $item-divider-md-border-bottom;

  font-size: dynamic-font($item-divider-md-font-size);
}


// Material Design Item Divider Slots
// --------------------------------------------------

::slotted([slot="start"]) {
  @include margin-horizontal($item-md-start-slot-margin-start, $item-md-start-slot-margin-end);
}

::slotted([slot="end"]) {
  @include margin-horizontal($item-md-end-slot-margin-start, $item-md-end-slot-margin-end);
}


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

::slotted(ion-label) {
  @include margin(13px, 0, 10px, 0);
}


// Material Design Slotted Icon
// --------------------------------------------------

::slotted(ion-icon) {
  color: $item-md-icon-slot-color;

  // The icon's font size should use em units to support
  // font scaling but evaluate to 24px at 100% font size.
  // The value in em units is calculated by dividing
  // the icon's font size in pixels by the item divider's
  // font size in pixels.
  // e.g. 24px / 14px = 1.7142857143em
  font-size: math.div($item-md-icon-slot-font-size, $item-divider-md-font-size) * 1em;
}

:host(.ion-color) ::slotted(ion-icon) {
    color: current-color(contrast);
}

::slotted(ion-icon[slot]) {
  @include margin($item-md-icon-slot-margin-top, $item-md-icon-slot-margin-end, $item-md-icon-slot-margin-bottom, $item-md-icon-slot-margin-start);
}

::slotted(ion-icon[slot="start"]) {
  @include margin-horizontal($item-md-icon-start-slot-margin-start, $item-md-icon-start-slot-margin-end);
}

::slotted(ion-icon[slot="end"]) {
  @include margin-horizontal($item-md-icon-end-slot-margin-start, $item-md-icon-end-slot-margin-end);
}


// Material Design Slotted Note
// --------------------------------------------------

::slotted(ion-note) {
  @include margin(0);

  align-self: flex-start;

  font-size: $item-md-note-slot-font-size;
}

::slotted(ion-note[slot]) {
  @include padding($item-md-note-slot-padding-top, $item-md-note-slot-padding-end, $item-md-note-slot-padding-bottom, $item-md-note-slot-padding-start);
}

// Material Design Item Divider Avatar
// --------------------------------------------------

::slotted(ion-avatar) {
  width: $item-md-avatar-width;
  height: $item-md-avatar-height;
}

// Material Design Item Divider Thumbnail
// --------------------------------------------------

::slotted(ion-thumbnail) {
  --size: #{$item-md-thumbnail-size};
}

// Material Design Item Divider Avatar/Thumbnail
// --------------------------------------------------

::slotted(ion-avatar),
::slotted(ion-thumbnail) {
  @include margin($item-md-media-slot-margin-top, $item-md-media-slot-margin-end, $item-md-media-slot-margin-bottom, $item-md-media-slot-margin-start);
}

::slotted(ion-avatar[slot="start"]),
::slotted(ion-thumbnail[slot="start"]) {
  @include margin-horizontal($item-md-media-start-slot-margin-start, $item-md-media-start-slot-margin-end);
}

::slotted(ion-avatar[slot="end"]),
::slotted(ion-thumbnail[slot="end"]) {
  @include margin-horizontal($item-md-media-end-slot-margin-start, $item-md-media-end-slot-margin-end);
}


// Material Design Item Divider Content
// --------------------------------------------------

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

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

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

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

  color: $item-md-paragraph-text-color;

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

  line-height: normal;

  text-overflow: inherit;

  overflow: inherit;
}