.ux-tags {
    --_bg: var(--ux-soft);
    --_fg: var(--ux-fg);
    --_bd: var(--ux-border);
    --_accent: var(--ux-accent);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px;
    border: 1px solid var(--_bd);
    border-radius: var(--ux-radius);
    background: transparent;
    color: var(--_fg);
    min-height: 38px;
}

    .ux-tags[aria-disabled="true"] {
        opacity: .6;
        pointer-events: none;
    }

.ux-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--_bg);
    border: 1px solid var(--_bd);
    border-radius: 999px;
    padding: 2px 8px;
    line-height: 1.1;
}

.ux-tag__x {
    border: 1px solid var(--_bd);
    background: transparent;
    color: inherit;
    border-radius: 999px;
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    cursor: pointer;
    font-size: 12px;
    padding: 0;
}

.ux-tags__input {
    min-width: 120px;
    flex: 1 0 160px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--_fg);
    padding: 4px 6px;
}

.ux-tags__hint {
    opacity: .6;
}

.ux-tags__list {
    position: absolute;
    z-index: 10;
    min-width: 220px;
    background: var(--ux-bg);
    color: var(--ux-fg);
    border: 1px solid var(--_bd);
    border-radius: var(--ux-radius);
    box-shadow: var(--ux-shadow);
    margin-top: 4px;
    overflow: hidden;
    display: none;
}

    .ux-tags__list.is-open {
        display: block;
    }

.ux-tags__opt {
    padding: 6px 8px;
    cursor: pointer;
}

    .ux-tags__opt.is-active {
        background: color-mix(in oklab, var(--_accent) 25%, transparent);
    }

    .ux-tags__opt.is-disabled {
        opacity: .5;
        pointer-events: none;
    }