@import "../../../../assets/scss/abstracts/variables";
@import "../../../../assets/scss/abstracts/mixins";

@property --color-rdg-faq-question-bg {syntax: "<color>";inherits: true;initial-value: #f1f1f1;}
@property --color-rdg-faq-question-border {syntax: "<color>";inherits: true;initial-value: #0160ac;}
@property --color-rdg-faq-question-toggle {syntax: "<color>";inherits: true;initial-value: #0160ac;}
@property --color-rdg-faq-answer-border {syntax: "<color>";inherits: true;initial-value: #f1f1f1;}

.rdg-blocks .rdg-faq {
    .preview-thumbs {
        background-image: url('../images/rdg-faq-template-preview.jpg');
    }

    width: 100%;
    box-sizing: border-box;

    @include title;

    .content {
        width: 100%;

        p {
            margin: 0;
        }

        .faq-container {
            max-width: 100%;

            .faq-item {
                margin-bottom: 0.7rem;
            }
    
            .question {
                cursor: pointer;
                background-color: var(--color-rdg-faq-question-bg);
                border-bottom: 3px solid var(--color-rdg-faq-question-border);
                padding: 15px;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .toggle {
                    transition: transform 0.3s ease;
                    color: var(color-rdg-faq-question-toggle);
                    filter: drop-shadow(0px 2px 1px rgba(49, 0, 0, 0.45));
                }
        
                .toggle.expanded {
                    transform: rotate(45deg);
                }
            }
    
            .answer {
                height: 0;
                overflow: hidden;
                border: 1px solid var(--color-rdg-faq-answer-border);
                opacity: 0;
                transition: height 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
            }
    
            .answer.show {
                height: auto;
                opacity: 1;
                padding: 15px;
                margin: 10px 0;
            }
        }
    }
}
