:root {
    --accordion-border-width: 1px;
    --accordion-icon-size: 20px;
    --accordion-icon-stroke-width: 2px
}

.accordion__item {
    border-style: solid;
    border-color: var(--color-contrast-lower);
    /*border-bottom-width: var(--accordion-border-width)*/
}

.accordion__item:first-child {
    /*border-top-width: var(--accordion-border-width)*/
}

.accordion__header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    cursor: pointer
}

.accordion__header .icon {
    --size: var(--accordion-icon-size)
}

.accordion__header .icon .icon__group {
    stroke-width: var(--accordion-icon-stroke-width)
}

.accordion__icon-arrow .icon__group,
.accordion__icon-arrow-v2 .icon__group,
.accordion__icon-plus .icon__group {
    will-change: transform;
    transform-origin: 50% 50%
}

.accordion__icon-arrow .icon__group>* {
    transform-origin: 10px 14px
}

.accordion__icon-arrow-v2 .icon__group>* {
    transform-origin: 50% 50%;
    stroke-dasharray: 20;
    transform: translateY(4px)
}

.accordion__icon-arrow-v2 .icon__group>*:first-child {
    stroke-dashoffset: 10.15
}

.accordion__icon-arrow-v2 .icon__group>*:last-child {
    stroke-dashoffset: 10.15
}

.accordion__icon-plus .icon__group {
    transform: rotate(-90deg)
}

.accordion__icon-plus .icon__group>* {
    transform-origin: 50% 50%
}

.accordion__icon-plus .icon__group>*:first-child {
    transform: rotate(-90deg)
}

.accordion__item--is-open>.accordion__header>.accordion__icon-arrow .icon__group {}

.accordion__item--is-open>.accordion__header>.accordion__icon-arrow .icon__group>*:first-child {
    transform: translateY(-8px) rotate(-90deg)
}

.accordion__item--is-open>.accordion__header>.accordion__icon-arrow .icon__group>*:last-child {
    transform: translateY(-8px) rotate(90deg)
}

.accordion__item--is-open>.accordion__header>.accordion__icon-arrow-v2 .icon__group {
    transform: rotate(-90deg)
}

.accordion__item--is-open>.accordion__header>.accordion__icon-arrow-v2 .icon__group>*:first-child,
.accordion__item--is-open>.accordion__header>.accordion__icon-arrow-v2 .icon__group *:last-child {
    stroke-dashoffset: 0;
    transform: translateY(0px)
}

.accordion__item--is-open>.accordion__header>.accordion__icon-plus .icon__group {
    transform: rotate(0)
}

.accordion__item--is-open>.accordion__header>.accordion__icon-plus .icon__group>*:first-child {
    transform: rotate(0)
}

.accordion__panel {
    display: none;
    will-change: height;
    transform: translateZ(0px)
}

.accordion__item--is-open>.accordion__panel {
    display: block
}

.accordion[data-animation=on] .accordion__item--is-open .accordion__panel>* {
    animation: accordion-entry-animation .4s var(--ease-out)
}

.accordion[data-animation=on] .accordion__icon-arrow .icon__group,
.accordion[data-animation=on] .accordion__icon-arrow-v2 .icon__group,
.accordion[data-animation=on] .accordion__icon-plus .icon__group {
    transition: transform .3s var(--ease-out)
}

.accordion[data-animation=on] .accordion__icon-arrow .icon__group>*,
.accordion[data-animation=on] .accordion__icon-arrow-v2 .icon__group>*,
.accordion[data-animation=on] .accordion__icon-plus .icon__group>* {
    transition: transform .3s, stroke-dashoffset .3s;
    transition-timing-function: var(--ease-out)
}

@keyframes accordion-entry-animation {
    from {
        opacity: 0;
        transform: translateY(-10px)
    }

    to {
        opacity: 1;
        transform: translateY(0px)
    }
}