.sxs-acc:not(.sxs-acc--disabled) {
    // padding-bottom: calc($spacing2 / 4);
    --_sp-x: #{$spacing2 * 2};
    --_sp-y: #{$spacing2 * 2};

    @include md-wmax {
        --_sp-x: #{$spacing2 * 1.75};
        --_sp-y: #{$spacing2 * 1.75};
    }

    &:not(:last-child) {
        // margin-bottom: calc($spacing2 / 4);
    }

    .sxs-acc {
        &__hdr {
            display: block;
            width: 100%;
            padding: var(--_sp-y) var(--_sp-x);

            &:hover::before {
                opacity: 1;
            }

            &::before {
                opacity: 0;
                transition: opacity $transitionDuration;
            }

            &-con0 {
                display: flex;
                flex-wrap: nowrap;
                align-items: center;
                justify-content: space-between;
            }

            &-con1 {
                flex: 1 1 0;
            }

            &-tit {
                text-align: start;
            }

            &-icon {
                padding-left: calc($spacing3 * 2);
            }
        }

        &__bod {
            overflow: hidden;
            transition: max-height $transitionDuration;

            &.is-closed {
                max-height: 0;

                .sxs-acc__bod-con0 {
                    opacity: 0;
                }
            }

            &-con0 {
                padding: 0 var(--_sp-x) var(--_sp-y);
                opacity: 1;
                transition: opacity $transitionDuration;
            }
        }
    }

    &.sxs-acc {
        &--v1 {
            &:not(:last-child)::after {
                content: "";
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                height: 1px;
                background-color: rgba($duller2, .25);
            }

            .sxs-acc {
                &__hdr {
                    &::before {
                        background-color: $accentClear2;
                    }

                    &-ico {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        margin-left: $spacing3;
                        --_w: #{$spacing2 * 1.25};

                        &::before,
                        &::after {
                            content: "";
                            position: absolute;
                            background-color: $primaryClear;
                        }

                        &::before {
                            width: var(--_w);
                            height: 2px;
                        }

                        &::after {
                            height: var(--_w);
                            width: 2px;
                            transform: scaleY(1);
                            transition: transform 400ms;
                        }
                    }

                    @include sm-wmin {
                        &-tit {
                            font-size: $text-20;
                        }
                    }

                    &.is-open {
                        &::before {
                            opacity: 1;
                        }

                        .sxs-acc__hdr-ico::after {
                            transform: scaleY(0);
                        }
                    }
                }

                &__bod {
                    background-color: $accentClear2;
                }
            }
        }

        &--v2,
        &--v3 {

            &:not(:last-child)::after {
                content: "";
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                height: 1px;
                background-color: $primaryClear;
            }

            .sxs-acc {
                &__hdr {
                    &::before {
                        background-color: $accentClear3;
                    }

                    &-ico {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        width: 1em;
                        height: 1em;
                        font-size: $text-30;
                        background-color: $primaryClear;
                        border-radius: 50%;
                        transform: rotate(0deg);
                        transition: transform 1200ms cubic-bezier(.2, .7, 0, 1);

                        .icon {
                            font-size: .5em;
                        }
                    }

                    &.is-open {
                        &::before {
                            opacity: 1;
                        }

                        .sxs-acc__hdr-ico {
                            transform: rotate(135deg);
                        }
                    }
                }

                &__bod {
                    background-color: $accentClear3;
                }
            }
        }

        &--v2 {
            --_sp-x: #{$spacing1 * .25};
            --_sp-y: #{$spacing1 * .25};

            @include md-wmin {
                --_sp-x: #{$spacing1 * .75};
                --_sp-y: #{$spacing1 * .65};
            }

            .sxs-acc {
                &__hdr-tit {
                    @include md-wmin {
                        font-size: $text-25;
                    }
                }
            }
        }

        &--v3 {
            --_sp-x: #{$spacing1 * .25};
            --_sp-y: #{$spacing1 * .25};

            @include md-wmin {
                --_sp-x: #{$spacing2 * 2};
                --_sp-y: #{$spacing2 * 2};
            }
        }
    }
}