.autoComplete_wrapper {
    position: relative;
    margin-bottom: var(--pico-spacing); /* therefore, this widget is behaving like all other form components with PicoCSS */
}

.autoComplete_wrapper > input {
    margin-bottom: 0; /* The margin is now on the wrapper (see above), not the input */
}

.autoComplete_wrapper > ul {
    z-index: 1000;
    position: absolute;
    width: 100%;
    left: 0;
    color: var(--pico-dropdown-color);
    background-color: var(--pico-dropdown-background-color);
    border: var(--pico-border-width) solid var(--pico-dropdown-border-color);
    border-radius: var(--pico-border-radius);
    box-shadow: var(--pico-dropdown-box-shadow);
    transition: opacity var(--pico-transition),transform 0s ease-in-out 1s;
    padding: 0;
    margin: 0;
    margin-top: var(--pico-outline-width);
}

.autoComplete_wrapper > ul > li {
    list-style: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: calc(var(--pico-form-element-spacing-vertical) * .5) var(--pico-form-element-spacing-horizontal);
    margin-bottom: 0;
}

.autoComplete_wrapper > ul > li:hover {
    cursor: pointer;
    background-color: var(--pico-dropdown-hover-background-color);
}

.autoComplete_wrapper > ul > li mark {
    background-color: var(--pico-mark-background-color);
    color: var(--pico-mark-color);
    font-weight: bold;
}

.autoComplete_wrapper > ul > li::selection,
.autoComplete_wrapper > ul > li[aria-selected="true"] {
    color: var(--pico-primary);
    background-color: var(--pico-dropdown-hover-background-color);
}