:host {
  width: 500px; display: inline-block; vertical-align: top; --height: 30px; --selected-item-color: #3e868f; --border-color: #d1d1d1; --button-color: #5cb85c; --button-hover-color: #449d44
}
.container {
  width: 100%; min-height: var(--height); display: block !important; cursor: text; background: #ffffff; box-sizing: border-box; border: var(--border-color) 1px solid; box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.08); position: relative; z-index: 100; transition: all .3s ease
}
.container div.selected {
  display: inline-block; padding: 2px 40px 2px 4px
}
.container div.selected span {
  display: inline-flex; align-items: center; box-sizing: border-box; margin: 2px 4px 2px 0px; padding: 0px 6px; line-height: 18px; background: var(--selected-item-color); border: var(--selected-item-color) 1px solid; border-radius: 4px; cursor: pointer
}
.container div.selected span:last-child {
  margin-right: 0px
}
.container div.selected span em {
  display: inline-block; font-style: normal; color: #fff
}
.container div.selected span jtbc-svg {
  margin-left: 4px; width: 8px; height: 8px; --fore-color: #fff; vertical-align: middle
}
.container span.placeholder {
  display: none; padding-left: 6px; line-height: calc(var(--height) - 2px); color: #757575
}
.container div.selected:empty + span.placeholder {
  display: inline-block
}
.container a.selector {
  width: 40px; height: 100%; background: var(--button-color); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .3s ease; position: absolute; top: 0px; right: 0px; z-index: 100
}
.container a.selector:hover {
  background: var(--button-hover-color)
}
.container a.selector jtbc-svg {
  width: 16px; height: 16px; --fore-color: #ffffff; pointer-events: none
}
.container .mask {
  width: 100%; height: 100%; background: #dddddd; opacity: 0; position: absolute; top: 0px; left: 0px; z-index: -100
}
.container.disabled .mask {
  opacity: 0.3; z-index: 10000
}
.container[max='1'] div.selected {
  display: block; width: 100%; box-sizing: border-box; padding: 0px 40px 0px 0px
}
.container[max='1'] div.selected span {
  display: block; margin: 0px; padding: 0px 30px 0px 10px; width: 100%; height: calc(var(--height) - 2px); line-height: calc(var(--height) - 2px); box-sizing: border-box; border: 0px; border-radius: 0px; position: relative
}
.container[max='1'] div.selected span em {
  display: block; width: 100%; white-space: nowrap; word-break: keep-all; overflow: hidden; text-overflow: ellipsis
}
.container[max='1'] div.selected span jtbc-svg {
  margin: 0px; transform: translate(0, -50%); position: absolute; top: 50%; right: 10px; z-index: 100
}
.container[max='1'] span.placeholder {
  padding-left: 10px
}