/*
-------------------------------------------
wf-target-group-tags.css
-------------------------------------------

  Beskrivning: Stilregler för Målgruppstaggar
  Skapad av: Webbfröken AB
  Webbadress: https://webbfroken.se

------------------------------------------- */


/*
-------------------------------------------
Målgruppstaggar
------------------------------------------- */

.wf-target-group-tags {
  display: flex;
  list-style: none;
  margin: 0 0 var(--wf-spacing-40);
  padding: 0;

  flex-wrap: wrap;
  gap: var(--wf-spacing-10);
  /*visibility: hidden;*/
}

.wf-target-group-tags > li {
  white-space: normal;
}

.wf-target-group-tags span {
  background-color: var(--june-bjork);
  border-radius: var(--wf-radius-large) 0 var(--wf-radius-large) 0;
  color: var(--june-mossa);
  display: block;
  font-family: var(--wf-heading-font);
  padding: 0.25em 1em;
  cursor: default;
}


/* Ikoner */
.wf-target-group-tags span::before {
  background-repeat: no-repeat;
  background-size: 100%;
  content: '';
  display: inline-block;
  height: 1.115em;
  margin-right: 0.4em;
  width: 1.115em;

  flex-shrink: 0;
}


/* Ikoner */
.wf-target-group-tag-villa-radhus span::before {
  background-image: var(--wf-icon-villa-radhus-mossa);
}

.wf-target-group-tag-fritidshus span::before {
  background-image: var(--wf-icon-fritidshus-mossa);
}

.wf-target-group-tag-flerbostadshus span::before {
  background-image: var(--wf-icon-flerbostadshus-mossa);
}

.wf-target-group-tag-verksamhet span::before {
  background-image: var(--wf-icon-verksamhet-mossa);
}

/*
-------------------------------------------
Specifikt för målgruppstaggar i söken
------------------------------------------- */

.sv-facetedsearch-portlet .wf-target-group-tags {
  visibility: visible;
}


/*
-------------------------------------------
Utan Javascript (och i redigeringsläget)
------------------------------------------- */

/* Visa målgruppsflikarna i redigeringsläge, och om utan JS */
.sv-edit-mode .wf-target-group-tags,
.sv-no-js .wf-target-group-tags {
  visibility: visible;
}