$wpj-faq-border: 1px solid #dedede !default;
$wpj-faq-icon: "+" !default;
$wpj-faq-icon-fonticon: false !default;
$wpj-faq-icon-size: 16px !default;
$wpj-faq-icon-left: true !default;
$wpj-faq-icon-offset: 12px !default;
$wpj-faq-header-padding: 20px 10px 20px 40px !default;
$wpj-faq-answer-padding-left: 40px !default;
$wpj-faq-answer-padding-right: 10px !default;
$wpj-faq-border-radius: 0 !default;


.wpj-faq-wrapper {
   border: $wpj-faq-border;
   border-radius: $wpj-faq-border-radius;

   h4 {
      position: relative;
      padding: $wpj-faq-header-padding;
      line-height: 1;
      margin-bottom: 0;
      cursor: pointer;

      @if $wpj-faq-icon-fonticon {
         &::before {
            @include fonticon;
         }

         &.active {
            &::before {
               transform: translateY(-50%) rotate(45deg);
            }
         }
      } @else {
         &.active {
            &::before {
               content: "-";
            }
         }
      }

      &::before {
         content: $wpj-faq-icon;
         width: $wpj-faq-icon-size;
         height: $wpj-faq-icon-size;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: $wpj-faq-icon-size;
         position: absolute;
         top: 50%;
         transform: translateY(-50%);
         transition: all .3s;

         @if $wpj-faq-icon-left {
            left: $wpj-faq-icon-offset;
         } @else {
            right: $wpj-faq-icon-offset;
         }
      }
   }

   p {
      padding-left: $wpj-faq-answer-padding-left;
      padding-right: $wpj-faq-answer-padding-right;
      display: none;
   }

   &.opened,
   &.ck-content {
      p {
         display: block !important;
      }
   }

   + .wpj-faq-wrapper {
      border-top: 0;
   }
}

.blocek-editable-area {
   .wpj-faq-wrapper {
      margin: 0 !important;
      padding: 0 !important;
   }
}
