.container {
  position: relative;
}

.comboBoxContainer {
  background-color: var(--Main-Grey-White);
  border-color: var(--Scandic-Beige-40);
  border-radius: var(--Corner-radius-Medium);
  border-style: solid;
  border-width: 1px;
  display: grid;
  gap: var(--Spacing-x-half);
  grid-template-areas:
    "label chevron"
    "input chevron";
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  height: 60px;
  padding: var(--Spacing-x1) var(--Spacing-x2);
}

.label {
  grid-area: label;
}

.input {
  background-color: var(--Main-Grey-White);
  border: none;
  grid-area: input;
  height: 18px;
  padding: 0;
}

.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: 0;
  padding-right: var(--Spacing-x2);
}

.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-selected="true"],
.listBoxItem:hover {
  background-color: var(--Scandic-Blue-00);
  border-radius: var(--Corner-radius-Medium);
  cursor: pointer;
  outline: none;
}