/* stylelint-disable */

/*
=========================================================
FILTERABLE TAGS CSS
=========================================================
 * Innehåller styling för modulen Taggar från modulen
 * filtrerbar listning
 *
 * Copyright (C) Limepark AB.
=========================================================*/

/*
---------------------------------------------------------
VARIABLER
---------------------------------------------------------*/

.lp-filterable-tags {
  --lp-filterable-tags__heading--font-family: var(--env-form-label-font-family);
  --lp-filterable-tags__heading--font-size: var(--env-font-size-medium);
  --lp-filterable-tags__heading--font-weight: var(--env-form-label-font-weight);
  --lp-filterable-tags__margin: var(--env-spacing-large);
  --lp-filterable-tags__tag--background: var(--env-element-primary-background-color);
  --lp-filterable-tags__tag--background-hover: var(--env-element-primary-background-color-dark);
  --lp-filterable-tags__tag--border-radius: var(--env-badge-border-radius);
  --lp-filterable-tags__tag--color: var(--env-element-primary-font-color);
  --lp-filterable-tags__tag--font-family: var(--env-badge-font-family);
  --lp-filterable-tags__tag--font-size: var(--env-badge-font-size);
  --lp-filterable-tags__tag--gap: var(--env-spacing-x-small);
  --lp-filterable-tags__transition: all 0.3s ease;
}


/*
---------------------------------------------------------
GENERELLT
---------------------------------------------------------*/

.lp-filterable-tags-group__heading {
  display: block;
  font-family: var(--lp-filterable-tags__heading--font-family);
  font-size: var(--lp-filterable-tags__heading--font-size);
  font-weight: var(--lp-filterable-tags__heading--font-weight);
  line-height: 1.5;
  margin-bottom: 0.3em;
  padding: 0;
}

.lp-filterable-tags-group + .lp-filterable-tags-group {
  margin-top: var(--lp-filterable-tags__margin);
}

/*
---------------------------------------------------------
LISTNING
---------------------------------------------------------*/

.lp-filterable-tags-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;

  flex-wrap: wrap;
  gap: var(--lp-filterable-tags__tag--gap);
}

.lp-filterable-tags-tag a,
.lp-filterable-tags-tag span {
  background-color: var(--lp-filterable-tags__tag--background);
  border-radius: var(--lp-filterable-tags__tag--border-radius);
  color: var(--lp-filterable-tags__tag--color);
  display: inline-block;
  font-family: var(--lp-filterable-tags__tag--font-family);
  font-size: var(--lp-filterable-tags__tag--font-size);
  padding: var(--env-spacing-xx-small) var(--env-spacing-x-small);
  text-decoration: none;
  transition: var(--lp-filterable-tags__transition);
}

.lp-filterable-tags-tag a:hover,
.lp-filterable-tags-tag a:focus {
  background-color: var(--lp-filterable-tags__tag--background-hover);
  text-decoration: underline;
}