/*--/------*/
/* --{{ ACCORDION }}-- */
/*--/------*/
.ui.module-accordion,
.ui.module-accordion > li {
  border: none;
  background: transparent;
}

.ui.module-accordion > li {
  /* Title pill */
  .accordion-title a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 25px;
    text-decoration: none;
    border: none;
    width: 100%;
    box-sizing: border-box;
    /* Client may reinstate title mask:
    -webkit-mask: var(--mask-button) center / 100% 110% no-repeat;
    mask: var(--mask-button) center / 100% 110% no-repeat;
    */

    /* Client may reinstate question icon:
    &::before {
      content: "";
      display: inline-block;
      width: var(--spacer);
      height: var(--spacer-s);
      margin-right: 12px;
      background: var(--icon-question) center / contain no-repeat;
      vertical-align: middle;
      filter: var(--filter-white);
    }
    */

    /* Title first; icons after, pinned right */
    .accordion-title-wrap {
      order: -1;
      flex: 1;
      min-width: 0;
    }

    .accordion-icon,
    .accordion-active-icon {
      flex-shrink: 0;
      margin-left: auto;
      color: var(--white);

      svg,
      .tf_fa {
        color: var(--white);
        fill: var(--white);
      }
    }
  }

  /* Orange / blue alternation */
  &:nth-child(odd) .accordion-title a {
    background-color: var(--orange);
  }

  &:nth-child(even) .accordion-title a {
    background-color: var(--blue);
  }

  /* Client may reinstate 5-step colour rotation:
  &:nth-child(5n + 1) .accordion-title a {
    background-color: var(--orange);
  }

  &:nth-child(5n + 2) .accordion-title a {
    background-color: var(--green);
  }

  &:nth-child(5n + 3) .accordion-title a {
    background-color: var(--blue);
  }

  &:nth-child(5n + 4) .accordion-title a {
    background-color: var(--purple);
  }

  &:nth-child(5n) .accordion-title a {
    background-color: var(--yellow);
  }
  */

  /* Spacing: closed = under title; open = under content */
  .accordion-title {
    margin-bottom: .25em;
  }

  &.builder-accordion-active {
    .accordion-title {
      margin-bottom: 0;
    }

    .accordion-content {
      margin-bottom: .75em;
    }
  }

  .accordion-title a span {
    color: var(--white);
  }

  /* Client may reinstate 5-step label colours:
  &:is(:nth-child(5n + 1), :nth-child(5n + 3), :nth-child(5n + 4))
    .accordion-title
    a
    span {
    color: var(--white);
  }

  &:is(:nth-child(5n + 2), :nth-child(5n)) .accordion-title a {
    span {
      color: var(--black);
    }

    &::before {
      filter: var(--filter-black);
    }
  }
  */

  /* Content (the grey box) */
  .accordion-content {
    position: relative;
    /* width: 85%;
    margin: -10px auto 0; */
    padding: var(--spacer-s) var(--spacer-s);
    background-color: var(--gray, #e0e0e0);
    border: none;
    /* Client may reinstate content mask:
    -webkit-mask: var(--mask-accordion) center / 100% 110% no-repeat;
    mask: var(--mask-accordion) center / 100% 110% no-repeat;
    */

    p {
      color: var(--white);
      margin-bottom: 0;
    }
  }
}

/* Fix for builder editing mode */
/* .accordion-title {
  position: relative!important;
  z-index: 2!important;
} */

/* Client may reinstate — hide question icon on mobile:
@media (max-width: 768px) {
  .ui.module-accordion > li .accordion-title a::before {
    display: none;
  }
}
*/