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

// Item
// --------------------------------------------------

:host {
  --background: #{globals.$ion-bg-surface-default};
  --background-activated: #{globals.$ion-bg-select-default};
  --border-color: #{globals.$ion-primitives-neutral-300};
  --border-style: #{globals.$ion-border-style-solid};
  --border-width: #{0 0 globals.$ion-border-size-025 0};
  --color: #{globals.$ion-text-default};
  --detail-icon-font-size: #{globals.$ion-scale-600};
  --detail-icon-opacity: 1;
  --min-height: #{globals.$ion-scale-1800};
  --padding-top: #{globals.$ion-space-200};
  --padding-end: #{globals.$ion-space-400};
  --padding-bottom: #{globals.$ion-space-200};
  --padding-start: #{globals.$ion-space-400};

  @include globals.typography(globals.$ion-body-lg-medium);
}

// Inner Item
// --------------------------------------------------

.item-inner {
  // This prevents the padding/margin from
  // being excluded from the height calculation.
  min-height: initial;
}

// Item Detail Icon
// --------------------------------------------------

.item-detail-icon {
  margin-inline-end: 0;
}

// Ionic Item Slots
// --------------------------------------------------

slot[name="start"]::slotted(*) {
  @include globals.margin(null, #{globals.$ion-space-400}, null, null);
}

slot[name="end"]::slotted(*) {
  @include globals.margin(null, null, null, #{globals.$ion-space-400});
}

::slotted(ion-icon:not(.item-detail-icon)) {
  color: globals.$ion-primitives-neutral-1000;

  font-size: globals.$ion-scale-1000;
}

// Item: Disabled
// --------------------------------------------------

:host(.item-disabled) .item-native::after {
  @include globals.disabled-state();
}

// Item: Activated
// --------------------------------------------------

:host(.ion-activated) .item-native {
  background: var(--background-activated);
}

// Item: Focused
// --------------------------------------------------
:host(.ion-focused) .item-native::after {
  @include globals.border-radius(inherit);
  @include globals.position(0, 0, 0, 0);

  position: absolute;

  border-width: globals.$ion-border-size-050;
  border-style: globals.$ion-border-style-solid;
  border-color: globals.$ion-border-focus-default;

  content: "";
}

// Ionic Item Lines
// --------------------------------------------------

// Full lines - apply the border to the item
// Inset lines - apply the border to the item inner
:host(.item-lines-full) {
  --border-width: #{globals.$ion-border-size-0 globals.$ion-border-size-0 globals.$ion-border-size-025
    globals.$ion-border-size-0};
}

:host(.item-lines-inset) {
  --inner-border-width: #{globals.$ion-border-size-0 globals.$ion-border-size-0 globals.$ion-border-size-025
    globals.$ion-border-size-0};
}

// Full lines - remove the border from the item inner (inset list items)
// Inset lines - remove the border on the item (full list items)
// No lines - remove the border on both (full / inset list items)
:host(.item-lines-inset),
:host(.item-lines-none) {
  --border-width: #{globals.$ion-border-size-0};
}

:host(.item-lines-full),
:host(.item-lines-none) {
  --inner-border-width: #{globals.$ion-border-size-0};
}

// Item in Select Modal
// --------------------------------------------------
:host(.in-select-modal) {
  --background-focused: #{globals.$ion-bg-neutral-subtlest-press};
  --background-focused-opacity: 0;
}

:host(.in-select-modal.ion-focused) .item-native {
  --border-radius: #{globals.$ion-border-radius-400};
}