/*
 -------------------------------------------
 -------------------------------------------
Dragspel / Hopfällbart fält / Expanderbart innehåll
--------------------------------------------
 ------------------------------------------- */
.sv-collapsible-content:has([class*='wf-hopfallbart-falt']) {

    --wf-space-before-collapse-items:var(--env-spacing-large);
    --wf-space-after-collapse-items:var(--env-spacing-xxx-large);
    --wf-space-between-collapse-items:var(--env-spacing-medium);
	--wf-space-within-collapse-content:var(--env-spacing-medium);
	--wf-space-within-collapse-header:var(--env-spacing-medium);
    
    --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);

	--wf-collapse-icon-width:var(--env-collapse-icon-width);
	--wf-collapse-icon-height:var(--env-collapse-icon-height);
}

.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(--color-block-primary);/*Special för denna webbplats;*/
    --wf-collapse-expanded-border-color:var(--env-collapse-expanded-border-color);

}
.sv-theme-sommar-i-skeppsbron .sv-collapsible-content:has([class*='wf-hopfallbart-falt']) {
  --wf-collapse-expanded-background-color: var(--env-collapse-expanded-background-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);
}


/* Tooltip i redigeringsläge */
.sv-editing-mode .sv-collapsible-content:has([class*='wf-hopfallbart-falt']) a.env-button.env-button--link:hover:after {
    content: "Byt namn på modulen nedan för att ändra rubriken.";
    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;
}

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

/* 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);
}

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

/* Knappen/Rubriken */
.sv-collapsible-content:has([class*='wf-hopfallbart-falt']) a.env-button.env-button--link {
    border-style: var(--wf-collapse-border-style);
    background-color: var(--wf-collapse-background-color);
    width:100%;
    border-radius:var(--wf-border-radius);
    border-width:var(--wf-collapse-border-width);
    border-color:var(--wf-collapse-border-color);
    border-radius:var(--wf-border-radius);
    display:flex;
    justify-content:space-between;
    padding:var(--wf-space-within-collapse-header);
    position:relative;
    transition:border-radius var(--wf-collapse-toggle-duration) ease;
}

.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 {
    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 {
    background-color: var(--wf-collapse-expanded-background-color);
    border-color: var(--wf-collapse-expanded-border-color);
}

/*Special för denna webbplats*/
.sv-js .sv-collapsible-content:has([class*='wf-hopfallbart-falt']) a.env-button.env-button--link:hover {
  transform: none;
}

/* 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 {
    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;
}

.sv-js .sv-collapsible-content:has([class*='wf-hopfallbart-falt']) a.env-button.env-button--link[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 */
.sv-collapsible-content:has([class*='wf-hopfallbart-falt']) > div:nth-child(2){
    background:var(--wf-collapse-expanded-color);
    color:var(--wf-collapse-icon-color);
}

.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);
    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;
}

.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;
}