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

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

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

  position: relative;

  font-family: $item-md-font-family;
  font-size: $item-md-font-size;
  font-weight: normal;
  text-transform: none;

  color: $item-md-text-color;
  background-color: $item-md-background-color;
  box-shadow: none;
  transition: background-color 300ms cubic-bezier(.4, 0, .2, 1);
}

.item-md.activated {
  background-color: $item-md-background-color-active;
}

.item-md[no-lines] {
  border-width: 0;
}

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

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

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

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

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

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

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

  overflow: inherit;

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

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

  border-bottom: 1px solid $item-md-border-color;
}


// Material Design Items in Lists
// --------------------------------------------------
// Removed the requirement that their immmediate
// parent is listed this adds support for other list components

ion-list,
ion-reorder-group > ion-gesture {
  > ion-item:first-child .item-md,
  > ion-item-sliding:first-child .item-md {
    border-top: 1px solid $item-md-border-color;
  }

  > ion-item:last-child .item-md,
  > ion-item-sliding:last-child .item-md {
    border-bottom: 1px solid $item-md-border-color;
  }

  > ion-item:last-child .item-md .item-inner,
  > ion-item-sliding:last-child .item-md .item-inner {
    border-bottom: 0;
  }
}

// If the item has the no-lines attribute remove the bottom border from:
// the item itself (for last-child items)
// the item-inner class (if it is not last)
ion-item[no-lines],
ion-item[no-lines] .item-inner {
  border-width: 0;
}


// Material Design Item Detail Push
// --------------------------------------------------

// Only show the forward arrow icon if true
.item-md.item-detail-push .item-inner {
  @include item-push-svg-url($item-md-detail-push-color);
  @include padding-horizontal(null, 32px);
  @include background-position(end, $item-md-padding-end - 2, center);

  background-repeat: no-repeat;
  background-size: 14px 14px;
}


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

.item-md [slot="start"],
.item-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-md > ion-icon[slot="start"],
.item-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-md > ion-icon[slot="start"] + .item-inner,
.item-md > ion-icon[slot="start"] + .item-input {
  @include margin-horizontal($item-md-padding-start + ($item-md-padding-start / 2), null);
}

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

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

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


// Material Design Item Button
// --------------------------------------------------

.item-md .button-small-md {
  @include padding(0, .6em);

  height: 25px;

  font-size: 12px;
}

.item-md .button-small-md ion-icon[slot="icon-only"] {
  @include padding(0);

}

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

.item-md ion-avatar {
  width: $item-md-avatar-width;
  height: $item-md-avatar-height;
}


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

.item-md ion-thumbnail {
  width: $item-md-thumbnail-width;
  height: $item-md-thumbnail-height;
}


// Generate Material Design Item and 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, shade, md);
  $color-tint: ion-color($colors-md, $color-name, tint, md);

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

    .item-inner {
      border-bottom-color: $color-shade;
    }

    p {
      color: $color-contrast;
    }

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

  .item-md-#{$color-name}.item-detail-push .item-inner {
    @include item-push-svg-url($color-shade);
  }
}
