.horizontal-accordion {
    width: 100%;
    background: white;
}

.horizontal-accordion p {
    font-weight: 300;
    font-size: 1rem;
}

.horizontal-accordion-fold--content {
    max-height: 0;
    transition: max-height .3s;
    overflow: hidden;
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 1rem;
}
.active .horizontal-accordion-fold--content {
    max-height: 100vh;
    overflow-y: scroll;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.horizontal-accordion .maroon {
    border-color: #990000;
}

.horizontal-accordion .purple {
    border-color: #6b0052;
}

.horizontal-accordion .green {
    border-color: #007A7C;
}

.horizontal-accordion .blue {
    border-color: #242866;
}

.horizontal-accordion .orange {
    border-color: #d64025;
}

.horizontal-accordion .button--maroon {
    background-color: #990000;
}

.horizontal-accordion .button--purple {
    background-color: #6b0052;
}

.horizontal-accordion .button--green {
    background-color: #007A7C;
}

.horizontal-accordion .button--blue {
    background-color: #242866;
}

.horizontal-accordion .button--orange {
    background-color: #d64025;
}

.horizontal-accordion-fold--button {
    padding: .01rem;
    cursor: pointer;
    background: #990000;
    width: 100%;
    border: none;
    outline: none;
    border-radius: 0;
    line-height: normal;
}

.horizontal-accordion-fold--button span {
    font-style: normal;
    font-weight: 400;
    font-size: 1.1rem;
    text-transform: uppercase;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: .7rem;
}

.horizontal-accordion-fold--button span:after {

    width: 2rem;
    height: 2rem;
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="8 12 12 16 16 12"></polyline><line x1="12" y1="8" x2="12" y2="16"></line></svg>');

}

.active .horizontal-accordion-fold--button span:after {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" ><circle cx="12" cy="12" r="10"></circle><polyline points="12 16 16 12 12 8"></polyline><line x1="8" y1="12" x2="16" y2="12"></line></svg>');
}

.horizontal-accordion-fold--button:hover span:after, .horizontal-accordion-fold--button:focus span:after {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" ><circle cx="12" cy="12" r="10"></circle><polyline points="12 16 16 12 12 8"></polyline><line x1="8" y1="12" x2="16" y2="12"></line></svg>');
}

.horizontal-accordion-fold--button:hover, .horizontal-accordion-fold--button:focus {
    outline: none;
    opacity: .8;
}

@media (min-width: 40rem) {
    .horizontal-accordion {
        display: flex;
    }

    .horizontal-accordion-fold {
        display: block;
        position: relative;
        border-left: 3rem solid;
        border-color: #369;
        height: 20rem;
    }

    .horizontal-accordion-fold--content {
        max-height: 18rem;
        overflow-y: scroll;
        padding: 0;
        max-width: 0;
        transition: max-width .3s;
    }

    .active .horizontal-accordion-fold--content {
        max-height: 18rem;
        padding: 1rem;
        max-width: 50rem;
    }

    .horizontal-accordion-fold--button {
        background: none !important;

    }

    .horizontal-accordion-fold--button span {
        position: absolute;
        transform-origin: 0 0;
        transform: rotate(90deg);
        white-space: nowrap;
        width: 19rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .horizontal-accordion-fold--button span:after {
        content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="16 12 12 8 8 12"></polyline><line x1="12" y1="16" x2="12" y2="8"></line></svg>');
    }

    .active .horizontal-accordion-fold--button span:after {
        content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 8 8 12 12 16"></polyline><line x1="16" y1="12" x2="8" y2="12"></line></svg>');
    }

    .horizontal-accordion-fold--button:hover span:after, .horizontal-accordion-fold--button:focus span:after {
        content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 8 8 12 12 16"></polyline><line x1="16" y1="12" x2="8" y2="12"></line></svg>');
    }
}