.container {
  align-content: center;
  background-color: var(--Main-Grey-White);
  border-color: var(--Scandic-Beige-40);
  border-style: solid;
  border-width: 1px;
  border-radius: var(--Corner-radius-md);
  display: grid;
  min-width: 0; /* allow shrinkage */
  height: 60px;
  padding: var(--Spacing-x1) var(--Spacing-x2);
  transition: border-color 200ms ease;
}

.container:has(.input:focus) {
  border-color: var(--Scandic-Blue-90);
}

.container:has(.input:disabled) {
  background-color: var(--Main-Grey-10);
  border: none;
  color: var(--Main-Grey-40);
}

.container:has(.input[data-invalid="true"], .input[aria-invalid="true"]) {
  border-color: var(--Scandic-Red-60);
}

.input {
  background: none;
  border: none;
  color: var(--Main-Grey-100);
  height: 18px;
  margin: 0;
  order: 2;
  overflow: visible;
  padding: 0;
}

.container:has(.input:placeholder-shown) {
  align-content: space-around;
  gap: var(--Spacing-x-half);
}

.input:not(:focus):not(:placeholder-shown) {
  height: 1px;
  transition: height 150ms ease;
}

.input:focus,
.input:focus:placeholder-shown {
  height: 18px;
  transition: height 150ms ease;
  outline: none;
}

.input:disabled {
  color: var(--Main-Grey-40);
}