/* Datalist */
.wpcz .wpcz-datalist {
    position: relative;
}

.wpcz .wpcz-datalist__list {
    margin: 0;
    padding: 0.125em;
    position: absolute;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 0.125em;
    background-color: var(--wpcz-datalist-bg-color);
    list-style: none;
    border: 1px solid var(--wpcz-datalist-border-color);
    border-radius: 0.25em;
    inline-size: 16em;
    max-inline-size: 100%;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.012), 0 1px 2px rgba(0, 0, 0, 0.02), 0 2px 16px rgba(0, 0, 0, 0.08);
}

.wpcz .wpcz-datalist__list--scrollable {
    max-block-size: 12em;
    overflow-y: auto;
}

.wpcz .wpcz-datalist__list--empty {
    display: none;
}

.wpcz .wpcz-datalist__item {
    margin: 0;
    padding-block: 0.5em;
    padding-inline: 1em;
    max-inline-size: 100%;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    cursor: pointer;
    border-radius: 0.125em;
    font-size: 1em;
    transition: background-color 0.1s ease;
}

.wpcz .wpcz-datalist__item:hover {
    background-color: var(--wpcz-datalist-bg-color-hover);
}

.wpcz .wpcz-datalist__item--selected,
.wpcz .wpcz-datalist__item--selected:hover {
    background-color: var(--wpcz-datalist-bg-color-selected);
}

.wpcz .wpcz-datalist__accessible {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    white-space: nowrap;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
}