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

// Material Design Item
// --------------------------------------------------

:host {
  --ion-color-base: var(--ion-item-background-color, transparent);
  --ion-color-contrast: #{$item-md-text-color};
  --ion-color-tint: #{$item-md-background-color-active};
  --ion-color-shade: #{$item-md-border-bottom-color};
  --transition: background-color 300ms cubic-bezier(.4, 0, .2, 1);
  --padding-start: #{$item-md-padding-start};
  --inner-padding-end: #{$item-md-padding-end / 2};
  --padding-start: #{$item-md-padding-start};

  font-family: $item-md-font-family;
  font-size: $item-md-font-size;
  font-weight: normal;

  text-transform: none;
}

// Material Design Item Lines
// --------------------------------------------------

// Default input items have a border
:host(.item-interactive) {
  --border-width: #{0 0 $item-md-border-bottom-width 0};
}

// 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-md-border-bottom-width 0};
}

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

// Material Design Item Detail Push
// --------------------------------------------------

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

  font-size: 20px;
}


// Material Design Item Slots
// --------------------------------------------------

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

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

// TODO
::slotted(ion-icon[slot="start"]) + .item-inner,
::slotted(ion-icon[slot="start"]) + .item-interactive {
  @include margin-horizontal($item-md-padding-start + ($item-md-padding-start / 2), null);
}

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

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

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


// Material Design Item Button
// --------------------------------------------------

::slotted(.button-small-md) {
  --padding-top: 0;
  --padding-bottom: 0;
  --padding-start: .6em;
  --padding-end: .6em;
  --height: 25px;

  font-size: 12px;
}


// TODO, review
::slotted(.button-small-md) ion-icon[slot="icon-only"] {
  @include padding(0);
}

// Material Design Item Avatar
// --------------------------------------------------

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


// Material Design Item Thumbnail
// --------------------------------------------------

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

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


// Material Design Radio Item Label: Checked
// -----------------------------------------

// .item-radio-checked.item-md ion-label {
//   color: $radio-md-color-on;
// }


// Material Design Stacked & Floating Inputs
// --------------------------------------------------

// TODO: refactor
: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;
}


:host(:not(.item-label)) ::slotted(ion-input),
:host(:not(.item-label)) ::slotted(ion-textarea) {
  --padding-start: 0;
}