/*
    ChipLookup (Components/Shared/ChipLookup.razor): the type-ahead pick list (budget line Merchant and Bills). Builds on
    ChipSelect (chip-select.css: cs-select field, cs-select-combo list) and adds two-line rows (name over a muted detail
    line), a logo drawn over the glyph badge, and an end badge. The input takes typing, so the field reads as text.

    Prefix: cl-. Colors: the --tx-* tokens of transaction-popups.css. Load after chip-select.css.
*/

.cl-lookup.cs-select.txc-field .e-input-group.e-control-wrapper.txc-combo,
.cl-lookup.cs-select.txc-field .e-input-group.e-control-wrapper.txc-combo input.e-input {
    cursor: text;
}

.e-ddl.e-popup.cl-combo .e-list-item {
    height: 54px;
    min-height: 54px;
    line-height: normal;
}

.e-ddl.e-popup.cl-combo .cl-item {
    height: 100%;
}

.e-ddl.e-popup.cl-combo .cl-item-glyph {
    position: relative;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    overflow: hidden;
}

/* The logo covers the glyph; when it can't load the glyph underneath shows. */
.e-ddl.e-popup.cl-combo .cl-item-logo {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.e-ddl.e-popup.cl-combo .cl-item-copy {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    min-width: 0;
}

.e-ddl.e-popup.cl-combo .cl-item-label,
.e-ddl.e-popup.cl-combo .cl-item-hint {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.e-ddl.e-popup.cl-combo .cl-item-hint {
    font-family: var(--tx-font);
    font-weight: 500;
    font-size: 11.5px;
    color: var(--tx-muted);
}

.e-ddl.e-popup.cl-combo .cl-item-badge {
    flex: 0 0 auto;
    max-width: 40%;
    margin-left: 8px;
    padding: 2px 8px;
    overflow: hidden;
    border-radius: 999px;
    font-family: var(--tx-font);
    font-weight: 600;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--tx-caution);
    background: color-mix(in srgb, var(--tx-caution) 14%, transparent);
}

.e-ddl.e-popup.cl-combo .e-list-item.e-active .cl-item-hint {
    color: inherit;
    opacity: .8;
}

@media (max-width: 480px) {
    .e-ddl.e-popup.cl-combo .cl-item-badge {
        display: none;
    }
}