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

.accordion__item {
    border-style: solid;
}

.accordion__item:first-child {
    
}

.accordion__header {
    /* button */
    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 {
    /* animated arrow icon */
}

.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 {
    /* animated arrow icon v2 */
    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 {
    /* animated plus icon */
    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
}

/* animations */
.accordion[data-animation=on] .accordion__item--is-open .accordion__panel>* {
    animation: accordion-entry-animation 0.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 0.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 0.3s, stroke-dashoffset 0.3s;
    transition-timing-function: var(--ease-out)
}

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

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