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

// iOS Item
// --------------------------------------------------

:host {
  --ion-color-base: var(--ion-item-background-color, transparent);
  --ion-color-contrast: #{$item-ios-text-color};
  --ion-color-tint: #{$item-ios-background-color-active};
  --ion-color-shade: #{$item-ios-border-bottom-color};
  --transition: background-color 200ms linear;
  --padding-start: #{$item-ios-padding-start};
  --inner-padding-end: #{$item-ios-padding-end / 2};
  --inner-border-width: #{0 0 $item-ios-border-bottom-width 0};

  font-family: $item-ios-font-family;
  font-size: $item-ios-font-size;
}

:host(.activated) {
  --transition: none;
}


// iOS 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: #{0 0 $item-ios-border-bottom-width 0};
}

:host(.item-lines-inset) {
  --inner-border-width: #{0 0 $item-ios-border-bottom-width 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: 0;
}

:host(.item-lines-full),
:host(.item-lines-none) {
  --inner-border-width: 0;
}


// iOS Item Slots
// --------------------------------------------------

::slotted(:not(.interactive)[slot="start"]) {
  @include margin($item-ios-slot-start-margin-top, $item-ios-slot-start-margin-end, $item-ios-slot-start-margin-bottom, $item-ios-slot-start-margin-start);
}

::slotted(:not(.interactive)[slot="end"]) {
  @include margin($item-ios-slot-end-margin-top, $item-ios-slot-end-margin-end, $item-ios-slot-end-margin-bottom, $item-ios-slot-end-margin-start);
}

::slotted(ion-icon[slot="start"]),
::slotted(ion-icon[slot="end"]) {
  @include margin($item-ios-icon-slot-margin-top, $item-ios-icon-slot-margin-end, $item-ios-icon-slot-margin-bottom, $item-ios-icon-slot-margin-start);
}

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


// iOS Item Button
// --------------------------------------------------

::slotted(.button-small) {
  --padding-top: 0;
  --padding-bottom: 0;
  --padding-start: .5em;
  --padding-end: .5em;
  --height: 24px;

  font-size: 13px;
}

// TODO
// .item-ios .button-small-ios ion-icon[slot="icon-only"] {
//   @include padding(0, 1px);
// }


// iOS Item Avatar & Thumbnail
// --------------------------------------------------

::slotted(ion-avatar) {
  width: $item-ios-avatar-width;
  height: $item-ios-avatar-height;
}

::slotted(ion-thumbnail) {
  width: $item-ios-thumbnail-width;
  height: $item-ios-thumbnail-height;
}

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

// iOS Item Detail Push
// --------------------------------------------------

.item-detail-icon {
  color: var(--detail-push-color);

  font-size: 20px;
}


// TODO: MOVE FROM RADIO
// iOS Radio Item Label: Checked
// -----------------------------------------

// :host(.item-radio-checked) ::slotted(ion-label) {
//   color: $radio-ios-color-on;
// }


:host(.item-radio) ::slotted(ion-label),
:host(.item-toggle) ::slotted(ion-label) {
  @include margin-horizontal(0, null);
}


// iOS Stacked & Floating Inputs
// --------------------------------------------------

:host(.item-label-stacked) ::slotted(ion-input),
:host(.item-label-floating) ::slotted(ion-input),
:host(.item-label-stacked) ::slotted(ion-textarea),
:host(.item-label-floating) ::slotted(ion-textarea) {
  --padding-top: 8px;
  --padding-bottom: 8px;
  --padding-start: 0;
}


// TODO
// .item-ios.item-label-stacked .label-ios + .input + .cloned-input,
// .item-ios.item-label-floating .label-ios + .input + .cloned-input {
//   @include margin-horizontal(0, null);
// }

// FROM TEXTAREA
// iOS Stacked & Floating Textarea
// --------------------------------------------------

// TODO
// .item-ios.item-label-stacked .label-ios + .input + .cloned-input,
// .item-ios.item-label-floating .label-ios + .input + .cloned-input {
//   @include margin-horizontal(0, null);
// }


// iOS Input After Label
// --------------------------------------------------

// .label-ios + .input .native-input,
// .label-ios + .input + .cloned-input {
//   @include margin-horizontal($input-ios-by-label-margin-start, null);
// }

// iOS Textarea After Label
// --------------------------------------------------

// .label-ios + ion-textarea .native-textarea,
// .label-ios + .input + .cloned-input {
//   @include margin-horizontal($textarea-ios-by-label-margin-start, null);

//   width: calc(100% - (#{$item-ios-padding-end} / 2) - #{$item-ios-padding-start});
// }