.#{$prefix}menuitem {
    display: flex;
    // vertical layout to support contained "separator" element
    flex-direction: column;

    .#{$prefix}body-el {
        position: relative;
        display: flex;
        align-items: center;
        max-width: 100%;

        // prevent gray background on tap in mobile webkit
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
        text-decoration: none;
        outline: 0;
    }

    .#{$prefix}text-el {
        flex: 1 1 auto;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .#{$prefix}arrow-el {
        display: none;
    }

    &.#{$prefix}has-arrow .#{$prefix}arrow-el {
        display: flex;
    }

    .#{$prefix}icon-wrap-el {
        display: none;
        justify-content: center;
        flex-shrink: 0;
    }

    &.#{$prefix}indented .#{$prefix}left-icon-wrap-el {
        display: flex;
        visibility: hidden;
    }

    &.#{$prefix}has-left-icon .#{$prefix}left-icon-wrap-el,
    &.#{$prefix}has-right-icon .#{$prefix}right-icon-wrap-el {
        display: flex;
        visibility: visible;
    }

    &:first-child .#{$prefix}menuseparator {
        display: none;
    }
}