ion-item.item {
    --detail-icon-color: var(--ion-item-detail-icon-color);
    --detail-icon-font-size: var(--ion-item-detail-icon-font-size);
    --detail-icon-opacity: var(--ion-item-detail-icon-opacity);

    ion-input.in-item,
    &.item-label > ion-label.label-stacked {
        font-size: var(--mdl-typography-fontSize-lg);
    }

    > ion-icon[slot] {
        color: var(--ion-item-icon-color);
    }

    &.item-lines-default,
    &.item-has-interactive-control {
        /** Remove lines by default and interactive control (toggles, radios, checkbox and selects) */
        --inner-border-width: 0px;
        --border-width: 0px;
    }

    &.ion-valid,
    &.ion-invalid {
        &.item-lines-default:not(.item-has-interactive-control) {
            --inner-border-width: 0 0 1px 0;
        }

        &.ion-touched {
            &.ion-invalid {
                --ion-item-border-color: var(--highlight-color-invalid);
                --highlight-background: var(--ion-item-border-color);
                --border-color: var(--ion-item-border-color);
            }
            &.ion-valid {
                --ion-item-border-color: var(--highlight-color-valid);
                --highlight-background: var(--ion-item-border-color);
                --border-color: var(--ion-item-border-color);
            }
        }
    }

    // Hide details on items to align badges.
    &.hide-detail {
        --detail-icon-opacity: 0;
    }

    &.item-has-interactive-control:focus-within {
        @include core-focus-outline();
    }

    &.item-has-interactive-control.item-interactive-disabled {
        pointer-events: none;
    }
}

// Fake item.
div.fake-ion-item {
    position: relative;
    align-items: center;
    justify-content: space-between;
    outline: none;
    color: var(--ion-text-color);
    background: var(--ion-item-background);
    text-align: initial;
    text-decoration: none;
    overflow: hidden;
    box-sizing: border-box;
}

.md div.fake-ion-item {
    font-size: var(--text-size);
    font-weight: normal;
    text-transform: none;
    @include padding(null, var(--mdl-spacing-4), null, var(--mdl-spacing-4));
    @include margin(11px, null, 10px, null);

    h1 {
        @include margin(0, 0, 2px);
        font-size: 24px;
        font-weight: normal;
    }

    h2 {
        @include margin(2px, 0);
        font-size: 16px;
        font-weight: normal;
    }

    h3,
    h4,
    h5,
    h6 {
        @include margin(2px, 0);

        font-size: var(--text-size);
        font-weight: normal;

        line-height: normal;
    }

    p {
        @include margin(0, 0, 2px);
        font-size: var(--text-size);
        line-height: 20px;
        text-overflow: inherit;
        overflow: inherit;
    }
}

.ios div.fake-ion-item {
    font-size: var(--text-size);
    @include padding(null, 10px, null, 20px);
    @include margin(10px, 8px, 10px, null);

    h1 {
        @include margin(3px, 0, 2px);
        font-size: 22px;
        font-weight: normal;
    }

    h2 {
        @include margin(0, 0, 2px);
        font-size: 17px;
        font-weight: normal;
    }

    h3,
    h4,
    h5,
    h6 {
        @include margin(0, 0, 3px);
        font-size: var(--text-size);
        font-weight: normal;
        line-height: normal;
    }

    p {
        @include margin(0, 0, 2px 0);
        font-size: var(--text-size);
        line-height: normal;
        text-overflow: inherit;
        overflow: inherit;
    }

}

// Item Headings.
// Some styles taken from ion-label
ion-item.item.item-label > ion-label,
.fake-ion-item > ion-label,
ion-item .in-item {
    font-size: var(--text-size);

    p {
        --color: var(--subdued-text-color);
        color: var(--color);
        @include margin(2px, 0);
    }

    .item-heading {
        @include margin(2px, 0);

        font-size: 1rem;
        font-weight: normal;

        text-overflow: inherit;
        overflow: inherit;
        white-space: inherit;
        --color: initial;
        color: var(--color);

        &.item-heading-secondary {
            @include margin(2px, 0);

            font-size: var(--text-size);
            font-weight: normal;
            line-height: normal;

            --color: var(--subdued-text-color);
        }
    }
}

// Correctly inherit ion-text-wrap onto labels.
.item > ion-label,
.fake-ion-item,
.item > ion-checkbox::part(label),
ion-checkbox::part(label),
.item ion-toggle::part(label),
ion-toggle::part(label),
.item > ion-input > label,
ion-input > label {
    core-format-text,
    core-format-text > *:not(pre) {
        @include ellipsis();
    }
}

.item.ion-text-wrap > ion-label,
ion-item > .in-item,
.fake-ion-item.ion-text-wrap,
.item.ion-text-wrap > ion-checkbox::part(label),
ion-checkbox.ion-text-wrap::part(label),
ion-toggle.ion-text-wrap::part(label),
.item.ion-text-wrap > ion-toggle::part(label),
.item.ion-text-wrap > ion-input > label,
ion-input.ion-text-wrap > label {
    white-space: normal;
    overflow: inherit;

    core-format-text,
    core-format-text > *:not(pre) {
        white-space: normal;
        overflow: inherit;
    }
}

ion-item .core-input-errors-wrapper {
    width: 100%;
}

ion-item.item.item-file {
    ion-thumbnail {
        --size: 32px;
        width: var(--size);
        height: var(--size);
    }

    p.item-heading {
        font-size: var(--text-size);
    }

    p {
        font-size: var(--mdl-typography-fontSize-sm);
    }

    ion-label {
        margin-top: 8px;
        margin-bottom: 8px;
    }

    ion-button {
        --a11y-sizing-minTargetSize: 40px;
    }

    &.item-directory ion-icon {
        @include margin-horizontal(0px, var(--mdl-spacing-4));
    }

    [slot=end] {
        @include margin-horizontal(var(--mdl-spacing-4), null);
    }

    // Disabled items.
    &.item-disabled,
    &.item-interactive-disabled:not(.item-multiple-inputs) ion-label {
        opacity: var(--mdl-item-disabled-opacity) !important;
    }

    // No highlight on RTE.
    &.item-rte {
        --full-highlight-height: 0px !important;
    }

    &.item-multiple-inputs.only-links  a {
        cursor: pointer;
    }

}

.item-dimmed {
    opacity: 0.7;
    --background: var(--light);
    ion-item {
        --background: var(--light);
    }
}