/*
 -------------------------------------------
 -------------------------------------------
Dragspel / Hopfällbart fält / Expanderbart innehåll
--------------------------------------------
 ------------------------------------------- */

/* Tooltip i redigeringsläge */
.sv-editing-mode .sv-collapsible-content:has(.wp-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: 1em;
    padding: 0.5em;
    border-radius: 0.2em;
   font-size: 12px;
}

.sv-editing-mode .sv-collapsible-content:has(.wp-hopfallbart-falt) a.env-button.env-button--link:hover {
    cursor: not-allowed;
}

/* Hela fältet */
.sv-collapsible-content:has(.wp-hopfallbart-falt) {
   margin-bottom:var(--env-spacing-medium);
}

/* Första i raden av flera hopfällbara fält direkt efterföljande varandra */
:not(.sv-collapsible-content:has(.wp-hopfallbart-falt)) + .sv-collapsible-content:has(.wp-hopfallbart-falt) {
   margin-top:var(--env-spacing-large);
}

/* Sista i raden av flera hopfällbara fält direkt efterföljande varandra */
.sv-collapsible-content:has(.wp-hopfallbart-falt) + :not(.sv-collapsible-content:has(.wp-hopfallbart-falt)) {
   margin-top:var(--env-spacing-xxx-large);
}

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

.sv-js .sv-collapsible-content:has(.wp-hopfallbart-falt) a.env-button.env-button--link[aria-expanded="false"]:hover {
    background-color: var(--env-collapse-expanded-background-color);
    border-color:var(--env-collapse-expanded-border-color);
}

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

.sv-collapsible-content:has(.wp-hopfallbart-falt) a.env-button.env-button--link span {
    display: block;
    max-width: calc(100% - var(--env-collapse-icon-width));
    margin-right: 3rem;
    text-align: left;
}

/* Ikoner i knapp */
.sv-js .sv-collapsible-content:has(.wp-hopfallbart-falt) a.env-button.env-button--link::after {
    content: "";
    display: block;
    position: absolute;
    width: var(--env-collapse-icon-width);
    height: var(--env-collapse-icon-width);
    border:var(--env-collapse-icon-height) solid var(--env-collapse-icon-color);
    border-left:0;
    border-top:0;
    background: transparent;
    right: var(--env-spacing-medium);
    transition: transform var(--env-collapse-toggle-duration) ease;
    transform:  rotate(45deg) translateX(-4px);
}

.sv-js .sv-collapsible-content:has(.wp-hopfallbart-falt) a.env-button.env-button--link[aria-expanded="true"]::after {
    transform:rotate(225deg);
}

.sv-no-js .sv-collapsible-content:has(.wp-hopfallbart-falt) .env-button.env-button--link span.env-collapse-header--icons {
    display: none;
}


/* Innehållsfält */
.sv-collapsible-content:has(.wp-hopfallbart-falt) > div:nth-child(2){
    background:var(--env-collapse-expanded-color);
    color:var(--env-collapse-icon-color);
}

.sv-editing-mode .sv-collapsible-content:has(.wp-hopfallbart-falt) > div:nth-child(2), 
.sv-collapsible-content:has(.wp-hopfallbart-falt) > div:nth-child(2){
    padding:var(--env-spacing-medium);
    border-width:var(--env-collapse-border-width);
    border-color:var(--env-collapse-expanded-border-color);
    border-radius: 0 0 var(--env-border-radius) var(--env-border-radius);
    border-style: var(--env-collapse-border-style);
    border-top:0;
    transition:all var(--env-collapse-toggle-duration) ease;
    opacity:1;
}

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

/* Specifikt för Sommar i Skeppsbron */
.sv-collapsible-content:has(.wp-hopfallbart-falt) a.env-button.env-button--link {
	font-size:2.4rem;
}