@import "./item-divider";
@import "./item-divider.md.vars";

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

.item-divider-md {
  @include padding-horizontal($item-md-divider-padding-start, null);

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

  font-family: $item-md-divider-font-family;
  font-size: $item-md-divider-font-size;

  color: $item-md-divider-color;
  background-color: $item-md-divider-background;
}

.item-divider-md .item-divider-inner {
  @include padding-horizontal(null, ($item-md-divider-padding-end / 2));
}


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

.item-divider-md [slot="start"],
.item-divider-md [slot="end"] {
  @include margin($item-md-slot-margin-top, $item-md-slot-margin-end, $item-md-slot-margin-bottom, $item-md-slot-margin-start);
}

.item-divider-md ion-icon[slot="start"],
.item-divider-md ion-icon[slot="end"] {
  @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);
}

.item-divider-md ion-icon[slot="start"] + .item-inner,
.item-divider-md ion-icon[slot="start"] + .item-input {
  @include margin-horizontal($item-md-padding-start + ($item-md-padding-start / 2), null);
}

.item-divider-md ion-avatar[slot="start"],
.item-divider-md ion-thumbnail[slot="start"] {
  @include margin(($item-md-padding-end / 2), $item-md-padding-end, ($item-md-padding-end / 2), 0);
}

.item-divider-md ion-avatar[slot="end"],
.item-divider-md ion-thumbnail[slot="end"] {
  @include margin(($item-md-padding-end / 2));
}


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

.item-divider-md h1 {
  @include margin(0, 0, 2px);

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

.item-divider-md h2 {
  @include margin(2px, 0);

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

.item-divider-md h3,
.item-divider-md h4,
.item-divider-md h5,
.item-divider-md h6 {
  @include margin(2px, 0);

  font-size: 14px;
  font-weight: normal;
  line-height: normal;
}

.item-divider-md p {
  @include margin(0, 0, 2px);

  overflow: inherit;

  font-size: 14px;
  line-height: normal;
  text-overflow: inherit;
  color: $item-md-paragraph-text-color;
}


// Generate Material Design Item Divider Colors
// --------------------------------------------------

@each $color-name, $color-value in $colors-md {
  $color-base: ion-color($colors-md, $color-name, base, md);
  $color-contrast: ion-color($colors-md, $color-name, contrast, md);
  $color-shade: ion-color($colors-md, $color-name, tint, md);

  .item-divider-md-#{$color-name} {
    color: $color-contrast;
    background-color: $color-base;

    p {
      color: $color-contrast;
    }

    &.activated {
      background-color: $color-shade;
    }
  }
}
