.accordion {
    width: 100%
}

.accordion input {
    position: absolute;
    opacity: 0;
    z-index: -1
}

.accordion input:checked+.accordion-header {
    border-radius: 8px 8px 0px 0px
}

.accordion input:checked+.accordion-header.primary {
    background-color: var(--accordion-mode-3)
}

.accordion input:checked+.accordion-header.primary .text {
    color: var(--other-1)
}

.accordion input:checked+.accordion-header.primary:hover {
    background-color: var(--accordion-mode-3)
}

.accordion input:checked+.accordion-header.primary:hover .text {
    color: var(--other-1)
}

.accordion input:checked+.accordion-header.secondary {
    background-color: var(--primary-3)
}

.accordion input:checked+.accordion-header .acc-caret {
    transform: rotate(180deg);
    background-color: var(--other-1)
}

.accordion input:checked~.accordion-content {
    visibility: visible;
    max-height: 100%
}

.accordion .accordion-header {
    height: 60px;
    border-radius: 8px;
    padding: var(--spacing-20) var(--spacing-16);
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    flex-grow: 0;
    text-decoration-line: none;
    cursor: pointer
}

.accordion .accordion-header.primary {
    background-color: var(--accordion-mode-1)
}

.accordion .accordion-header.secondary {
    background-color: var(--primary-2)
}

.accordion .accordion-header.secondary .text {
    color: var(--other-1)
}

.accordion .accordion-header .acc-caret {
    width: 8px;
    height: 8px;
    -webkit-mask: url(/~/static/images/icons/icon-chevron-down.svg);
    -webkit-mask-size: 8px;
    align-self: center;
    background-color: var(--primary-6);
    margin-left: var(--spacing-12);
    transition: all 300ms
}

.accordion .accordion-header:hover {
    text-decoration-line: none
}

.accordion .accordion-header:hover.primary {
    background-color: var(--accordion-mode-2)
}

.accordion .accordion-header:hover.secondary {
    background-color: var(--primary-3)
}

.accordion .accordion-content {
    padding: var(--spacing-16) var(--spacing-24) var(--spacing-24);
    visibility: hidden;
    display: flex;
    justify-content: flext-start;
    line-height: 20px;
    text-align: left;
    transition: all 300ms ease;
    max-height: 0;
    border-radius: 0px 0px 8px 8px;
    overflow: auto;
    color: var(--primary-1)
}

.accordion .accordion-content.primary {
    background-color: var(--accordion-mode-4)
}

.accordion .accordion-content.secondary {
    background-color: var(--accordion-mode-4)
}

.accordion .accordion-content ol,
.accordion .accordion-content ul {
    padding-inline-start: var(--spacing-16)
}