:host([multiple]) {
    padding: 0.66em;
    box-shadow: -1px -1px 2px -1px rgba(0, 0, 0, 0.5), 1px 1px 1px rgba(255, 255, 255, 0.33), inset 0 0 0 1px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

:host {
    user-select: none;
    -webkit-user-select: none;
    /* Safari fallback only */
    -webkit-user-select: none;
    /* Chrome/Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* IE10+ */
    vertical-align: bottom;
    display: inline-block;
    width: 12em;
    line-height: 1.33;
    font-size: inherit;
    padding: 0.6em 0.66em;
    border-radius: 4px;
    box-sizing: border-box !important;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    box-shadow:
        inset 1px 1px 2px rgb(255 255 255 / 50%),
        inset -1px -1px 2px rgb(0 0 0 / 25%),
        inset 0 0 0 1px rgb(0 0 0 / 25%);
    background-color: transparent;
    color: inherit;
}

:host div {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

:host svg {
    user-select: none;
    pointer-events: none;
    width: 0.75em;
    color: inherit;
    position: absolute;
    right: 0;
    opacity: 0.88;
    display: block;
    line-height: 1em;
}

:host span {
    user-select: none;
    pointer-events: none;
    width: 100%;
    position: absolute;
}

:host span::after {
    content: attr(data-selected);
    display: inline-block;
    vertical-align: bottom;
    width: 100%;
    line-height: inherit;
    flex: 1 1 auto;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

:host([disabled]) {
    box-shadow: none;
    background-color: hsla(0deg, 0%, 50%, 0.5);
    filter: grayscale(1);
}

:host(:focus-within:not([multiple])) {
    outline: solid 2px;
}