.ce_accordion {
  margin-bottom: 1rem;

  .toggler {
    background-color: var(--bs-gray-200);
    padding: 1.5rem 2.5rem;
    text-align: center;
    cursor: pointer;
    @include font-size(28px);
    position: relative;

    > span.ui-icon {
      position: absolute;
      right: 1rem;
      top: 50%;
      margin-top: -15px;
      line-height: 1;
      display: inline-block;
      transition: all .3s ease;

      &:after {

        @extend %fa-icon;
        @extend .fas;
        content: fa-content($fa-var-chevron-up);
        @include font-size(20px);
      }
    }

    &.ui-state-active {
      > span.ui-icon {
        transform: rotate(180deg);
      }
    }


  }

  .accordion {
    background-color: var(--bs-gray-200);

    > div {
      padding: 0rem 1.5rem 1.5rem 1.5rem;
    }
  }

  &:nth-child(even) {
    .toggler {
      background-color: $gray-100;
    }

    .accordion {
      background-color: $gray-100;
    }
  }

  .accordion {
    .content--box {
    }
  }
}