.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;
  height: 60px;
  padding: var(--Spacing-x1) var(--Spacing-x2);
  transition: border-color 200ms ease;
}

.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;
  transition: height 150ms ease;
}

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

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