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

// Material Design List
// --------------------------------------------------

.list-md {
  @include margin($list-md-margin-top, $list-md-margin-end, $list-md-margin-bottom, $list-md-margin-start);
  @include padding($list-md-padding-top, $list-md-padding-end, $list-md-padding-bottom, $list-md-padding-start);

  background: $item-md-background;
}

.list-md > .input:last-child::after {
  @include position-horizontal(0, null);
}

// Material Design Inset List
// --------------------------------------------------

.list-md.list-inset {
  @include margin($list-inset-md-margin-top, $list-inset-md-margin-end, $list-inset-md-margin-bottom, $list-inset-md-margin-start);
  @include border-radius($list-inset-md-border-radius);
}

/**
 * These selectors ensure the last item in the list
 * has the correct border.
 * We need to consider the following scenarios:
 1. The last item in a list as long as it is not the only item.
 2. The item in the last item-sliding in a list.
 * Note that we do not select "ion-item-sliding ion-item:last-of-type"
 * because that will cause the borders to disappear on
 * items in an item-sliding when the item is the last
 * element in the item-sliding container.
 */
.list-md.list-inset ion-item:not(:only-of-type):last-of-type,
.list-md.list-inset ion-item-sliding:last-of-type ion-item {
  --border-width: 0;
  --inner-border-width: 0;
}

/**
 * We target :only-child instead of :only-of-type
 * otherwise borders will disappear on items inside of
 * ion-item-sliding because the item will be the only
 * one of its type inside of the ion-item-sliding group.
 */
.list-md.list-inset ion-item:only-child {
  --border-width: 0;
  --inner-border-width: 0;
}

.list-md.list-inset + ion-list.list-inset {
  @include margin(0, null, null, null);
}


// Material Design No Lines List
// --------------------------------------------------

.list-md-lines-none .item-lines-default {
  --inner-border-width: 0px;
  --border-width: 0px;
}

// Material Design Full Lines List
// --------------------------------------------------

.list-md-lines-full .item-lines-default {
  --inner-border-width: 0px;
  --border-width: #{0 0 $list-md-item-border-bottom-width 0};
}

// Material Design Inset Lines List
// --------------------------------------------------

.list-md-lines-inset .item-lines-default {
  --inner-border-width: #{0 0 $list-md-item-border-bottom-width 0};
  --border-width: 0px;
}

// Material Design List Inside A Card
// --------------------------------------------------

ion-card .list-md {
  @include margin(0);
}