.accordion-container{border-top:1px solid @color-divider-primary;.accordion-title-container{cursor:pointer;padding:@spacing-m-3 0;display:flex;justify-content:space-between;align-items:center;@media(min-width:@viewport-m){padding:@spacing-l-1 0}
.question-title{.add-cmp-title(@fontSize:@font-size-body-l,@lineHeight:@font-height-body-l,@color:@color-text-strong,@fontFamily:@font-base);@media(min-width:@viewport-m){.add-cmp-title(@fontSize:@font-size-headline-xs,@lineHeight:@font-height-headline-xs)}
@media(min-width:@viewport-l){.add-cmp-title(@fontSize:@font-size-headline-s,@lineHeight:@font-height-headline-s)}
}
.expand-icon{margin-left:@spacing-l-4;min-width:@spacing-l-4;height:@spacing-l-4;position:relative;transition:transform .3s;&::before,&::after{content:'';display:block;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:20px;height:1.5px;background-color:@color-text-strong;transition:transform .3s ease}
&::after{transform:translate(-50%,-50%) rotate(90deg)}
}
}
.accordion-answer-container{overflow:hidden;max-height:0;transition:max-height .5s cubic-bezier(0,1,0,1);margin-left:-@spacing-m-4;@media(min-width:@viewport-l){margin-left:0}
.text,.image,.cta,.feedback{margin-bottom:@spacing-m-4;@media(min-width:@viewport-l){margin-bottom:@spacing-l-4}
}
.accordion-answer{.text{margin-left:@spacing-m-4;@media(min-width:@viewport-l){margin-left:0}
.add-cmp-text(@fontSize:@font-size-body-s,@lineHeight:@font-height-body-s,@color:@color-text-default);@media(min-width:@viewport-l){.add-cmp-text(@fontSize:@font-size-body-m,@lineHeight:@font-height-body-m)}
}
.image{margin-left:-@spacing-m-4;img{width:100%}
}
.cta{width:100%;display:flex;justify-content:right;a{padding:@spacing-s-4 @spacing-m-4;background-color:@color-text-strong;color:@color-text-inverted;.font(@font-size-body-s,@font-height-body-s);@media(min-width:@viewport-l){padding:@spacing-m-2 @spacing-m-4;.font(@font-size-body-m,@font-height-body-m)}
&:hover{background-color:@color-divider-primary}
}
}
}
}
&.active,&.authorBox{.accordion-title-container .expand-icon::after{transform:translate(-50%,-50%)}
.accordion-answer-container{max-height:10000px;transition:max-height 1s ease-in-out}
}
}