.#{$prefix}listitem {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 0;

    &:not(.#{$prefix}pinned) {
        min-width: 100%;
    }

    &.#{$prefix}hovered {
        z-index: 1;
    }

    &.#{$prefix}selected {
        z-index: 2;
    }

    &.#{$prefix}pressed {
        z-index: 3;
    }

    &.#{$prefix}listitem-placeholder {
        height: 1px;
    }

    &.#{$prefix}focused {
        // overflow: visible so that focus outline pseudo element can overlap the borders.
        // Not visible in all cases because it needs to clip listswiper shadow.
        .#{$prefix}keyboard-mode & {
            overflow: visible;
        }

        &:not(.#{$prefix}pinned) {
            .#{$prefix}keyboard-mode & {
                z-index: 10;
            }
        }

        .#{$prefix}keyboard-mode .#{$prefix}no-row-lines &:after {
            // We use negative margins on the focus border element to account for row borders.
            // These margins must be suppressed when there are no rowLines.
            margin: 0;
        }
    }

    &.#{$prefix}pinned {
        z-index: 20;
    }

    &:last-child {
        :not(.#{$prefix}infinite) > & {
            margin-bottom: 0;
        }
    }
}

.#{$prefix}listitem-body-el {
    position: relative;
    overflow: hidden;
    flex: 1 1 auto;
    display: flex;

    // inherit background color so that the default transparent background does not allow
    // the background color of list swiper items to show through.
    background-color: inherit;
}

.#{$prefix}listitem-inner-el {
    display: flex;
    align-items: center;
    background-color: inherit;
    flex: 1 1 auto;

    &.#{$prefix}tool-anchor {
        display: block;
        align-self: center;
        flex-grow: 0;
    }
}

.#{$prefix}no-row-lines > .#{$prefix}listitem {
    border: 0;
    margin-bottom: 0;
}