.eh-syringe-lite-auto-complete-list {
    background: #f8f4ec;
    color: #5c0d12;

    :root.ehs-ex & {
        background: #2b2b2b;
        color: #f1f1f1;
    }

    position: absolute;
    top: 168px;
    left: 628px;
    min-width: 570px;
    min-height: 20px;
    text-align-last: left;
    border-radius: 4px;
    box-shadow:
        0 1px 3px 0 rgba(0, 0, 0, 0.2),
        0 1px 1px 0 rgba(0, 0, 0, 0.14),
        0 2px 1px -1px rgba(0, 0, 0, 0.12);
    display: block;
    max-height: 50vh;
    overflow: hidden auto;
    padding: 8px 0;
    scroll-padding: 16px;
    scrollbar-width: thin;
    z-index: 10;

    &[hidden],
    &:empty {
        display: none;
    }

    &.exclude {
        .auto-complete-item {
            .en-name::before {
                content: '- ';
            }
        }
    }

    .auto-complete-item {
        padding: 0 8px;
        line-height: 24px;
        height: 24px;
        contain: strict;
        content-visibility: auto;
        display: flex;
        justify-content: space-between;
        cursor: pointer;

        img {
            display: inline-block !important;
            height: 8pt;
            vertical-align: text-top;
        }

        &:hover,
        &.selected {
            background: #e8ecf3;

            :root.ehs-ex & {
                background: #3e3f40;
            }
        }
    }

    .auto-complete-text {
        flex: 0 1 auto;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;

        &.en-name {
            flex-shrink: 4;
            padding-left: 8px;
            color: #5f6368;
            :root.ehs-ex & {
                color: #d9d9d9;
            }
        }
    }

    mark {
        color: inherit;
        background: #f5f500;
        :root.ehs-ex & {
            background: #727200;
        }
    }
}
