.container {
  align-content: center;
  background-color: var(--Surface-Primary-Default);
  border-color: var(--Border-Interactive-Default);
  border-style: solid;
  border-width: 1px;
  border-radius: var(--Corner-radius-md);
  display: grid;
  min-width: 0; /* allow shrinkage */
  height: 60px;
  padding: var(--Space-x1) var(--Space-x2);
  transition: border-color 200ms ease;
}

.container:has(.input:focus) {
  border-color: var(--Border-Interactive-Focus);
}

.container:has(.input:disabled) {
  background-color: var(--Surface-Primary-Disabled);
  border: none;
  color: var(--Text-Interactive-Disabled);
}

.container:has(.input[data-invalid="true"], .input[aria-invalid="true"]) {
  border-color: var(--Border-Interactive-Error);

  &:focus-within {
    outline-offset: -2px;
    outline: 2px solid var(--Border-Interactive-Error);
  }
}

.input {
  background: none;
  border: none;
  color: var(--Text-Default);
  height: 1px;
  margin: 0;
  order: 2;
  overflow: visible;
  padding: 0;
  transition: height 150ms ease;
}

.input:focus,
.input:placeholder-shown,
.input[value]:not([value=""]) {
  height: 18px;
  outline: none;
}

.input:disabled {
  color: var(--Text-Interactive-Disabled);
}