:host {
  display: inline-block; --input-border-color: #d1d1d1; --input-border-color-focus: #5b9dd9; --input-box-shadow-focus: rgba(30, 140, 190, 0.8)
}
.container {
  width: 100%; display: block !important; position: relative; z-index: 100
}
.container span.box {
  display: block; width: 100%; height: 100%; background: #ffffff; box-sizing: border-box; border: var(--input-border-color) 1px solid; box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.08); position: absolute; top: 0px; left: 0px; z-index: 100; pointer-events: none; transition: all .3s ease
}
.container select {
  appearance: none; -webkit-appearance: none; vertical-align: middle; outline: none; padding: 0px 30px 0px 10px; height: 30px; border: 0px; background: url(../../../../svg/select.svg) transparent calc(100% - 4px) center no-repeat; background-size: 20px
}
.container select:focus ~ span.box {
  border-color: var(--input-border-color-focus); box-shadow: 0px 0px 2px var(--input-box-shadow-focus)
}
.container select.province {
  position: relative; z-index: 200
}
.container select.city {
  position: relative; z-index: 200
}
.container .mask {
  width: 100%; height: 100%; background: #dddddd; opacity: .3; position: absolute; top: 0px; left: 0px; z-index: -100
}
.container.disabled .mask {
  z-index: 10000
}