.acf-block-preview {
  .accordions .accordion-single .content-accordion {
    @apply
      static
      opacity-100
      pointer-events-auto;
  }
}

.accordion-wrapper {
  @apply
    px-0
    text-primary-500;

  .accordions {
    &.alternate {
      .accordion-single {
        @apply
          border-b
          pb-2.5
          mb-8
          border-primary-250;

        .title {
          @apply
            pb-0
            justify-between;

          h3 {
            @apply
              text-sm
              lg:text-base;
          }

          .more {
            svg {
              @apply
                relative
                h-4.5
                top-px

                lg:top-[2px]
                lg:h-5;

              line {
                @apply
                  stroke-1
                  transition-all
                  duration-300;
              }
            }
          }
        }
      }
    }
  }

  .accordion-single {
    @apply
      px-0
      relative;

    &.opened {
      .title {
        svg {
          @apply
            -rotate-180;
        }

        .detail {
          svg {
            line {
              @apply
                first:hidden;
            }
          }
        }

        .more {
          svg {
            @apply
              -rotate-45;
          }
        }
      }
    }

    .title {
      @apply
        flex
        items-baseline
        select-none
        pb-8
        cursor-pointer;

      > div {
        @apply
          flex
          items-center;
      }

      .more {
        svg {
          @apply
            relative
            h-3.5
            top-px

            lg:top-[3px]
            lg:h-5.5;

          line {
            @apply
              stroke-2
              transition-all
              duration-300;
          }
        }
      }

      &.not-active {
        @apply
          pointer-events-none;
      }

      h3 {
        @extend .has-xl-font-size;
        @apply
          mb-0
          leading-none
          text-primary-500;
      }

      svg {
        @apply
          w-auto
          transition-all
          h-2.5
          ml-4

          lg:ml-4.5
          lg:h-3.5;

        * {
          stroke-width: 1px;
        }
      }
    }

    .content-accordion {
      @apply
        opacity-0
        absolute
        top-0
        pointer-events-none;

      &.reposition {
        @apply
          static
          h-0;
      }
    }
  }
}
