@use "../../themes/ionic/ionic.globals.scss" as globals;
@use "./list.common";

// Ionic List
// --------------------------------------------------

// Ionic Inset List
// --------------------------------------------------

.list-ionic.list-inset {
  @include globals.margin(globals.$ion-space-100);
}

// Ionic No Lines List
// --------------------------------------------------

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

// Ionic Shapes
//
// The border radius is applied to the list, excluding
// the header. The header is styled to appear as if
// it is above the list.
//
// This makes the border radius appear to be applied
// to the first element in the list (skips the header)
// and the last element in the list. These elements
// can be either `ion-item` or `ion-item-sliding`.
// --------------------------------------------------

.list-ionic:has(ion-list-header) {
  /* Round */
  &.list-round {
    /**
     * Only apply the border radius to the bottom of the list.
     * The top of the list should not have a border radius because
     * that would include the header.
     */
    @include globals.border-radius(initial, initial, globals.$ion-border-radius-400, globals.$ion-border-radius-400);
  }

  // Target the first element in the list after the header
  &.list-round ion-list-header + * {
    /**
     * Only apply the border radius to the top of the first element.
     * The bottom of the first element should not have a border radius
     * because that would not look connected to the rest.
     */
    @include globals.border-radius(globals.$ion-border-radius-400, globals.$ion-border-radius-400, initial, initial);
  }

  /* Soft */
  &.list-soft {
    /**
     * Only apply the border radius to the bottom of the list.
     * The top of the list should not have a border radius because
     * that would include the header.
     */
    @include globals.border-radius(initial, initial, globals.$ion-border-radius-200, globals.$ion-border-radius-200);
  }

  // Target the first element in the list after the header
  &.list-soft ion-list-header + * {
    /**
     * Only apply the border radius to the top of the first element.
     * The bottom of the first element should not have a border radius
     * because that would not look connected to the rest.
     */
    @include globals.border-radius(globals.$ion-border-radius-200, globals.$ion-border-radius-200, initial, initial);
  }

  /* Rectangular */
  &.list-rectangular {
    /**
     * Only apply the border radius to the bottom of the list.
     * The top of the list should not have a border radius because
     * that would include the header.
     */
    @include globals.border-radius(initial, initial, globals.$ion-border-radius-0, globals.$ion-border-radius-0);
  }

  // Target the first element in the list after the header
  &.list-rectangular ion-list-header + * {
    /**
     * Only apply the border radius to the top of the first element.
     * The bottom of the first element should not have a border radius
     * because that would not look connected to the rest.
     */
    @include globals.border-radius(globals.$ion-border-radius-0, globals.$ion-border-radius-0, initial, initial);
  }
}

.list-ionic:not(:has(ion-list-header)) {
  /* Round */
  &.list-round {
    @include globals.border-radius(globals.$ion-border-radius-400);
  }

  /* Soft */
  &.list-soft {
    @include globals.border-radius(globals.$ion-border-radius-200);
  }

  /* Rectangular */
  &.list-rectangular {
    @include globals.border-radius(globals.$ion-border-radius-0);
  }
}

// Ionic No Lines List
// --------------------------------------------------

.list-ionic-lines-none .item-lines-default {
  --inner-border-width: #{globals.$ion-border-size-0};
  --border-width: #{globals.$ion-border-size-0};
}

// Ionic Full Lines List
// --------------------------------------------------

.list-ionic-lines-full .item-lines-default {
  --inner-border-width: #{globals.$ion-border-size-0};
  --border-width: #{globals.$ion-border-size-0} #{globals.$ion-border-size-0} #{globals.$ion-border-size-025} #{globals.$ion-border-size-0};
}

// Ionic Inset Lines List
// --------------------------------------------------

.list-ionic-lines-inset .item-lines-default {
  --inner-border-width: #{globals.$ion-border-size-0} #{globals.$ion-border-size-0} #{globals.$ion-border-size-025} #{globals.$ion-border-size-0};
  --border-width: #{globals.$ion-border-size-0};
}