.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-Medium);
  display: grid;
  gap: var(--Spacing-x-half);
  grid-template-rows: auto auto;
  height: 60px;
  padding: var(--Spacing-x1) var(--Spacing-x2);
  transition: border-color 200ms ease;
}

.container:has(.input:not(:focus):placeholder-shown) {
  gap: 0;
  grid-template-rows: 1fr;
}

.container:has(.input:active, .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;
}

.input:not(:active, :focus):placeholder-shown {
  height: 0px;
}

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

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

.helpText {
  align-items: flex-start;
  display: flex;
  gap: var(--Spacing-x-half);
}

.error {
  align-items: center;
  color: var(--Scandic-Red-60);
  display: flex;
  gap: var(--Spacing-x-half);
  margin: var(--Spacing-x1) 0 0;
}