:host {
  display: inline-flex; --item-gap: 10px; --item-width: 30px; --item-height: 30px; --item-font-family: Menlo, Monaco, Consolas, monospace; --item-font-size: 16px; --item-color: #000000; --item-border: #d1d1d1 1px solid; --item-border-bottom-color: #d1d1d1; --item-border-radius: 0px; --item-box-shadow: none; --item-text-align: center; --item-border-focus: #5b9dd9 1px solid; --item-border-bottom-color-focus: #5b9dd9; --item-box-shadow-focus: 0px 0px 2px rgba(30, 140, 190, 0.8)
}
container {
  display: inline-flex !important; gap: var(--item-gap)
}
container input.text {
  box-sizing: border-box; resize: none; outline: none; width: var(--item-width); height: var(--item-height); font-family: var(--item-font-family); font-size: var(--item-font-size); color: var(--item-color); border: var(--item-border); border-bottom-color: var(--item-border-bottom-color); border-radius: var(--item-border-radius); text-align: var(--item-text-align); transition: border-color,box-shadow .3s ease
}
container input.text:focus {
  border: var(--item-border-focus); border-bottom-color: var(--item-border-bottom-color-focus); box-shadow: var(--item-box-shadow-focus)
}