@use '../utils' as *;

/*----------------------------------------*/
/*  2.10 Accordion
/*----------------------------------------*/

.#{$theme-prifix}-faq {
    &-accordion-box {
        & .accordion {
            &-items {
                position: relative;
                margin-bottom: 20px;
            }

            &-header {
                border-radius: 15px;
                background-color: rgb(255, 255, 255);
                box-shadow: 0px 4px 20px 0px rgba(16, 23, 40, 0.06);
                margin-bottom: -10px;

            }

            &-icon {
                position: absolute;
                width: 25px;
                height: 25px;
                top: 17px;
                left: 30px;
                display: inline-block;
                background: var(--tp-theme-1);
                border-radius: 50%;
                @include tp-transition();

                &::before {
                    position: absolute;
                    content: "";
                    width: 2px;
                    height: 8px;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    background-color: #fff;
                    border-radius: 2px;
                    transition: 0.4s;
                    @include tp-transition();
                }

                &::after {
                    position: absolute;
                    content: "";
                    width: 8px;
                    height: 2px;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    background-color: #fff;
                    border-radius: 2px;
                    @include tp-transition();
                }
            }

            &-buttons {
                width: 100%;
                font-size: 16px;
                font-weight: 700;
                text-align: left;
                padding: 18px 0;
                padding-left: 74px;
                color: var(--tp-common-black);
                border-radius: 15px;
                @include tp-transition();

                &:not(.collapsed) {
                    color: var(--tp-common-white);
                    background: var(--tp-theme-1);

                    & .accordion {
                        &-icon {
                            background: var(--tp-common-white);

                            &::before {
                                background: var(--tp-common-black);
                                transform: translate(-50%, -50%) rotate(90deg);
                            }

                            &::after {
                                background: var(--tp-common-black);
                            }
                        }
                    }
                }
            }

            &-body {
                border-radius: 0 0 15px 15px;
                background-color: rgb(255, 255, 255);
                box-shadow: 0px 4px 20px 0px rgba(16, 23, 40, 0.06);
                padding: 30px 27px 20px 27px;
                @include tp-transition();

                & p {
                    margin: 0;
                    @media #{$md,$sm,$xs} {
                        & br{
                            display: none;
                        }
                    }
                }
            }
        }
    }

    &-2 {
        & .accordion {
            &-items {
                position: relative;
            }

            &-header {
                background-color: var(--tp-grey-1);
                box-shadow: none;

            }

            &-body {
                background-color: var(--tp-grey-1);
                box-shadow: none;
            }
        }
    }
}