.accordion-with-json {
    padding-left: var(--spacing-06);
    padding-right: var(--spacing-06);
}

.accordion {
    width: 100%;
}

details {
    box-sizing: border-box;
    border-bottom: 1px solid var(--seashell-200);
    margin: var(--element-margin) 0;
    border-radius: 0;
}
details > div {
    padding: var(--spacing-02) 0;
    overflow: hidden;
}

summary {
    position: relative;
    padding: var(--spacing-04) 0;
    cursor: pointer;
    display: grid;
    grid-template-columns: auto 40px;
    justify-content: space-between;
    align-items: center;
    transition: margin 150ms ease-out;
}
summary span {
    font-weight: 600;
    transition: all ease 0.3s;
}

summary:hover span {
    color: var(--text-color-soft);
}

details summary::-webkit-details-marker {
    display: none;
}

details[open] > summary:after {
    transform: rotate(180deg);
    background-image: url('data:image/svg+xml, <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_4452_833" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20"><rect x="20" y="8.74228e-07" width="20" height="20" transform="rotate(90 20 8.74228e-07)" fill="%23D9D9D9"/></mask><g mask="url(%23mask0_4452_833)"><path d="M2.289 5.99203L3.40921 4.87183L10.0005 11.4631L16.5917 4.87183L17.7119 5.99204L10.0005 13.7035L2.289 5.99203Z" fill="black"/></g></svg>');
}

summary:after {
    margin-right: -0.8rem;
    content: "";
    display: block;
    height: 20px;
    width: 20px;
    background-image: url('data:image/svg+xml, <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_4452_833" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20"><rect x="20" y="8.74228e-07" width="20" height="20" transform="rotate(90 20 8.74228e-07)" fill="%23D9D9D9"/></mask><g mask="url(%23mask0_4452_833)"><path d="M2.289 5.99203L3.40921 4.87183L10.0005 11.4631L16.5917 4.87183L17.7119 5.99204L10.0005 13.7035L2.289 5.99203Z" fill="black"/></g></svg>');
    background-size: cover;
    transform: rotate(0);
    transition: 0.25s transform ease;
}

slot:not([name]) {
    display: revert;
}

@media(min-width: 768px) {
    .accordion-with-json {
        padding-left: var(--spacing-06);
        padding-right: var(--spacing-06);
    }
}