.msp-accordion {
  // background-color: red;

  &-item.msp-accordion-show {
    .msp-accordion-header::after {
      transform: rotate(180deg);
    }
  }
  &-header {
    cursor: pointer;
    position: relative;

    &::after {
      display: inline-block;
      position: absolute;
      top: 50%;
      right: 0;

      transform: rotate(0deg);
      translate: 110% -50%;

      content: "";
      width: 1em;
      height: 1em;
      // TODO: change SVG of the arrow
      background: url('data:image/svg+xml;utf8,<svg fill="%23000000" viewBox="0 0 24 24" id="down-arrow-circle" data-name="Flat Line" xmlns="http://www.w3.org/2000/svg" class="icon flat-line"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path id="secondary" d="M12,3a9,9,0,1,0,9,9A9,9,0,0,0,12,3Zm2.83,10.5-2.14,3.12a.82.82,0,0,1-1.38,0L9.17,13.5A1,1,0,0,1,9.86,12h4.28A1,1,0,0,1,14.83,13.5Z" style="fill: %232ca9bc; stroke-width: 2;"></path><path id="primary" d="M12,7v5m.69,4.63,2.14-3.13a1,1,0,0,0-.69-1.5H9.86a1,1,0,0,0-.69,1.5l2.14,3.12A.82.82,0,0,0,12.69,16.63ZM12,3a9,9,0,1,0,9,9A9,9,0,0,0,12,3Z" style="fill: none; stroke: %23000000; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></path></g></svg>')
        no-repeat center center;
      background-size: contain;

      transition: transform 0.5s ease;
    }
  }

  &-collapse {
    overflow: hidden;
    height: 0;
    display: none;

    transition: height 0.5s ease;
  }
}