: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: flex !important; align-items: center; 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.location {
  flex: 1
}
.container div.location span {
  display: flex; width: 100%; height: var(--height); box-sizing: border-box; align-items: center; margin: 0px; padding: 0px 30px 0px 10px; background: var(--selected-item-color); border: 0px; border-radius: 0px; position: relative; cursor: pointer
}
.container div.location span em {
  display: block; width: 100%; font-style: normal; color: #fff; white-space: nowrap; word-break: keep-all; overflow: hidden; text-overflow: ellipsis
}
.container div.location span jtbc-svg {
  margin: 0px; width: 8px; height: 8px; --fore-color: #fff; transform: translate(0, -50%); position: absolute; top: 50%; right: 10px; z-index: 100
}
.container span.placeholder {
  display: none; padding-left: 10px; color: #757575; transform: translate(0px, -50%); position: absolute; top: 50%; left: 0px; z-index: 100
}
.container div.location:empty + span.placeholder {
  display: block
}
.container a.selector {
  width: 40px; height: var(--height); background: var(--button-color); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease
}
.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
}