:host {
  --width: 200px; --gap: 20px; --height: 30px; --font-size: 14px; --font-color: #000; --font-disabled-color: #999; --font-invalid-color: #ff0000; --input-border-color: #d1d1d1; --input-border-color-focus: #5b9dd9; --input-box-shadow-focus: rgba(30, 140, 190, 0.8); --z-index: 100
}
.container {
  display: inline-block !important; width: var(--width); 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: relative; z-index: var(--z-index); transition: all .3s ease
}
.container div.input {
  width: 100%; box-sizing: border-box; padding: 0px calc(var(--gap) / 2); display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between
}
.container div.input span.section {
  width: calc(var(--width) / 4 - var(--gap))
}
.container div.input span.section input {
  width: 100%; margin: 0px; padding: 0px; box-sizing: border-box; background: transparent; font-size: var(--font-size); text-align: center; border: 0px; height: calc(var(--height) - 2px); outline: none; resize: none
}
.container div.input span.section input.invalid {
  color: var(--font-invalid-color)
}
.container div.input span.section input.disabled {
  color: var(--font-disabled-color); pointer-events: none
}
.container div.input em.separator {
  font-style: normal; line-height: calc(var(--height) - 2px); font-size: var(--font-size); color: var(--font-color)
}
.container div.mask {
  width: 100%; height: 100%; background: #dddddd; opacity: 0; position: absolute; top: 0px; left: 0px; z-index: -100
}
.container.focused {
  border-color: var(--input-border-color-focus); box-shadow: 0px 0px 2px var(--input-box-shadow-focus)
}
.container.disabled div.mask {
  opacity: 0.3; z-index: 10000
}