.container {
  position: relative;
}

.comboBoxContainer {
  position: relative;
  height: 60px;
}

.label {
  position: absolute;
  left: var(--Spacing-x2);
  top: var(--Spacing-x-one-and-half);
  pointer-events: none;
}

.input {
  background-color: var(--Main-Grey-White);
  border-color: var(--Scandic-Beige-40);
  border-radius: var(--Corner-radius-Medium);
  border-style: solid;
  border-width: 1px;
  padding: var(--Spacing-x4) var(--Spacing-x2) var(--Spacing-x1);
  width: 100%;
  height: 100%;

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

.input,
.listBoxItem {
  color: var(--Main-Grey-100);
}

.button {
  background: none;
  border: none;
  cursor: pointer;
  grid-area: chevron;
  height: 100%;
  justify-self: flex-end;
  padding-left: var(--Spacing-x2);
  padding-right: var(--Spacing-x2);
  position: absolute;
  right: 0;
  bottom: 0;
  outline: none;
}

.popover {
  background-color: var(--Main-Grey-White);
  border-color: var(--Scandic-Beige-40);
  border-style: solid;
  border-width: 1px;
  border-radius: var(--Corner-radius-Medium);
  left: 0px;
  max-height: 400px;
  overflow: auto;
  padding: var(--Spacing-x2);
  top: calc(60px + var(--Spacing-x1));
  width: 100%;
}

.listBoxItem {
  padding: var(--Spacing-x1) var(--Spacing-x1) var(--Spacing-x1)
    var(--Spacing-x2);
}

.listBoxItem[data-focused="true"],
.listBoxItem[data-focus-visible="true"],
.listBoxItem[data-selected="true"],
.listBoxItem:hover {
  background-color: var(--Scandic-Blue-00);
  border-radius: var(--Corner-radius-Medium);
  cursor: pointer;
  outline: none;
}