/* SokVelger — live-søk combobox (designsystem). Se komponenter/sok-velger.js. */

.sokvelger {
  position: relative;
}

.sokvelger__input {
  width: 100%;
}

/* Valgt-tilstand: skjul søkefeltet + lista, vis «chip». Drives av wrapper-klassen
   (ikke [hidden]-attributtet — .felt setter egen display som ville overstyrt det). */
.sokvelger__valgt { display: none; }
.sokvelger--valgt .sokvelger__valgt { display: flex; }
.sokvelger--valgt .sokvelger__input,
.sokvelger--valgt .sokvelger__liste { display: none; }

.sokvelger__valgt {
  align-items: center;
  gap: var(--avstand-2);
  padding: var(--avstand-1) var(--avstand-1) var(--avstand-1) var(--avstand-2);
  border: var(--kant) solid var(--farge-primary);
  border-radius: var(--radius);
  background: var(--farge-overflate);
  min-height: 2.4rem;
}

.sokvelger__valgt-innhold {
  display: flex;
  align-items: center;
  gap: var(--avstand-2);
  flex: 1;
  min-width: 0;
  font-weight: 500;
}

.sokvelger__valgt-tekst {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sokvelger__fjern {
  flex-shrink: 0;
  border: 0;
  background: transparent;
  color: var(--farge-tekst-dempet);
  font-size: 1.25rem;
  line-height: 1;
  padding: 0 var(--avstand-2);
  cursor: pointer;
  border-radius: var(--radius);
}

.sokvelger__fjern:hover {
  background: var(--farge-overflate-hover);
  color: var(--farge-tekst);
}

.sokvelger__liste {
  position: absolute;
  z-index: 30;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  margin: 0;
  padding: var(--avstand-1);
  list-style: none;
  max-height: 18rem;
  overflow-y: auto;
  background: var(--farge-bakgrunn);
  border: var(--kant) solid var(--farge-kant);
  border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.sokvelger__rad {
  display: flex;
  align-items: center;
  gap: var(--avstand-2);
  padding: var(--avstand-1) var(--avstand-2);
  border-radius: var(--radius);
  cursor: pointer;
  line-height: 1.2;
}

.sokvelger__rad:hover,
.sokvelger__rad--aktiv {
  background: var(--farge-overflate-hover);
}

.sokvelger__tekst {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sokvelger__tekst > :first-child,
.sokvelger__rad > .sokvelger__tekst {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sokvelger__under {
  font-size: var(--font-liten);
  color: var(--farge-tekst-dempet);
}

.sokvelger__tom {
  padding: var(--avstand-2);
  color: var(--farge-tekst-dempet);
  font-size: var(--font-liten);
}