Neovici/cosmoz-autocomplete

import { tagged as css } from '@neovici/cosmoz-utils';

const svg =
    /* eslint-disable quotes */
    "data:image/svg+xml,%3Csvg width='11' height='8' viewBox='0 0 11 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath " +
    "d='M9.5 1L5.20039 7.04766L1.66348 3.46152' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E";
/* eslint-enable quotes */

const style = css`
    :host {
        position: fixed;
        z-index: 1000;
        font-family: var(--paper-font-subhead_-_font-family, inherit);
        background: #fff;
        min-width: 72px;
        box-shadow:
            0 3px 4px 0 rgba(0, 0, 0, 0.14),
            0 1px 8px 0 rgba(0, 0, 0, 0.12),
            0 3px 3px -2px rgba(0, 0, 0, 0.4);
        text-transform: var(--cosmoz-autocomplete-listbox-text-transform, initial);
    }
    :host(:popover-open) {
        box-sizing: border-box;
        display: block;
        margin: 0;
        border: 0;
    }
    :host([popover]) {
        padding: 0;
    }
    .items {
        position: relative;
        overflow-y: auto;
        contain: layout paint !important;
        height: 100%;
    }
    .item {
        font-size: 14px;
        padding: 0 20px;
        box-sizing: border-box;
        width: 100%;
        cursor: pointer;
        text-overflow: ellipsis;
        white-space: nowrap;
        transition: background 0.2s;
        color: var(--cosmoz-listbox-color, #101010);
        overflow: hidden;
    }

    .sizer {
        position: relative;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        z-index: -1;
        height: 0;
        width: auto;
        padding: 0 20px;
        overflow: hidden;
        max-width: inherit;
        font-size: 14px;
    }

    :host(:not([multi])) .item[aria-selected] {
        background: var(--cosmoz-listbox-single-selection-color, #dadada);
    }

    :host([multi]) .item {
        padding-left: 0;
    }
    :host([multi]) .item::before {
        content: '';
        font-size: 0;
        padding: 7.5px;
        margin: 0 8px;
        background: #fff;
        border: 1px solid #d6d6d5;
        border-radius: 4px;
        vertical-align: top;
    }
    :host([multi]) .item[aria-selected]::before {
        border-color: #5881f6;
        /* prettier-ignore */
        background: url("${svg}") #5881f6 no-repeat 50%;
    }
    :host([multi]) .sizer {
        padding-left: 33px;
    }
    .swatch {
        width: 18px;
        height: 18px;
        display: inline-block;
        box-sizing: border-box;
        vertical-align: middle;
        border-radius: 50%;
        border: 2px solid #eee;
    }
    [virtualizer-sizer]:not(.sizer) {
        line-height: 1;
    }
`;

export default style;

export const styles = ({
    index,
    height,
    itemHeight,
}: {
    index?: number;
    height: number;
    itemHeight: number;
}) => css`
    :host {
        min-height: ${itemHeight}px;
        height: ${height}px;
    }

    .item {
        line-height: ${itemHeight}px;
        height: ${itemHeight}px;
    }

    .item[data-index='${index || '0'}'] {
        background: var(
            --cosmoz-listbox-active-color,
            var(--cosmoz-selection-color, rgba(58, 145, 226, 0.1))
        );
    }
`;