:host {
  --min-height: 44px;
  --background: var(--ion-color-base);
  --background-active: var(--ion-color-tint);
  --color: var(--ion-color-contrast);
  --detail-push-color: var(--ion-color-shade);
  --border-radius: 0;
  --border-width: 0;
  --border-style: solid;
  --border-color: var(--ion-color-shade);
  --inner-border-width: 0;
  --padding-top: 0;
  --padding-bottom: 0;
  --padding-end: 0;
  --padding-start: 0;
  --inner-padding-top: 0px;
  --inner-padding-bottom: 0px;
  --inner-padding-start: 0px;
  --inner-padding-end: 0px;
  --box-shadow: none;
  --inner-box-shadow: none;
  --highlight-color-focus: var(--ion-color-primary, #3880ff);
  --highlight-color-valid: var(--ion-color-success, #10dc60);
  --highlight-color-invalid: var(--ion-color-danger, #f04141);
  --highlight-height: 2px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: block;
  color: var(--ion-color-contrast);
  text-align: initial;
  text-decoration: none;
  box-sizing: border-box; }

:host(.activated) {
  --background: var(--background-active); }

:host(.item-disabled) {
  cursor: default;
  opacity: .3;
  pointer-events: none; }

.item-native {
  padding: var(--padding-top) var(--padding-end) var(--padding-bottom) var(--padding-start);
  border-radius: var(--border-radius);
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-decoration: inherit;
  text-overflow: inherit;
  text-transform: inherit;
  text-align: inherit;
  white-space: inherit;
  color: inherit;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: var(--min-height);
  transition: var(--transition);
  border-width: var(--border-width);
  border-style: var(--border-style);
  border-color: var(--border-color);
  outline: none;
  background-color: var(--background);
  box-shadow: var(--box-shadow);
  overflow: hidden;
  box-sizing: border-box; }

button, a {
  cursor: pointer;
  user-select: none;
  -webkit-user-drag: none; }

.item-state {
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  height: var(--highlight-height); }

.item-inner {
  margin: 0;
  padding: var(--inner-padding-top) calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end)) var(--inner-padding-bottom) calc(var(--ion-safe-area-left, 0px) + var(--inner-padding-start));
  display: flex;
  flex: 1;
  flex-direction: inherit;
  align-items: inherit;
  align-self: stretch;
  min-height: inherit;
  border-width: var(--inner-border-width);
  border-style: var(--border-style);
  border-color: var(--border-color);
  box-shadow: var(--inner-box-shadow);
  overflow: hidden;
  box-sizing: border-box; }

.input-wrapper {
  display: flex;
  flex: 1;
  flex-direction: inherit;
  align-items: inherit;
  align-self: stretch;
  text-overflow: ellipsis;
  overflow: hidden;
  box-sizing: border-box; }

:host([vertical-align-top]),
:host(.item-input) {
  align-items: flex-start; }

::slotted(ion-icon) {
  font-size: 1.6em; }

::slotted(ion-button) {
  --margin-top: 0;
  --margin-bottom: 0;
  --margin-start: 0;
  --margin-end: 0;
  z-index: 1; }

:host(.item-label-stacked) .input-wrapper,
:host(.item-label-floating) .input-wrapper {
  flex: 1;
  flex-direction: column; }

:host(.item-label-stacked) ::slotted(ion-select),
:host(.item-label-floating) ::slotted(ion-select) {
  --padding-start: 0;
  align-self: stretch;
  width: 100%;
  max-width: 100%; }

:host(.item-multiple-inputs) ::slotted(ion-select) {
  position: relative; }

:host(.item-textarea) {
  align-items: stretch; }

::slotted(ion-reorder[slot]) {
  margin-top: 0;
  margin-bottom: 0; }

:host {
  --ion-color-base: var(--ion-item-background-color, transparent);
  --ion-color-contrast: var(--ion-item-text-color, var(--ion-text-color, #000));
  --ion-color-tint: var(--ion-item-background-color-active, #f1f1f1);
  --ion-color-shade: rgba(var(--ion-item-border-color-rgb, 0, 0, 0), 0.13);
  --transition: background-color 300ms cubic-bezier(.4, 0, .2, 1);
  --padding-start: 16px;
  --inner-padding-end: 8px;
  --padding-start: 16px;
  font-family: var(--ion-font-family, inherit);
  font-size: 16px;
  font-weight: normal;
  text-transform: none; }

:host(.item-interactive) {
  --border-width: 0 0 1px 0; }

:host(.item-lines-full) {
  --border-width: 0 0 1px 0; }

:host(.item-lines-inset) {
  --inner-border-width: 0 0 1px 0; }

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

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

.item-detail-icon {
  color: var(--detail-push-color);
  font-size: 20px; }

::slotted(:not(.interactive)[slot="start"]),
::slotted(:not(.interactive)[slot="end"]) {
  margin: 2px 8px 2px 0; }

::slotted(ion-icon[slot="start"]),
::slotted(ion-icon[slot="end"]) {
  margin-left: 0;
  margin-top: 3px;
  margin-bottom: 2px; }

::slotted(ion-icon[slot="start"]) + .item-inner,
::slotted(ion-icon[slot="start"]) + .item-interactive {
  margin-left: 24px; }

::slotted(ion-avatar[slot="start"]),
::slotted(ion-thumbnail[slot="start"]) {
  margin: 8px 16px 8px 0; }

::slotted(ion-avatar[slot="end"]),
::slotted(ion-thumbnail[slot="end"]) {
  margin: 8px; }

:host(.item-label-stacked) ::slotted([slot="end"]),
:host(.item-label-floating) ::slotted([slot="end"]) {
  margin-top: 7px;
  margin-bottom: 7px; }

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

::slotted(.button-small-md) ion-icon[slot="icon-only"] {
  padding: 0; }

::slotted(ion-avatar) {
  width: 40px;
  height: 40px; }

::slotted(ion-thumbnail) {
  width: 80px;
  height: 80px; }

:host(.item-toggle) ::slotted(ion-label),
:host(.item-radio) ::slotted(ion-label) {
  margin-left: 0; }

: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; }