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

// iOS List
// --------------------------------------------------

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

  background: $item-ios-background;
}


// iOS Inset List
// --------------------------------------------------

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

.list-ios.list-inset ion-item {
  --border-width: 0 0 1px 0;
  --inner-border-width: 0;
}

.list-ios.list-inset ion-item:last-child {
  --border-width: 0;
  --inner-border-width: 0;
}


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


// iOS No Lines List
// --------------------------------------------------

.list-ios-lines-none .item {
  --border-width: 0;
  --inner-border-width: 0;
}

// iOS Full Lines List
// --------------------------------------------------

.list-ios-lines-full .item,
.list-ios .item-lines-full {
  --border-width: #{0 0 $list-ios-item-border-bottom-width 0};
}

.list-ios-lines-full .item {
  --inner-border-width: 0;
}


// iOS Inset Lines List
// --------------------------------------------------

.list-ios-lines-inset .item,
.list-ios .item-lines-inset {
  --inner-border-width: #{0 0 $list-ios-item-border-bottom-width 0};
}

// Remove the border from items in lists
// if they are explicitly styled by the item
// to be different than the list
.list-ios .item-lines-inset {
  --border-width: 0;
}

.list-ios .item-lines-full {
  --inner-border-width: 0;
}

.list-ios .item-lines-none {
  --border-width: 0;
  --inner-border-width: 0;
}


// iOS List Inside A Card
// --------------------------------------------------

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