@use "./functions.scss" as *;
@use "sass:map";
@use "sass:list";

[data-div-type="element"] {
  &[data-element-type="faq"] {
    // width: var(--_lt-wh);
    // height: var(--_lt-ht);
    // margin: var(--_lt-mn);
    // padding: var(--_lt-pg);
    // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
    // width: 50%;
    // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
    width: var(
      --_sf-el-wh-st-mx,
      calc(
        1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
      )
    );
    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));

    // height: clamp(var(--_ctm-lt-ht, 50px), 100px, auto) !important;
    // height: var(--_ctm-lt-ht);
    // height: ;
    // height: auto;
    // aspect-ratio: 1 / var(--_sf-aspect-ratio);
    // --_aspect-ratio: calc(
    //   1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
    // );

    // &[data-element-sub-child="true"] {
    //   // width: max(var(--_sf-nw-wh, var(--_tst-lt-wh)));
    //   width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
    // }

    & > .wrapper {
      // width: 100%;
      // height: 100%;
    }
    &[data-show-shadow="false"] {
      --_show-shadow: none;
    }

    .accordion-element {
      background-color: var(
        --_ctm-mob-dn-fq-wt-bd-cr,
        var(--_ctm-tab-dn-fq-wt-bd-cr, var(--_ctm-dn-fq-wt-bd-cr))
      );
      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
      display: flex;
      flex-direction: column;
      --_sf-gp: var(
        --_ctm-mob-lt-im-sg,
        var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, var(--_ctm-lt-im-sg), 16px))
      );
      --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
      row-gap: var(--_sf-gp);
      width: 100%;
      // height: 100%;
      border-color: var(
        --_ctm-mob-dn-fq-wt-br-cr,
        var(--_ctm-tab-dn-fq-wt-br-cr, var(--_ctm-dn-fq-wt-br-cr))
      );
      border-style: var(
        --_ctm-mob-dn-fq-wt-br-se,
        var(--_ctm-tab-dn-fq-wt-br-se, var(--_ctm-dn-fq-wt-br-se))
      );
      border-width: var(
        --_ctm-mob-dn-fq-wt-br-wh,
        var(--_ctm-tab-dn-fq-wt-br-wh, var(--_ctm-dn-fq-wt-br-wh))
      );
      border-radius: var(
        --_ctm-mob-dn-fq-wt-br-rs,
        var(--_ctm-tab-dn-fq-wt-br-rs, var(--_ctm-dn-fq-wt-br-rs))
      );
      box-shadow: var(
        --_show-shadow,
        var(--_ctm-mob-dn-fq-wt-sw-ae, var(--_ctm-tab-dn-fq-wt-sw-ae, var(--_ctm-dn-fq-wt-sw-ae)))
          var(--_ctm-mob-dn-fq-wt-sw-br, var(--_ctm-tab-dn-fq-wt-sw-br, var(--_ctm-dn-fq-wt-sw-br)))
          var(--_ctm-mob-dn-fq-wt-sw-sd, var(--_ctm-tab-dn-fq-wt-sw-sd, var(--_ctm-dn-fq-wt-sw-sd)))
          var(--_ctm-mob-dn-fq-wt-sw-cr, var(--_ctm-tab-dn-fq-wt-sw-cr, var(--_ctm-dn-fq-wt-sw-cr)))
      );

      &[data-divider-show="true"] {
        --_sf-dvdr: var(
            --_ctm-mob-dn-dr-dr-wh,
            var(--_ctm-tab-dn-dr-dr-wh, var(--_ctm-dn-dr-dr-wh, 1px))
          )
          var(--_ctm-mob-dn-dr-br-se, var(--_ctm-tab-dn-dr-br-se, var(--_ctm-dn-dr-br-se, solid)))
          var(--_ctm-dn-dr-br-cr, var(--_tst-dn-dr-bd-cr));
        --_sf-dvdr-gap: var(--_sf-gp);
      }
      &[data-icon-position="Left"] {
        --_sf-fd: row-reverse;
        --_sf-jc: flex-end;
      }
      &[data-show-icon="false"] {
        --_sf-show-icon-ff: none;
      }
      &[data-divider-show="true"] {
        // .accordion-item:not(:last-child) {
        //   border-bottom: var(
        //       --_ctm-mob-dn-dr-dr-wh,
        //       var(--_ctm-tab-dn-dr-dr-wh, var(--_ctm-dn-dr-dr-wh))
        //     )
        //     var(--_ctm-mob-dn-dr-br-se, var(--_ctm-tab-dn-dr-br-se, var(--_ctm-dn-dr-br-se)))
        //     var(--_ctm-mob-dn-dr-br-cr, var(--_ctm-tab-dn-dr-br-cr, var(--_ctm-dn-dr-br-cr)));
        // }
      }
    }

    .accordion-item {
      width: 100%;
      display: grid;
      overflow: clip;
      // height: 30px;

      // padding-block: var(--_ctm-lt-im-vl-pg, var(--_tst-lt-im-vl-pg));
      // padding-inline: var(
      //   --_ctm-mob-lt-im-hl-pg,
      //   var(--_ctm-tab-lt-im-hl-pg, var(--_ctm-lt-im-hl-pg))
      // );

      padding: var(
        --_ctm-mob-dn-cd-an-im-pg-im,
        var(--_ctm-tab-dn-cd-an-im-pg-im, var(--_ctm-dn-cd-an-im-pg-im))
      );
      grid-template-rows: var(
        --_self-active-gtr,
        minmax(
            var(
              --_ctm-mob-dn-cd-an-im-in-se,
              var(--_ctm-tab-dn-cd-an-im-in-se, var(--_ctm-dn-cd-an-im-in-se, 50px))
            ),
            auto
          )
          0px
      );
      // transition: grid-template-rows 0.45s ease-in-out;

      --_sf-pd-cd: var(--_sf-dvdr-gap);
      // updated css
      border-color: var(
        --_ctm-mob-dn-cd-an-im-br-cr,
        var(--_ctm-tab-dn-cd-an-im-br-cr, var(--_ctm-dn-cd-an-im-br-cr))
      );
      border-style: var(
        --_ctm-mob-dn-cd-an-im-br-se,
        var(--_ctm-tab-dn-cd-an-im-br-se, var(--_ctm-dn-cd-an-im-br-se))
      );
      border-width: var(
        --_ctm-mob-dn-cd-an-im-br-wh,
        var(--_ctm-tab-dn-cd-an-im-br-wh, var(--_ctm-dn-cd-an-im-br-wh))
      );
      border-radius: var(
        --_ctm-mob-dn-cd-an-im-br-rs,
        var(--_ctm-tab-dn-cd-an-im-br-rs, var(--_ctm-dn-cd-an-im-br-rs))
      );
      box-shadow: var(
        --_show-shadow,
        var(
            --_ctm-mob-dn-cd-an-im-sw-ae,
            var(--_ctm-tab-dn-cd-an-im-sw-ae, var(--_ctm-dn-cd-an-im-sw-ae))
          )
          var(
            --_ctm-mob-dn-cd-an-im-sw-br,
            var(--_ctm-tab-dn-cd-an-im-sw-br, var(--_ctm-dn-cd-an-im-sw-br))
          )
          var(
            --_ctm-mob-dn-cd-an-im-sw-sd,
            var(--_ctm-tab-dn-cd-an-im-sw-sd, var(--_ctm-dn-cd-an-im-sw-sd))
          )
          // The colour slot repeated `sw-sd` (spread) instead of `sw-cr`. Angle
        // resolves to two lengths, so the value came out as five lengths and no
        // colour — invalid, and the whole declaration was dropped. That is why no
        // shadow appeared here however the panel was set.
        var(
            --_ctm-mob-dn-cd-an-im-sw-cr,
            var(--_ctm-tab-dn-cd-an-im-sw-cr, var(--_ctm-dn-cd-an-im-sw-cr))
          )
      );

      // &:not(:last-of-type) {
      //   &::after {
      //     content: "";
      //     height: var(--_ctm-dn-dr-dr-wh, 1px);
      //     background-color: var(--_ctm-dn-dr-br-cr, var(--_tst-dn-dr-bd-cr));

      //     // border-block-end: var(--_sf-dvdr);
      //   }
      // }

      .accordion-title {
        display: flex;
        flex-direction: var(--_sf-fd, row);
        align-content: center;
        gap: var(--_sf-cd-gp);
        align-items: center;
        justify-content: var(--_sf-jc, space-between);
        cursor: pointer;
        // padding-block-end: var(--_sf-dc-pd, var(--_sf-pd-cd));
        background-color: var(
          --_ctm-mob-dn-cd-an-im-bd-cr,
          var(--_ctm-tab-dn-cd-an-im-bd-cr, var(--_ctm-dn-cd-an-im-bd-cr))
        );
        padding: var(
          --_ctm-mob-dn-cd-an-im-pg-te,
          var(--_ctm-tab-dn-cd-an-im-pg-te, var(--_ctm-dn-cd-an-im-pg-te))
        );

        // p {
        //   color: var(
        //     --_ctm-mob-dn-cd-an-im-cr,
        //     var(--_ctm-tab-dn-cd-an-im-cr, var(--_ctm-dn-cd-an-im-cr))
        //   );
        //   font-family: var(
        //       --_ctm-mob-dn-cd-an-im-ft-fy,
        //       var(--_ctm-tab-dn-cd-an-im-ft-fy, var(--_ctm-dn-cd-an-im-ft-fy))
        //     ),

        //   font-size: var(
        //     --_ctm-mob-dn-cd-an-im-ft-se,
        //     var(--_ctm-tab-dn-cd-an-im-ft-se, var(--_ctm-dn-cd-an-im-ft-se))
        //   );
        //   font-weight: var(
        //     --_ctm-mob-dn-cd-an-im-ft-wt,
        //     var(--_ctm-tab-dn-cd-an-im-ft-wt, var(--_ctm-dn-cd-an-im-ft-wt))
        //   );
        //   font-style: var(
        //     --_ctm-mob-dn-cd-an-im-ft-se-ic,
        //     var(--_ctm-tab-dn-cd-an-im-ft-se-ic, var(--_ctm-dn-cd-an-im-ft-se-ic))
        //   );
        //   text-align: var(
        //     --_ctm-mob-dn-cd-an-im-tt-an,
        //     var(--_ctm-tab-dn-cd-an-im-tt-an, var(--_ctm-dn-cd-an-im-tt-an))
        //   );
        //   letter-spacing: var(
        //     --_ctm-mob-dn-cd-an-im-lr-sg,
        //     var(--_ctm-tab-dn-cd-an-im-lr-sg, var(--_ctm-dn-cd-an-im-lr-sg))
        //   );
        //   line-height: var(
        //     --_ctm-mob-dn-cd-an-im-le-ht,
        //     var(--_ctm-tab-dn-cd-an-im-le-ht, var(--_ctm-dn-cd-an-im-le-ht-dc))
        //   );
        //   text-decoration: var(
        //     --_ctm-mob-dn-cd-an-im-ue,
        //     var(--_ctm-tab-dn-cd-an-im-ue, var(--_ctm-dn-cd-an-im-ue))
        //   );
        // }
        p {
          color: var(
            --_ctm-mob-dn-cd-an-im-cr,
            var(--_ctm-tab-dn-cd-an-im-cr, var(--_ctm-dn-cd-an-im-cr))
          );
          font-family: var(
            --_ctm-mob-dn-cd-an-im-ft-fy,
            var(--_ctm-tab-dn-cd-an-im-ft-fy, var(--_ctm-dn-cd-an-im-ft-fy))
          );
          font-size: var(
            --_ctm-mob-dn-cd-an-im-ft-se,
            var(--_ctm-tab-dn-cd-an-im-ft-se, var(--_ctm-dn-cd-an-im-ft-se))
          );
          font-weight: var(
            --_ctm-mob-dn-cd-an-im-ft-wt,
            var(--_ctm-tab-dn-cd-an-im-ft-wt, var(--_ctm-dn-cd-an-im-ft-wt))
          );
          font-style: var(
            --_ctm-mob-dn-cd-an-im-ft-se-ic,
            var(--_ctm-tab-dn-cd-an-im-ft-se-ic, var(--_ctm-dn-cd-an-im-ft-se-ic))
          );
          text-align: var(
            --_ctm-mob-dn-cd-an-im-tt-an,
            var(--_ctm-tab-dn-cd-an-im-tt-an, var(--_ctm-dn-cd-an-im-tt-an))
          );
          letter-spacing: var(
            --_ctm-mob-dn-cd-an-im-lr-sg,
            var(--_ctm-tab-dn-cd-an-im-lr-sg, var(--_ctm-dn-cd-an-im-lr-sg))
          );
          line-height: var(
            --_ctm-mob-dn-cd-an-im-le-ht,
            var(--_ctm-tab-dn-cd-an-im-le-ht, var(--_ctm-dn-cd-an-im-le-ht-dc))
          );
          text-decoration: var(
            --_ctm-mob-dn-cd-an-im-ue,
            var(--_ctm-tab-dn-cd-an-im-ue, var(--_ctm-dn-cd-an-im-ue))
          );
          // Collapsed item > title > Text Transform, and the word wrap/break pair the
          // typography panel renders alongside it.
          text-transform: var(
            --_ctm-mob-dn-cd-an-im-tt-tm,
            var(--_ctm-tab-dn-cd-an-im-tt-tm, var(--_ctm-dn-cd-an-im-tt-tm, none))
          );
          word-wrap: var(
            --_ctm-mob-dn-cd-an-im-wd-wp,
            var(--_ctm-tab-dn-cd-an-im-wd-wp, var(--_ctm-dn-cd-an-im-wd-wp, normal))
          );
          word-break: var(
            --_ctm-mob-dn-cd-an-im-wd-bk,
            var(--_ctm-tab-dn-cd-an-im-wd-bk, var(--_ctm-dn-cd-an-im-wd-bk, normal))
          );
        }
        .icon {
          display: var(--_sf-show-icon-ff, flex);
          svg {
            width: var(
              --_ctm-mab-dn-cd-an-im-in-se,
              var(--_ctm-tab-dn-cd-an-im-in-se, var(--_ctm-dn-cd-an-im-in-se))
            );
            height: var(
              --_ctm-mob-dn-cd-an-im-in-se,
              var(--_ctm-tab-dn-cd-an-im-in-se, var(--_ctm-dn-cd-an-im-in-se))
            );
            path {
              stroke: var(
                --_ctm-mob-dn-cd-an-im-in-c1,
                var(--_ctm-tab-dn-cd-an-im-in-c1, var(--_ctm-dn-cd-an-im-in-c1))
              );
              // Overrides the stroke-width presentation attribute baked into the icon markup.
              stroke-width: prepareMediaVariable(--_ctm-dn-cd-an-im-se-wh, 1.25);
            }
          }
        }
        .accordion-items {
          display: flex;
          align-items: center;
          // Info Icon > Icon Gap. Was a hardcoded 8px, so there was no way to space
          // the info icon away from the title.
          gap: var(
            --_ctm-mob-dn-io-in-in-gp,
            var(--_ctm-tab-dn-io-in-in-gp, var(--_ctm-dn-io-in-in-gp, 8px))
          );
          .icon {
            display: var(--_hover-show-icon, var(--_show-icon, flex));
            svg {
              width: var(
                --_ctm-mob-dn-io-in-in-se,
                var(--_ctm-tab-dn-io-in-in-se, var(--_ctm-dn-io-in-in-se))
              );
              height: var(
                --_ctm-mob-dn-io-in-in-se,
                var(--_ctm-tab-dn-io-in-in-se, var(--_ctm-dn-io-in-in-se))
              );
              path {
                stroke: var(
                  --_ctm-mob-dn-io-in-in-c1,
                  var(--_ctm-tab-dn-io-in-in-c1, var(--_ctm-dn-io-in-in-c1))
                );
                // Overrides the stroke-width presentation attribute baked into the icon markup.
                stroke-width: prepareMediaVariable(--_ctm-dn-io-in-se-wh, 1.25);
              }
            }
          }
        }
      }
      .accordion-description {
        display: none;
      }
      // .accordion-description {
      //   // margin-block-start: calc(-1 * var(--_sf-dc-mb));
      //   padding-block-end: var(--_sf-dc-pd-bt);
      //   p {
      //     color: var(--_ctm-dn-cd-an-im-cr-dc, var(--_tst-dn-cd-an-im-cr-dc));
      //     font-family: var(--_ctm-dn-cd-an-im-ft-fy-dc, var(--_tst-dn-cd-an-im-ft-fy-dc)),

      //     font-size: var(--_ctm-dn-cd-an-im-ft-se-dc, var(--_tst-dn-cd-an-im-ft-se-dc));
      //     font-weight: var(--_ctm-dn-cd-an-im-ft-wt-dc, var(--_tst-dn-cd-an-im-ft-wt-dc));
      //     font-style: var(--_ctm-dn-cd-an-im-ft-se-ic-dc, var(--_tst-dn-cd-an-im-ft-se-ic-dc));
      //     text-align: var(--_ctm-dn-cd-an-im-tt-an-dc, var(--_tst-dn-cd-an-im-tt-an-dc));
      //     letter-spacing: var(--_ctm-dn-cd-an-im-lr-sg-dc, var(--_tst-dn-cd-an-im-lr-sg-dc));
      //     line-height: var(--_ctm-dn-cd-an-im-le-ht-dc, var(--_tst-dn-cd-an-im-le-ht-dc));
      //   }
      // }

      &[data-state="open"] {
        // overflow: inherit;
        // height: auto;

        padding: var(
          --_ctm-mob-dn-ed-an-im-pg-im,
          var(--_ctm-tab-dn-ed-an-im-pg-im, var(--_ctm-dn-ed-an-im-pg-im))
        );
        gap: var(
          --_ctm-mob-lt-te-ad-dn-sg,
          var(--_ctm-tab-lt-te-ad-dn-sg, var(--_ctm-lt-te-ad-dn-sg))
        );

        --_self-active-gtr: minmax(
            var(
              --_ctm-mob-dn-cd-an-im-in-se,
              var(--_ctm-tab-dn-cd-an-im-in-se, var(--_ctm-dn-cd-an-im-in-se))
            ),
            auto
          )
          minmax(50px, auto);

        --_sf-dc-pd: var(--_sf-dvdr-gap, var(--_sf-cd-gp));
        --_sf-dc-mb: var(--_sf-cd-gp);
        --_sf-tt-pd: 0px;
        --_sf-dc-pd-bt: var(--_sf-dvdr-gap, 0px);

        border-color: var(
          --_ctm-mob-dn-ed-an-im-br-cr,
          var(--_ctm-tab-dn-ed-an-im-br-cr, var(--_ctm-dn-ed-an-im-br-cr))
        );
        border-style: var(
          --_ctm-mob-dn-ed-an-im-br-se,
          var(--_ctm-tab-dn-ed-an-im-br-se, var(--_ctm-dn-ed-an-im-br-se))
        );
        border-width: var(
          --_ctm-mob-dn-ed-an-im-br-wh,
          var(--_ctm-tab-dn-ed-an-im-br-wh, var(--_ctm-dn-ed-an-im-br-wh))
        );
        border-radius: var(
          --_ctm-mob-dn-ed-an-im-br-rs,
          var(--_ctm-tab-dn-ed-an-im-br-rs, var(--_ctm-dn-ed-an-im-br-rs))
        );
        box-shadow: var(
          --_show-shadow,
          var(
              --_ctm-mob-dn-ed-an-im-sw-ae,
              var(--_ctm-tab-dn-ed-an-im-sw-ae, var(--_ctm-dn-ed-an-im-sw-ae))
            )
            var(
              --_ctm-mob-dn-ed-an-im-sw-br,
              var(--_ctm-tab-dn-ed-an-im-sw-br, var(--_ctm-dn-ed-an-im-sw-br))
            )
            var(
              --_ctm-mob-dn-ed-an-im-sw-sd,
              var(--_ctm-tab-dn-ed-an-im-sw-sd, var(--_ctm-dn-ed-an-im-sw-sd))
            )
            var(
              --_ctm-mob-dn-ed-an-im-sw-cr,
              var(--_ctm-tab-dn-ed-an-im-sw-cr, var(--_ctm-dn-ed-an-im-sw-cr))
            )
        );
        .accordion-title {
          display: flex;
          flex-direction: var(--_sf-fd, row);
          align-content: center;
          gap: var(--_sf-cd-gp);
          align-items: center;
          justify-content: var(--_sf-jc, space-between);
          cursor: pointer;
          // padding-block-end: var(--_sf-dc-pd, var(--_sf-pd-cd));
          background-color: var(
            --_ctm-mob-dn-ed-an-im-bd-cr,
            var(--_ctm-tab-dn-ed-an-im-bd-cr, var(--_ctm-dn-ed-an-im-bd-cr))
          );
          padding: var(
            --_ctm-mob-dn-ed-an-im-pg-te,
            var(--_ctm-tab-dn-ed-an-im-pg-te, var(--_ctm-dn-ed-an-im-pg-te))
          );

          p {
            color: var(
              --_ctm-mob-dn-ed-an-im-cr,
              var(--_ctm-tab-dn-ed-an-im-cr, var(--_ctm-dn-ed-an-im-cr))
            );
            font-family: var(
              --_ctm-mob-dn-ed-an-im-ft-fy,
              var(--_ctm-tab-dn-ed-an-im-ft-fy, var(--_ctm-dn-ed-an-im-ft-fy))
            );
            font-size: var(
              --_ctm-mob-dn-ed-an-im-ft-se,
              var(--_ctm-tab-dn-ed-an-im-ft-se, var(--_ctm-dn-ed-an-im-ft-se))
            );
            font-weight: var(
              --_ctm-mob-dn-ed-an-im-ft-wt,
              var(--_ctm-tab-dn-ed-an-im-ft-wt, var(--_ctm-dn-ed-an-im-ft-wt))
            );
            font-style: var(
              --_ctm-mob-dn-ed-an-im-ft-se-ic,
              var(--_ctm-tab-dn-ed-an-im-ft-se-ic, var(--_ctm-dn-ed-an-im-ft-se-ic))
            );
            text-align: var(
              --_ctm-mob-dn-ed-an-im-tt-an,
              var(--_ctm-tab-dn-ed-an-im-tt-anvvar(--_ctm-dn-ed-an-im-tt-an))
            );
            letter-spacing: var(
              --_ctm-mob-dn-ed-an-im-lr-sg,
              var(--_ctm-tab-dn-ed-an-im-lr-sg, var(--_ctm-dn-ed-an-im-lr-sg))
            );
            line-height: var(
              --_ctm-mob-dn-ed-an-im-le-ht,
              var(--_ctm-tab-dn-ed-an-im-le-ht, var(--_ctm-dn-ed-an-im-le-ht))
            );
            // text-decoration: var(
            //   --_ctm-dn-ed-an-im-lh,
            //   var(--_ctm-dn-ed-an-im-ue),
            //   var(--_tst-dn-cd-an-im-lh)
            // );
            text-decoration: var(
              --_ctm-mob-dn-ed-an-im-ue,
              var(--_ctm-tab-dn-ed-an-im-ue, var(--_ctm-dn-ed-an-im-ue))
            );
            // Expanded item > title > Text Transform and the word wrap/break pair.
            text-transform: var(
              --_ctm-mob-dn-ed-an-im-tt-tm,
              var(--_ctm-tab-dn-ed-an-im-tt-tm, var(--_ctm-dn-ed-an-im-tt-tm, none))
            );
            word-wrap: var(
              --_ctm-mob-dn-ed-an-im-wd-wp,
              var(--_ctm-tab-dn-ed-an-im-wd-wp, var(--_ctm-dn-ed-an-im-wd-wp, normal))
            );
            word-break: var(
              --_ctm-mob-dn-ed-an-im-wd-bk,
              var(--_ctm-tab-dn-ed-an-im-wd-bk, var(--_ctm-dn-ed-an-im-wd-bk, normal))
            );
          }
          .icon {
            display: var(--_sf-show-icon-ff, flex);
            svg {
              width: var(
                --_ctm-mob-dn-ed-an-im-in-se,
                var(--_ctm-tab-dn-ed-an-im-in-se, var(--_ctm-dn-ed-an-im-in-se))
              );
              height: var(
                --_ctm-mob-dn-ed-an-im-in-se,
                var(--_ctm-tab-dn-ed-an-im-in-se, var(--_ctm-dn-ed-an-im-in-se))
              );
              path {
                stroke: var(
                  --_ctm-mob-dn-ed-an-im-in-c1,
                  var(--_ctm-tab-dn-ed-an-im-in-c1, var(--_ctm-dn-ed-an-im-in-c1))
                );
                // Overrides the stroke-width presentation attribute baked into the icon markup.
                stroke-width: prepareMediaVariable(--_ctm-dn-ed-an-im-se-wh, 1.25);
              }
            }
          }
          .accordion-items {
            display: flex;
            align-items: center;
            // The expanded item has its own copy of this rule, so the Info Icon gap has
            // to be read here too — changing it only moved the collapsed items.
            gap: var(
              --_ctm-mob-dn-io-in-in-gp,
              var(--_ctm-tab-dn-io-in-in-gp, var(--_ctm-dn-io-in-in-gp, 8px))
            );
            .icon {
              display: var(--_hover-show-icon, var(--_show-icon, flex));
              svg {
                width: var(
                  --_ctm-mob-dn-io-in-in-se,
                  var(--_ctm-tab-dn-io-in-in-se, var(--_ctm-dn-io-in-in-se))
                );
                height: var(
                  --_ctm-mob-dn-io-in-in-se,
                  var(--_ctm-tab-dn-io-in-in-se, var(--_ctm-dn-io-in-in-se))
                );
                path {
                  stroke: var(
                    --_ctm-mob-dn-io-in-in-c1,
                    var(--_ctm-tab-dn-io-in-in-c1, var(--_ctm-dn-io-in-in-c1))
                  );
                  // Overrides the stroke-width presentation attribute baked into the icon markup.
                  stroke-width: prepareMediaVariable(--_ctm-dn-io-in-se-wh, 1.25);
                }
              }
            }
          }
        }
        .accordion-description {
          display: block;
          // padding-block-end: var(--_sf-dc-pd-bt);
          background-color: var(
            --_ctm-mob-dn-ed-an-im-bd-cr-dc,
            var(--_ctm-tab-dn-ed-an-im-bd-cr-dc, var(--_ctm-dn-ed-an-im-bd-cr-dc))
          );
          padding: var(
            --_ctm-mob-dn-ed-an-im-pg-dc,
            var(--_ctm-tab-dn-ed-an-im-pg-dc, var(--_ctm-dn-ed-an-im-pg-dc))
          );
          div {
            font-family: var(
              --_ctm-mob-dn-ed-an-im-ft-fy-dc,
              var(--_ctm-tab-dn-ed-an-im-ft-fy-dc, var(--_ctm-dn-ed-an-im-ft-fy-dc))
            );
            text-transform: var(
              --_ctm-mob-dn-ed-an-im-tt-tm-dc,
              var(--_ctm-tab-dn-ed-an-im-tt-tm-dc, var(--_ctm-dn-ed-an-im-tt-tm-dc))
            );
            word-wrap: var(
              --_ctm-mob-dn-ed-an-im-wd-wp-dc,
              var(--_ctm-tab-dn-ed-an-im-wd-wp-dc, var(--_ctm-dn-ed-an-im-wd-wp-dc))
            );
            word-break: var(
              --_ctm-mob-dn-ed-an-im-wd-bk-dc,
              var(--_ctm-tab-dn-ed-an-im-wd-bk-dc, var(--_ctm-dn-ed-an-im-wd-bk-dc))
            );
          }
          color: var(
            --_ctm-mob-dn-ed-an-im-cr-dc,
            var(--_ctm-tab-dn-ed-an-im-cr-dc, var(--_ctm-dn-ed-an-im-cr-dc))
          );
          font-family: var(
            --_ctm-mob-dn-ed-an-im-ft-fy-dc,
            var(--_ctm-tab-dn-ed-an-im-ft-fy-dc, var(--_ctm-dn-ed-an-im-ft-fy-dc))
          );
          text-transform: var(
            --_ctm-mob-dn-ed-an-im-tt-tm-dc,
            var(--_ctm-tab-dn-ed-an-im-tt-tm-dc, var(--_ctm-dn-ed-an-im-tt-tm-dc))
          );
          word-wrap: var(
            --_ctm-mob-dn-ed-an-im-wd-wp-dc,
            var(--_ctm-tab-dn-ed-an-im-wd-wp-dc, var(--_ctm-dn-ed-an-im-wd-wp-dc))
          );
          word-break: var(
            --_ctm-mob-dn-ed-an-im-wd-bk-dc,
            var(--_ctm-tab-dn-ed-an-im-wd-bk-dc, var(--_ctm-dn-ed-an-im-wd-bk-dc))
          );
          &.flex__overflow {
            white-space: normal;
            @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
          }
          font-size: var(
            --_ctm-mob-dn-ed-an-im-ft-se-dc,
            var(--_ctm-tab-dn-ed-an-im-ft-se-dc, var(--_ctm-dn-ed-an-im-ft-se-dc))
          );
          font-weight: var(
            --_ctm-mob-dn-ed-an-im-ft-wt-dc,
            var(--_ctm-tab-dn-ed-an-im-ft-wt-dc, var(--_ctm-dn-ed-an-im-ft-wt-dc))
          );
          font-style: var(
            --_ctm-mob-dn-ed-an-im-ft-se-ic-dc,
            var(--_ctm-tab-dn-ed-an-im-ft-se-ic-dc, var(--_ctm-dn-ed-an-im-ft-se-ic-dc))
          );
          text-align: var(
            --_ctm-mob-dn-ed-an-im-tt-an-dc,
            var(--_ctm-tab-dn-ed-an-im-tt-an-dc, var(--_ctm-dn-ed-an-im-tt-an-dc))
          );
          letter-spacing: var(
            --_ctm-mob-dn-ed-an-im-lr-sg-dc,
            var(--_ctm-tab-dn-ed-an-im-lr-sg-dc, var(--_ctm-dn-ed-an-im-lr-sg-dc))
          );
          line-height: var(
            --_ctm-mob-dn-ed-an-im-le-ht-dc,
            var(--_ctm-tab-dn-ed-an-im-le-ht-dc, var(--_ctm-dn-ed-an-im-le-ht-dc))
          );
          text-decoration: var(
            --_ctm-mob-dn-ed-an-im-ue-dc,
            var(--_ctm-tab-dn-ed-an-im-ue-dc, var(--_ctm-dn-ed-an-im-ue-dc))
          );
        }

        .accordion-title {
          position: relative;
        }
        &[data-show-divider="true"] {
          // The divider is a pseudo-element and takes no space of its own, so a thick one
          // grew back over the title above it — see dividerGapReserve in functions.scss.
          .accordion-title:not(:last-child) {
            @include dividerGapReserve(--_ctm-dn-ed-an-im-dr-wt);
          }
          .accordion-title:not(:last-child)::before {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: dividerGapOffset(--_ctm-lt-te-ad-dn-sg, --_ctm-dn-ed-an-im-dr-wt);

            height: var(
              --_ctm-mob-dn-ed-an-im-dr-wt,
              var(--_ctm-tab-dn-ed-an-im-dr-wt, var(--_ctm-dn-ed-an-im-dr-wt))
            );
            background-color: var(
              --_ctm-mob-dn-ed-an-im-dr-cr,
              var(--_ctm-tab-dn-ed-an-im-dr-cr, var(--_ctm-dn-ed-an-im-dr-cr))
            );
          }
        }
      }
    }
    .divider {
      // height: var(
      //   --_ctm-mob-dn-wt-se-dr-wt,
      //   var(--_ctm-tab-dn-wt-se-dr-wt, var(--_ctm-dn-wt-se-dr-wt))
      // );
      // background-color: var(
      //   --_ctm-mob-dn-wt-se-dr-cr,
      //   var(--_ctm-tab-dn-wt-se-dr-cr, var(--_ctm-dn-wt-se-dr-cr))
      // );
      border: none; /* Remove default border */
      height: var(
        --_ctm-mob-dn-dr-dr-wt,
        var(--_ctm-tab-dn-dr-dr-wt, var(--_ctm-dn-dr-dr-wt))
      ); /* Set thickness */
      background-color: var(
        --_ctm-mob-dn-dr-dr-cr,
        var(--_ctm-tab-dn-dr-dr-cr, var(--_ctm-dn-dr-dr-cr))
      ); /* Set color */
      // margin: 20px 0; /* Optional spacing */
      // border-radius: 2px;
    }
  }
}