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 {
        --inner-border-width: 0px;
        --border-width: 0px;
    }

    &.ion-valid,
    &.ion-invalid {
        --inner-border-width: 0 0 1px 0;

        &.ion-touched:not(.ion-no-validation) {
            &.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);
            }
        }
    }

    &.ion-no-validation {
        --inner-border-width: 0 0 1px 0;
    }

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

    &:not(.item-input) {
        --show-full-highlight: 0;
        --show-inset-highlight: 0;
    }

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

// 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, 16px, null, 16px);
    @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;
        --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-text-wrap > ion-checkbox::part(label),
ion-checkbox.ion-text-wrap::part(label) {
    core-format-text,
    core-format-text > *:not(pre) {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: 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) {
    core-format-text,
    core-format-text > *:not(pre) {
        white-space: normal;
        overflow: inherit;
    }
}

.item.ion-text-wrap > ion-label,
.item.ion-text-wrap ion-checkbox::part(label),
ion-checkbox.ion-text-wrap::part(label),
.item.ion-text-wrap ion-radio::part(label),
ion-radio.ion-text-wrap::part(label) {
    white-space: normal !important;
}

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, 16px);
    }

    [slot=end] {
        @include margin-horizontal(16px, null);
    }
}

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

// Make links clickable when inside radio or checkbox items. Style part.
@media (hover: hover) {
    ion-item.item-multiple-inputs:not(.item-rte):hover::part(native) {
        color: var(--color-hover);

        &::after {
            background: var(--background-hover);
            opacity: var(--background-hover-opacity);
        }
    }

    ion-item.ion-color.item-multiple-inputs:hover::part(native) {
        color: #{current-color(contrast)};

        &::after {
            background: #{current-color(contrast)};
        }
    }
}

// It fixes the click on links where ion-ripple-effect is present.
// Make links clickable when inside radio or checkbox items. Pointer and cursor part.
ion-item.item-multiple-inputs:not(.only-links):not(.item-rte),
ion-item.ion-activatable:not(.only-links) {
    cursor: pointer;
    ion-label {
        z-index: 3;
        pointer-events: none;

        ion-anchor, a,
        ion-button, button,
        ion-item.ion-focusable,
        audio, video, select, input, iframe {
            pointer-events: visible;
        }
    }

    ion-checkbox, ion-datetime, ion-radio, ion-select{
        position: static;
    }
}

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

// Case with ion-input + ion-select inside.
ion-item.item-input.item-multiple-inputs {
    .flex-row {
        width: 100%;
        ion-select {
            position: relative;
        }
    }
}