.pxl-accordion {
    .pxl-accordion--title {
        margin-bottom: 0;
        cursor: pointer;
    }
    .pxl-accordion--content {
        display: none;
    }
    .pxl-icon--plus {
        font-style: normal;
    }
}

.pxl-accordion1 {
    &.style-default {
        border-top: 1px solid #d9d9d9;
        border-left: 1px solid #d9d9d9;
        border-right: 1px solid #d9d9d9;
        .pxl-accordion--title {
            font-size: 20px;
            font-style: normal;
            font-weight: 500;
            display: flex;
            flex-wrap: nowrap;
            align-items: center;
            color: $link_color;
            @include transition(transform 300ms linear 0ms);
            padding: 22px 0 21px 0;
            @include ft_theme_default($ft_theme_default);
            @media #{$max-md} {
                font-size: 18px;
            }
            .pxl-title--text {
                flex-grow: 1;
            }
        }
        .pxl-icon--action {
            display: flex;
            width: 18px;
            height: 18px;
            min-width: 18px;
            position: relative;
            overflow: hidden;
            @include transition(transform 300ms linear 0ms);
            svg {
                height: 18px;
                width: auto;
                fill: #bdbdbd;
                transform: rotateX(0deg);
                @include transition(transform 300ms linear 0ms);
            }
        }
        .pxl-accordion--content {
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            color: #666;
            padding-right: 25px;
            padding-bottom: 25px;
        }
        .pxl--item {
            padding: 0 30px 0px 42px;
            border-bottom: 1px solid #d9d9d9;
            position: relative;
            @media (max-width: 575px) {
                padding: 0 15px;
            }
            &:before {
                content: '';
                position: absolute;
                top: 0;
                left: -1px;
                height: 100%;
                width: 2px;
                background-color: $primary_color;
                @include transition(all 0.3s);
                opacity: 0;
            }
            &.active {
                &:before {
                    opacity: 1;
                }
                .pxl-accordion--title {
                    .pxl-icon--action {
                        svg {
                            fill: $primary_color;
                            transform: rotateX(160deg);
                        }
                    }
                }
            }
        }
    }
    &.style2 {
        .pxl-accordion--title {
            font-size: 22px;
            font-style: normal;
            font-weight: 500;
            display: flex;
            flex-wrap: nowrap;
            align-items: center;
            color: $link_color;
            @include transition(transform 300ms linear 0ms);
            padding: 29px 35px 34px 0;
            @include ft_theme_default($ft_theme_default);
            line-height: 1.43;
            justify-content: space-between;
            @media #{$max-md} {
                font-size: 20px;
            }
            @media (max-width: 575px) {
                padding: 29px 15px 34px 0;
            }
            .pxl-title--text {
                flex-grow: 1;
                max-width: 93%;
            }
        }
        .pxl-icon--action {
            display: flex;
            width: 16px;
            height: 16px;
            min-width: 16px;
            position: relative;
            overflow: hidden;
            @include transition(transform 300ms linear 0ms);
            &:before {
                content: '';
                height: 2px;
                width: 100%;
                position: absolute;
                top: 50%;
                left: 0;
                transform-origin: center center;
                background-color: $link_color;
                transform: scale(1) translate(0,-50%);
                @include transition(transform 300ms linear 0ms);
            }
            &:after {
                content: '';
                height: 100%;
                width: 2px;
                position: absolute;
                top: 0;
                left: 50%;
                transform-origin: center center;
                background-color: $link_color;
                transform: scale(1) translate(-50%,0);
                @include transition(transform 300ms linear 0ms);
            }
        }
        .pxl-accordion--content {
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            color: #666;
            padding-right: 105px;
            padding-bottom: 54px;
            @media (max-width: 575px) {
                padding-right: 20px;
            }
        }
        .pxl--item {
            border-bottom: 1px solid #d9d9d9;
            position: relative;
            &:last-child {
                border-bottom: none;
            }
            &.active {
                .pxl-accordion--title {
                    padding: 28px 35px 24px 0;
                    @media (max-width: 575px) {
                        padding: 28px 15px 24px 0;
                    }
                    .pxl-icon--action {
                        &:before {
                            transform: scale(0) translate(0,-50%);
                        }
                        &:after {
                            transform: scale(0) translate(-50%,0);
                        }
                    }
                }
            }
        }
    }
    &.style3 {
        .pxl-accordion--title {
            font-size: 18px;
            font-style: normal;
            font-weight: 500;
            display: flex;
            flex-wrap: nowrap;
            align-items: center;
            color: #ffffff;
            @include transition(transform 300ms linear 0ms);
            padding: 6px 7px 6px 31px;
            @include ft_theme_default($ft_theme_default);
            line-height: 1.43;
            justify-content: space-between;
            background-color: $link_color;
            .pxl-title--text {
                flex-grow: 1;
                max-width: 90%;
            }
            @media (max-width: 676px) {
                padding: 6px 7px 6px 15px;
                font-size: 17px;
            }
        }
        .pxl-icon--action {
            display: flex;
            width: 42px;
            height: 42px;
            min-width: 42px;
            position: relative;
            overflow: hidden;
            @include transition(transform 300ms linear 0ms);
            background-color: rgba(#fff, 0.149);
            &:before {
                content: '';
                height: 1px;
                width: 12px;
                position: absolute;
                top: 50%;
                left: 50%;
                transform-origin: center center;
                background-color: #fff;
                transform: scale(1) translate(-50%,-50%);
                @include transition(transform 300ms linear 0ms);
            }
            &:after {
                content: '';
                height: 12px;
                width: 1px;
                position: absolute;
                top: 50%;
                left: 50%;
                transform-origin: center center;
                background-color: #fff;
                opacity: 1;
                transform: translate(-50%,-50%);
                @include transition(transform 300ms linear 0ms);
            }
        }
        .pxl-accordion--content {
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            color: #666;
            padding: 29px 42px 32px 30px;
            border: 1px solid #d9d9d9;
            @media (max-width: 676px) {
                padding: 30px;
                font-size: 15px;
            }
        }
        .pxl--item {
            position: relative;
            margin-bottom: 12px;
            &:last-child {
                margin-bottom: 0 !important;
            }
            &.active {
                margin-bottom: 20px;
                .pxl-accordion--title {
                    background-color: $primary_color;
                    .pxl-icon--action {
                        background-color: $link_color;
                        &:after {
                            opacity: 0;
                        }
                    }
                }
            }
        }
    }
    &.style4 {
        .pxl-accordion--title {
            font-size: 22px;
            font-style: normal;
            font-weight: 500;
            display: flex;
            flex-wrap: nowrap;
            align-items: center;
            color: $link_color;
            @include transition(transform 300ms linear 0ms);
            padding-bottom: 20px;
            padding-top: 21px;
            @include ft_theme_default($ft_theme_default);
            line-height: 1.43;
            justify-content: space-between;
            @media #{$max-md} {
                font-size: 20px;
            }
            .pxl-title--text {
                flex-grow: 1;
                max-width: 93%;
            }
        }
        .pxl-icon--action {
            display: flex;
            width: 16px;
            height: 16px;
            min-width: 16px;
            position: relative;
            overflow: hidden;
            @include transition(transform 300ms linear 0ms);
            &:before {
                content: '';
                height: 2px;
                width: 100%;
                position: absolute;
                top: 50%;
                left: 0;
                transform-origin: center center;
                background-color: $link_color;
                transform: scale(1) translate(0,-50%);
                @include transition(transform 300ms linear 0ms);
            }
            &:after {
                content: '';
                height: 100%;
                width: 2px;
                position: absolute;
                top: 0;
                left: 50%;
                transform-origin: center center;
                background-color: $link_color;
                transform: scale(1) translate(-50%,0);
                @include transition(transform 300ms linear 0ms);
            }
        }
        .pxl-accordion--content {
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            color: #666;
            padding: 31px 30px 36px 0px;
            border-top: 1px solid #d9d9d9;
            @media (max-width: 880px) {
                padding: 30px 0;
            }
        }
        .pxl-item-list {
            margin: 0;
            margin-top: 24px;
            li {
                list-style: none;
                position: relative;
                font-size: 16px;
                color: $link_color;
                line-height: 1.3;
                padding-left: 18px;
                letter-spacing: 0.15px;
                margin-bottom: 14px;
                &:last-child {
                    margin-bottom: 0;
                }
                &:before {
                    content: '';
                    position: absolute;
                    width: 5px;
                    height: 5px;
                    background-color: $primary_color;
                    top: 50%;
                    left: 0;
                    transform: translate(0,-50%);
                }
            }
        }
        .pxl--item {
            border-bottom: 1px solid #d9d9d9;
            position: relative;
            &:last-child {
                border-bottom: none;
            }
            &.active {
                .pxl-accordion--title {
                    .pxl-icon--action {
                        &:after {
                            transform: scale(0) translate(-50%,0);
                        }
                    }
                }
            }
        }
    }
}

body.rtl {
    
}