.accordions-container {
    width: 100vw;
    background-color: var(--wp--preset--color--primary-e-5006-d);
    box-sizing: border-box;
}

.accordions-list {
    color: var(--wp--preset--color--text-inverted);
}

.accordions-container details summary {
    list-style: none;
    cursor: pointer;
    position: relative;
    text-transform: uppercase;
    font-size: 33px;
    line-height: 37px;
    font-weight: 500;
    padding-left: var(--wp--preset--spacing--mobile-side-spacing);
    padding-right: 65px;
}

.accordions-list details {
    position: relative;
    padding: 51px 0;
    margin: 0;
}

.accordions-list details p {
    padding-left: var(--wp--preset--spacing--mobile-side-spacing);
    padding-right: var(--wp--preset--spacing--mobile-side-spacing);
}

.accordions-container .accordions-list details::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 100vw;
    height: 3px;
    background-color: white;
    transform: translateX(-50%);
}

.accordions-container .accordions-list details:last-child::after {
    content: none;
}


.accordions-container details summary::after {
    content: '';
    position: absolute;
    right: 35px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 40px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="33" height="48" viewBox="0 0 33 48" fill="none"><path d="M3.02344 3.33691L25.685 23.8466L3.60325 43.8346" stroke="white" stroke-width="9"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    transition: transform 0.2s ease;
}

.accordions-container details[open] summary::after {
    transform: translateY(-50%) rotate(90deg);
}

@media (max-width: 768px) {
    .accordions-container details summary {
        padding-left: var(--wp--preset--spacing--mobile-side-spacing);
        padding-right: 65px;
    }

    .accordions-container details summary::after {
        top: 30%;
        transform: translateY(-50%);
    }
}

/* Fix: bullet-list inde i accordion skal arve hvid tekstfarve i stedet for global text-primary */
.accordions-container .accordions-list .wp-block-list li {
    color: var(--wp--preset--color--text-inverted);
}
.accordions-container .accordions-list .wp-block-list li::marker {
    color: var(--wp--preset--color--text-inverted);
}