/*
-------------------------------------------
wf-collapsable-content.css
-------------------------------------------

  Beskrivning: Stilregler för Hopfällbart fält
  Skapad av: Webbfröken AB
  Webbadress: https://webbfroken.se

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

/*
-------------------------------------------
Hopfällbart fält
------------------------------------------- */

.rek-prediction,
.rek-sv-autocomplete,
.sv-collapsible-content:has([class*='wf-hopfallbart-falt']) {

  --wf-space-before-collapse-items:var(--wf-spacing-20);
  --wf-space-after-collapse-items:var(--wf-spacing-120);
  --wf-space-between-collapse-items:var(--wf-spacing-20);
    
  --wf-collapse-toggle-duration: var(--env-collapse-toggle-duration);
  --wf-collapse-border-style: var(--env-collapse-border-style);
  --wf-border-radius:var(--env-border-radius);
  --wf-collapse-border-width:var(--env-collapse-border-width);

}

.rek-prediction,
.sv-collapsible-content:has([class*='wf-hopfallbart-falt']) {
	--wf-space-within-collapse-content:var(--wf-spacing-40);
	--wf-space-within-collapse-header:var(--wf-spacing-40);
	--wf-space-within-collapse-content-vertical:var(--wf-spacing-20);
	--wf-space-within-collapse-header-vertical:var(--wf-spacing-20);
	--wf-collapse-icon-width:var(--env-collapse-icon-width);
	--wf-collapse-icon-height:var(--env-collapse-icon-height);
}

.rek-sv-autocomplete{
	--wf-space-within-collapse-content:var(--wf-spacing-20);
	--wf-space-within-collapse-header:var(--wf-spacing-20);
	--wf-space-within-collapse-content-vertical:var(--wf-spacing-10);
	--wf-space-within-collapse-header-vertical:var(--wf-spacing-10);
	--wf-collapse-icon-width:var(--wf-font-size-small); /* Samma som frågan/rubriken */
	--wf-collapse-icon-height:3px;
}

.rek-prediction,
.rek-sv-autocomplete,
.sv-collapsible-content:has([class*='wf-hopfallbart-falt']) {
  --wf-collapse-background-color: var(--env-collapse-background-color);
  --wf-collapse-border-color:var(--env-collapse-border-color);
  --wf-collapse-icon-color:var(--env-collapse-icon-color);
  --wf-collapse-expanded-background-color: var(--env-collapse-expanded-background-color);
  --wf-collapse-expanded-border-color:var(--env-collapse-expanded-border-color);
}

.sv-collapsible-content:has([class*='wf-hopfallbart-falt-brand']) {
  --wf-collapse-background-color: var(--env-ui-color-brand-10);
  --wf-collapse-border-color:var(--env-ui-color-brand-20);
  --wf-collapse-icon-color:var(--env-ui-color-brand-60);
  --wf-collapse-expanded-background-color: var(--env-ui-color-brand-15);
  --wf-collapse-expanded-border-color:var(--env-ui-color-brand-25);
}

.rekai-accordion__list,
.sv-collapsible-content {
  max-width: calc(var(--wf-grid-size) / 2);
}


/* Tooltip i redigeringsläge */
.sv-editing-mode .sv-collapsible-content:has([class*='wf-hopfallbart-falt']) a.env-button.env-button--link:hover:after {
  content: "För att ändra rubriken byter du namn på modulen.";
  display: block;
  position: absolute;
  background: rgba(255,255,255,0.8);
  color: #000;
  bottom: -0.5em;
  padding: 0.5em;
  border-radius: 0.2em;
  font-size: 12px;
  font-family: var(--env-font-family);
}

/* Första i raden av flera hopfällbara fält direkt efterföljande varandra */
:not(.sv-collapsible-content:has([class*='wf-hopfallbart-falt'])) + .sv-collapsible-content:has([class*='wf-hopfallbart-falt']) {
  margin-top:var(--wf-space-before-collapse-items);
  margin-bottom:var(--wf-space-between-collapse-items);
}

/* Alla fält som följer ett annat hopfällbart fält */
.sv-collapsible-content:has([class*='wf-hopfallbart-falt']) + .sv-collapsible-content:has([class*='wf-hopfallbart-falt']) {
  margin-bottom:var(--wf-space-between-collapse-items);
}

/* Hela fältet */
.sv-collapsible-content:has([class*='wf-hopfallbart-falt']) {
  margin-bottom:var(--wf-space-after-collapse-items);
 }

/* Knappen/Rubriken */
.sv-collapsible-content:has([class*='wf-hopfallbart-falt']) a.env-button.env-button--link,
.rek-prediction .rekai-accordion__button {
  border-style: var(--wf-collapse-border-style);
  background-color: var(--wf-collapse-background-color);
  width:100%;
  border-width:var(--wf-collapse-border-width);
  border-color:var(--wf-collapse-border-color);
  border-radius:var(--wf-border-radius);
  display:flex;
  align-items: center;
  justify-content:space-between;
  padding: var(--wf-space-within-collapse-header-vertical) calc(var(--wf-space-within-collapse-header) + 1em + var(--wf-collapse-icon-width)) var(--wf-space-within-collapse-header-vertical) var(--wf-space-within-collapse-header);
  position:relative;
  transition:border-radius var(--wf-collapse-toggle-duration) ease;
  color:var(--env-collapse-icon-color);
  text-align:left;
  font-size:var(--wf-font-size-h4);
  cursor: pointer;
  text-decoration: none;
  transform: unset;
}

.pagecontent .sv-collapsible-content:has([class*='wf-hopfallbart-falt']) .env-ui-text-sectionheading,
.pagecontent .sv-collapsible-content:has([class*='wf-hopfallbart-falt']) .env-ui-text-subheading {
  margin-bottom:0 !important;
  font-weight: var(--env-ui-text-subheading-font-weight);
}

.sv-editing-mode .sv-collapsible-content:has([class*='wf-hopfallbart-falt']) a.env-button.env-button--link,
.sv-js .sv-collapsible-content:has([class*='wf-hopfallbart-falt']) a.env-button.env-button--link[aria-expanded="true"],
.sv-no-js .sv-collapsible-content:has([class*='wf-hopfallbart-falt']) a.env-button.env-button--link,
.rek-prediction .rekai-accordion__button[aria-expanded="true"] {
  border-radius:var(--wf-border-radius) var(--wf-border-radius) 0 0;
  background-color: var(--wf-collapse-expanded-background-color);
  border-color:var(--wf-collapse-expanded-border-color);
}

.sv-js .sv-collapsible-content:has([class*='wf-hopfallbart-falt']) a.env-button.env-button--link[aria-expanded="false"]:hover,
.sv-js .rek-prediction .rekai-accordion__button:hover {
  background-color: var(--wf-collapse-expanded-background-color);
  border-color: var(--wf-collapse-expanded-border-color);
}

.pagecontent .sv-collapsible-content:has([class*='wf-hopfallbart-falt']) .env-ui-text-sectionheading a span{
  font-weight: var(--env-ui-text-sectionheading-font-weight);
}

.pagecontent .sv-collapsible-content:has([class*='wf-hopfallbart-falt']) .env-ui-text-subheading a span,
.wf-faq .sv-collapsible-content:has([class*='wf-hopfallbart-falt']) .env-ui-text-subheading a span {
  font-weight: var(--env-ui-text-subheading-font-weight);
  line-height: 1.5;
}

/* Ikoner i knapp */
.sv-js .sv-collapsible-content:has([class*='wf-hopfallbart-falt']) a.env-button.env-button--link::before,
.sv-js .sv-collapsible-content:has([class*='wf-hopfallbart-falt']) a.env-button.env-button--link::after,
.rek-prediction .rekai-accordion__button::before,
.rek-prediction .rekai-accordion__button::after,
.rek-sv-autocomplete .rekai-accordion__button::before,
.rek-sv-autocomplete .rekai-accordion__button::after {
  content: "";
  display: block;
  position:absolute;
  width:var(--wf-collapse-icon-width);
  height:var(--wf-collapse-icon-height);
  background:var(--wf-collapse-icon-color);
  right:var(--wf-space-within-collapse-header);
  transition:transform var(--wf-collapse-toggle-duration) ease;
  border-top-left-radius: var(--wf-collapse-icon-height);
  border-bottom-right-radius: var(--wf-collapse-icon-height);
}

.sv-js .sv-collapsible-content:has([class*='wf-hopfallbart-falt']) a.env-button.env-button--link[aria-expanded="false"]::after,
.rek-prediction .rekai-accordion__button[aria-expanded="false"]::after,
.rek-sv-autocomplete .rekai-accordion__button[aria-expanded="false"]::after {
  transform:rotate(90deg);
}

.sv-no-js .sv-collapsible-content:has([class*='wf-hopfallbart-falt']) .env-button.env-button--link span.env-collapse-header--icons {
  display: none;
}


/* Innehållsfält */
.rek-prediction .rekai-accordion__body,
.sv-collapsible-content:has([class*='wf-hopfallbart-falt']) > div:nth-child(2){
  background:var(--wf-collapse-background-color);
  color:var(--wf-collapse-icon-color);
}

.rek-prediction .rekai-accordion__body,
.sv-editing-mode .sv-collapsible-content:has([class*='wf-hopfallbart-falt']) > div:nth-child(2), 
.sv-collapsible-content:has([class*='wf-hopfallbart-falt']) > div:nth-child(2){
  padding:var(--wf-space-within-collapse-content-vertical) var(--wf-space-within-collapse-content) var(--wf-space-within-collapse-content);
  border-width:var(--wf-collapse-border-width);
  border-color:var(--wf-collapse-expanded-border-color);
  border-radius: 0 0 var(--wf-border-radius) var(--wf-border-radius);
  border-style: var(--wf-collapse-border-style);
  border-top:0;
  transition:all var(--wf-collapse-toggle-duration) ease;
  opacity:1;
  margin: 0;
}

.sv-editing-mode .wf-hopfallbart-falt.sv-layout > *:last-child *, 
.sv-editing-mode .wf-hopfallbart-falt.sv-text-portlet .sv-text-portlet-content > *:last-child, 
.wf-hopfallbart-falt.sv-layout > div:last-child > *:last-child *:last-child ,
.wf-hopfallbart-falt.sv-text-portlet .sv-text-portlet-content > *:last-child,
.rek-prediction .rekai-accordion__body > p:last-child {
  margin-bottom:0 !important;
}

.sv-js .sv-collapsible-content:has([class*='wf-hopfallbart-falt']):has(a.env-button.env-button--link[aria-expanded="false"]) > * + div {
  opacity:0.3;
  border-color:var(--wf-collapse-border-color);
  border-radius: 0;
}


/* Mer info-sektionen */
.rek-prediction,
.wf-faq .sv-collapsible-content:has([class*='wf-hopfallbart-falt']),
.wf-more-info .sv-collapsible-content:has([class*='wf-hopfallbart-falt']) {
  --wf-collapse-background-color: #fff;
  --wf-collapse-border-color:#fff;
  --wf-collapse-icon-color:var(--june-mossa);
  --wf-collapse-expanded-background-color: var(--june-bjork-10);
  --wf-collapse-expanded-border-color:var(--june-bjork-10);
}