/**
* The list view of the boliger.
*
* Structure only: the colours, the typography and the spacing are set per widget from the
* style tab in Elementor. The background of a row is settled in three steps, see the rule
* on .bv-liste-td further down.
*/

.bv-liste {
  --bv-liste-kant: rgba(0, 0, 0, 0.12);
  --bv-rad-stripe: rgba(0, 0, 0, 0.035);
  --bv-rad-hover-tone-ground: rgba(0, 0, 0, 0.05);
}

/** FILTRE **/

/* The count on the left, the filter button on the right */
.bv-liste-topp {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 12px;
}

.bv-liste .bv-liste-filter-knapp {
  align-items: center;
  appearance: none;
  background: none;
  border: 1px solid var(--bv-liste-kant);
  border-radius: 3px;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  line-height: 1.2;
  padding: 8px 14px;
}

/* Margins, not a gap, so the space after the icon can be set without moving the bubble */
.bv-liste-filter-knapp .bv-liste-ikon {
  margin-right: 8px;
}

.bv-liste-filter-knapp .bv-liste-filter-antall {
  margin-left: 8px;
}

/*
* A fixed height with the number centred in it, not a height from the padding: the line
* box of the button is taller above the digits than below, so the number sat low. Two
* digits widen the bubble into a pill.
*/
.bv-liste-filter-antall {
  align-items: center;
  background-color: rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  box-sizing: border-box;
  display: inline-flex;
  font-size: 0.75em;
  font-variant-numeric: tabular-nums;
  height: 1.7em;
  justify-content: center;
  line-height: 1;
  min-width: 1.7em;
  padding: 0 0.45em;
}

/* The digits are centred on their cap height, whatever the ascent and descent of the font */
@supports (text-box: trim-both cap alphabetic) {
  .bv-liste-filter-antall {
    text-box: trim-both cap alphabetic;
  }
}

.bv-liste-filter-antall[hidden] {
  display: none;
}

.bv-liste-filtre {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 16px;
}

/** FILTERPANELET **/

.bv-liste-filtre--panel {
  align-items: stretch;
  border: 1px solid var(--bv-liste-kant);
  border-radius: 4px;
  flex-direction: column;
  flex-wrap: nowrap;
  padding: 16px;
}

.bv-liste-filtre[hidden] {
  display: none;
}

.bv-liste-filtre-hode {
  align-items: center;
  display: flex;
  gap: 12px;
}

.bv-liste-filtre-tittel {
  flex: 1 1 auto;
  font-size: 0.8em;
  letter-spacing: 0.06em;
  opacity: 0.7;
  text-transform: uppercase;
}

.bv-liste-filtre--panel .bv-liste-filter {
  width: 100%;
}

.bv-liste .bv-liste-lukk {
  align-items: center;
  appearance: none;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  line-height: 0;
  opacity: 0.7;
  padding: 4px;
}

.bv-liste .bv-liste-lukk:hover {
  opacity: 1;
}

.bv-liste-ikon {
  flex: 0 0 auto;
}

.bv-liste-filter {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bv-liste-filter-label {
  line-height: 1.2;
}

.bv-liste-filter-kontroll {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.bv-liste-filter--slider .bv-liste-filter-kontroll {
  display: block;
}

.bv-liste .bv-liste-knapp,
.bv-liste .bv-liste-nullstill {
  align-items: center;
  appearance: none;
  background: none;
  border: 1px solid var(--bv-liste-kant);
  border-radius: 3px;
  color: inherit;
  cursor: pointer;
  font: inherit;
  line-height: 1.2;
  padding: 8px 14px;
}

.bv-liste .bv-liste-knapp.is-aktiv {
  border-color: currentColor;
}

.bv-liste-select,
.bv-liste-filter input[type="number"] {
  border: 1px solid var(--bv-liste-kant);
  border-radius: 3px;
  font: inherit;
  padding: 7px 10px;
}

.bv-liste-filter input[type="number"] {
  max-width: 7em;
}

.bv-liste-range-skille {
  opacity: 0.6;
}

/** SLIDER **/

/*
* Two range inputs on top of each other: the track is drawn underneath them, and only the
* thumbs take the pointer, so both handles stay grabbable.
*/
.bv-liste-slider {
  --bv-slider-farge: currentColor;
  --bv-slider-spor: var(--bv-liste-kant);
  height: 20px;
  min-width: 160px;
  position: relative;
}

.bv-liste-slider-spor {
  background-color: var(--bv-slider-spor);
  border-radius: 2px;
  display: block;
  height: 4px;
  left: 0;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.bv-liste-slider-fylt {
  background-color: var(--bv-slider-farge);
  border-radius: 2px;
  bottom: 0;
  display: block;
  position: absolute;
  top: 0;
}

.bv-liste-slider input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: 0;
  height: 20px;
  left: 0;
  margin: 0;
  padding: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;
}

.bv-liste-slider input[type="range"]:focus {
  outline: none;
}

.bv-liste-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--bv-slider-farge);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  cursor: grab;
  height: 18px;
  pointer-events: auto;
  width: 18px;
}

.bv-liste-slider input[type="range"]::-moz-range-thumb {
  background-color: var(--bv-slider-farge);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  cursor: grab;
  height: 18px;
  pointer-events: auto;
  width: 18px;
}

.bv-liste-slider input[type="range"]:focus-visible::-webkit-slider-thumb {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.bv-liste-slider input[type="range"]:focus-visible::-moz-range-thumb {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.bv-liste-slider input[type="range"]::-moz-range-track {
  background: none;
  border: 0;
}

.bv-liste-slider-felt {
  align-items: center;
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.bv-liste-slider-fra,
.bv-liste-slider-til {
  border: 1px solid var(--bv-liste-kant);
  border-radius: 3px;
  flex: 1 1 0;
  font: inherit;
  min-width: 0;
  padding: 7px 10px;
  text-align: center;
  width: 100%;
}

.bv-liste-slider-skille {
  flex: 0 0 auto;
  opacity: 0.6;
}

.bv-liste .bv-liste-nullstill {
  align-self: flex-end;
  display: inline-flex;
  gap: 6px;
}

.bv-liste-filtre--panel .bv-liste-nullstill {
  align-self: center;
}

.bv-liste-antall {
  margin: 0;
  margin-right: auto;
}

/** TABELLEN **/

.bv-liste-tabell-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.bv-liste-tabell {
  border-collapse: separate;
  border-spacing: 0;
  margin: 0;
  width: 100%;
}

.bv-liste-tabell th,
.bv-liste-tabell td {
  border: 0;
  text-align: left;
  vertical-align: middle;
}

.bv-liste-th {
  border-bottom: 1px solid var(--bv-liste-kant);
  padding: 10px 12px;
  white-space: nowrap;
}

.bv-liste-th--sorterbar {
  cursor: pointer;
  user-select: none;
}

.bv-liste-th--sorterbar:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -2px;
}

.bv-liste-th-tekst {
  vertical-align: middle;
}

/*
* The arrow is dim until the list is sorted by that column. It is drawn with borders, so
* its colour is the colour of the icon, and its size is --bv-sort-size: half its width.
*/
.bv-liste-sort-ikon {
  border: var(--bv-sort-size, 4px) solid transparent;
  border-bottom-color: currentColor;
  display: inline-block;
  height: 0;
  margin-left: 6px;
  opacity: 0.25;
  vertical-align: middle;
  width: 0;
}

.bv-liste-th[aria-sort="ascending"] .bv-liste-sort-ikon {
  opacity: 1;
}

.bv-liste-th[aria-sort="descending"] .bv-liste-sort-ikon {
  border-bottom-color: transparent;
  border-top-color: currentColor;
  opacity: 1;
  transform: translateY(var(--bv-sort-size, 4px));
}

/** RADENE **/

.bv-liste-rad--lenke {
  cursor: pointer;
}

.bv-liste-td {
  padding: 12px;
}

/*
* Every other row that is showing gets the stripe. The class is put there by the script,
* because :nth-child() would count the rows a filter has hidden as well.
*/
.bv-liste-rad--stripe {
  --bv-rad-bg-auto: var(--bv-rad-stripe);
}

/*
* The background is on the cells, not on the row, so the corner radius of the first and the
* last cell clips it. Three classes, so the zebra striping a theme puts on its tables does
* not show through.
*
* Which colour wins is settled by the order in the var(), not by the specificity of the
* rule, and there are three steps to it:
*
*   --bv-rad-bg         the colour of the status, from the settings. Beats everything.
*   --bv-rad-bg-auto    the stripe on every other row.
*   --bv-rad-bg-ground  the ground colour of every row, from the style tab in Elementor.
*
* So the stripe is painted on top of the ground colour, and a bolig with a status of its own
* keeps that colour whichever row it happens to land on.
*
* The status keeps the oldest of the three names on purpose: it is the one the generated
* stylesheet writes, and that file is only rewritten when the settings are saved. Every
* level below it has a name of its own for the same reason: they are written by Elementor,
* whose selectors carry three classes before ours even starts, so two levels sharing a name
* would be settled by specificity, and the settings would always lose.
*/
.bv-liste .bv-liste-tabell .bv-liste-td {
  background-color: var(--bv-rad-bg, var(--bv-rad-bg-auto, var(--bv-rad-bg-ground, transparent)));
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

/*
* Hover follows the same three steps, with the hover colour of the status on top and the
* one from the style tab a step below the status colour itself: a row that gets its colour
* from its status keeps it, which is what the control in the widget promises.
*
*   --bv-rad-bg-hover         the hover colour of the status, from the settings.
*   --bv-rad-bg               the colour of the status, from the settings.
*   --bv-rad-bg-hover-ground  the hover colour from the style tab in Elementor.
*   --bv-rad-bg-auto          the stripe.
*   --bv-rad-bg-ground        the ground colour from the style tab.
*
* The tone is laid over whatever colour the row ends up with, so a row keeps its status
* colour while it lights up. A hover colour that was set on purpose turns the tone off
* instead of adding to it, at the level it was set on.
*/
.bv-liste .bv-liste-tabell .bv-liste-rad:hover .bv-liste-td {
  background-color: var(--bv-rad-bg-hover, var(--bv-rad-bg, var(--bv-rad-bg-hover-ground, var(--bv-rad-bg-auto, var(--bv-rad-bg-ground, transparent)))));
  box-shadow: inset 0 0 0 9999px var(--bv-rad-hover-tone, var(--bv-rad-hover-tone-auto, var(--bv-rad-hover-tone-ground, transparent)));
}

.bv-liste-lenke {
  color: inherit;
  text-decoration: none;
}

.bv-liste-lenke:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.bv-liste-prepend,
.bv-liste-append {
  opacity: 0.75;
}

.bv-liste-prepend {
  margin-right: 0.25em;
}

.bv-liste-append {
  margin-left: 0.25em;
}

/** TILSTANDER **/

.bv-liste-rad.bv-liste-skjult {
  display: none;
}

.bv-liste-tom {
  margin: 16px 0 0;
}

.bv-liste-tom[hidden] {
  display: none;
}

/** REDAKTØRMELDING **/

.bv-liste-melding {
  background-color: rgba(255, 190, 0, 0.12);
  border-left: 3px solid rgba(255, 170, 0, 0.7);
  font-size: 0.9em;
  margin: 0 0 16px;
  padding: 10px 14px;
}

/** KOBLING MOT PLANTEGNINGEN **/

/*
* Set on the shapes in the boligvelger the list is linked to, not on the list itself. The
* opacity is written inline on the boligvelger by the script, from the widget.
*/
.bv-filtrert-ut {
  opacity: var(--bv-filtrert-opacity, 0.2);
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.bv-filtrert-skjult {
  display: none;
}

/* A row the pointer is over in the plantegning reads the same as one under the mouse */
.bv-liste .bv-liste-tabell .bv-liste-rad--peker .bv-liste-td {
  background-color: var(--bv-rad-bg-hover, var(--bv-rad-bg, var(--bv-rad-bg-hover-ground, var(--bv-rad-bg-auto, var(--bv-rad-bg-ground, transparent)))));
  box-shadow: inset 0 0 0 9999px var(--bv-rad-hover-tone, var(--bv-rad-hover-tone-auto, var(--bv-rad-hover-tone-ground, transparent)));
}