:root {
  --tel-co-bg: var(--co-white);
}

.telInput {
  position: relative;
  margin-top: var(--sp-sm);
}

.telInput input {
  padding-left: 9rem;
}

.telInput input:only-child {
  padding-left: 1rem;
}

.telInput .display,
.telInput select {
  position: absolute;
  width: 8rem;
  left: 1px;
  top: 1px;
  height: calc(var(--input-height) - 0.2rem);
  border-radius: var(--radius) 0 0 var(--radius);
  font-size: var(--fs-sm);
}

.telInput .display {
  background: var(--tel-co-bg);
  z-index: 2;
  pointer-events: none;
  text-align: center;
  padding: 0 var(--sp-sm);
  color: var(--co-gray-dk);
  border-right: 1px solid var(--co-input-border);
  font-size: var(--fs-sm);
  line-height: calc(var(--input-height) - 0.2rem);
  margin-top: 0;
}

.telInput select {
  -webkit-appearance: none;
  z-index: 1;
  border: none;
}

.telInput select:focus {
  border: 1px solid var(--co-input-focus-border);
  box-shadow: var(--co-input-focus-shadow);
  outline: none;
}

.telInput select:focus + .display {
  border-right: 1px solid transparent;
}