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

$resizerId: "[data-cms-tool='cms-element-resizer']";
$resizeActive: '[data-cms-element-resizer="true"]';
[data-div-type="element"] {
  &[data-element-type="breadcrumbs"] {
    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, var(--_sf-nw-wh)))
          )
      )
    );
    min-width: 200px !important;

    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));

    & > div {
      &.wrapper {
        min-width: 200px !important;
        width: 100%;
        background-color: var(
          --_ctm-mob-dn-bd-ad-fl-bd-cr,
          var(--_ctm-tab-dn-bd-ad-fl-bd-cr, var(--_ctm-dn-bd-ad-fl-bd-cr))
        );
        border-style: var(
          --_ctm-mob-dn-bd-ad-fl-br-se,
          var(--_ctm-tab-dn-bd-ad-fl-br-se, var(--_ctm-dn-bd-ad-fl-br-se))
        );
        border-width: var(
          --_ctm-mob-dn-bd-ad-fl-br-wh,
          var(--_ctm-tab-dn-bd-ad-fl-br-wh, var(--_ctm-dn-bd-ad-fl-br-wh))
        );
        border-color: var(
          --_ctm-mob-dn-bd-ad-fl-br-cr,
          var(--_ctm-tab-dn-bd-ad-fl-br-cr, var(--_ctm-dn-bd-ad-fl-br-cr))
        );
        border-radius: var(
          --_ctm-mob-dn-bd-ad-fl-br-rs,
          var(--_ctm-tab-dn-bd-ad-fl-br-rs, var(--_ctm-dn-bd-ad-fl-br-rs))
        );

        box-shadow: var(
          --_show-shadow,
          var(
              --_ctm-mob-dn-bd-ad-fl-sw-ae,
              var(--_ctm-tab-dn-bd-ad-fl-sw-ae, var(--_ctm-dn-bd-ad-fl-sw-ae))
            )
            var(
              --_ctm-mob-dn-bd-ad-fl-sw-br,
              var(--_ctm-tab-dn-bd-ad-fl-sw-br, var(--_ctm-dn-bd-ad-fl-sw-br))
            )
            var(
              --_ctm-mob-dn-bd-ad-fl-sw-sd,
              var(--_ctm-tab-dn-bd-ad-fl-sw-sd, var(--_ctm-dn-bd-ad-fl-sw-sd))
            )
            var(
              --_ctm-mob-dn-bd-ad-fl-sw-cr,
              var(--_ctm-tab-dn-bd-ad-fl-sw-cr, var(--_ctm-dn-bd-ad-fl-sw-cr))
            )
        );
      }

      .breadcrumb_item {
        &[data-show-cursor="true"] {
          cursor: pointer;
        }
      }

      .horizontal_breadcrumb_wrapper {
        display: inline-flex;
        align-items: center;
        padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));

        gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));

        &[overflow-item="Scroll"],
        &[overflow-item="Show More"],
        &[overflow-item="Collapsed"] {
          overflow-x: auto;
          width: inherit;
        }

        &[overflow-item="Wrap"] {
          flex-wrap: wrap;
          row-gap: var(
            --_ctm-mob-lt-im-vl-sg,
            var(--_ctm-tab-lt-im-vl-sg, var(--_ctm-lt-im-vl-sg))
          );
          column-gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
        }

        .breadcrumb_item {
          padding: 0px 4px;
          display: flex;
          gap: 8px;
          white-space: nowrap;
          align-items: center;

          padding: var(
            --_ctm-mob-dn-or-im-se-pg,
            var(--_ctm-tab-dn-or-im-se-pg, var(--_ctm-dn-or-im-se-pg))
          );
          gap: var(
            --_ctm-mob-dn-or-im-se-im-gp,
            var(--_ctm-tab-dn-or-im-se-im-gp, var(--_ctm-dn-or-im-se-im-gp))
          );

          background-color: var(
            --_ctm-mob-dn-or-im-se-bd-cr,
            var(--_ctm-tab-dn-or-im-se-bd-cr, var(--_ctm-dn-or-im-se-bd-cr))
          );
          border-color: var(
            --_ctm-mob-dn-or-im-se-br-cr,
            var(--_ctm-tab-dn-or-im-se-br-cr, var(--_ctm-dn-or-im-se-br-cr))
          );
          border-radius: var(
            --_ctm-mob-dn-or-im-se-br-rs,
            var(--_ctm-tab-dn-or-im-se-br-rs, var(--_ctm-dn-or-im-se-br-rs))
          );
          border-style: var(
            --_ctm-mob-dn-or-im-se-br-se,
            var(--_ctm-tab-dn-or-im-se-br-se, var(--_ctm-dn-or-im-se-br-se))
          );
          border-width: var(
            --_ctm-mob-dn-or-im-se-br-wh,
            var(--_ctm-tab-dn-or-im-se-br-wh, var(--_ctm-dn-or-im-se-br-wh))
          );
          color: var(
            --_ctm-mob-dn-or-im-se-cr,
            var(--_ctm-tab-dn-or-im-se-cr, var(--_ctm-dn-or-im-se-cr))
          );
          font-family: var(
            --_ctm-mob-dn-or-im-se-ft-fy,
            var(--_ctm-tab-dn-or-im-se-ft-fy, var(--_ctm-dn-or-im-se-ft-fy))
          );
          &.flex__overflow {
            white-space: normal;
            @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
          }
          font-size: var(
            --_ctm-mob-dn-or-im-se-ft-se,
            var(--_ctm-tab-dn-or-im-se-ft-se, var(--_ctm-dn-or-im-se-ft-se))
          );
          font-style: var(
            --_ctm-mob-dn-or-im-se-ft-se-ic,
            var(--_ctm-tab-dn-or-im-se-ft-se-ic, var(--_ctm-dn-or-im-se-ft-se-ic))
          );
          font-weight: var(
            --_ctm-mob-dn-or-im-se-ft-wt,
            var(--_ctm-tab-dn-or-im-se-ft-wt, var(--_ctm-dn-or-im-se-ft-wt))
          );
          line-height: var(
            --_ctm-mob-dn-or-im-se-le-ht,
            var(--_ctm-tab-dn-or-im-se-le-ht, var(--_ctm-dn-or-im-se-le-ht))
          );
          letter-spacing: var(
            --_ctm-mob-dn-or-im-se-lr-sg,
            var(--_ctm-tab-dn-or-im-se-lr-sg, var(--_ctm-dn-or-im-se-lr-sg))
          );
          text-align: var(
            --_ctm-mob-dn-or-im-se-tt-an,
            var(--_ctm-tab-dn-or-im-se-tt-an, var(--_ctm-dn-or-im-se-tt-an))
          );
          text-decoration: var(
            --_ctm-mob-dn-or-im-se-ue,
            var(--_ctm-tab-dn-or-im-se-ue, var(--_ctm-dn-or-im-se-ue))
          );
          text-transform: var(
            --_ctm-mob-dn-or-im-se-tt-tm,
            var(--_ctm-tab-dn-or-im-se-tt-tm, var(--_ctm-dn-or-im-se-tt-tm, none))
          );
          word-wrap: var(
            --_ctm-mob-dn-or-im-se-wd-wp,
            var(--_ctm-tab-dn-or-im-se-wd-wp, var(--_ctm-dn-or-im-se-wd-wp, normal))
          );
          word-break: var(
            --_ctm-mob-dn-or-im-se-wd-bk,
            var(--_ctm-tab-dn-or-im-se-wd-bk, var(--_ctm-dn-or-im-se-wd-bk, normal))
          );
          box-shadow: var(
              --_ctm-mob-dn-or-im-se-sw-ae,
              var(--_ctm-tab-dn-or-im-se-sw-ae, var(--_ctm-dn-or-im-se-sw-ae))
            )
            var(
              --_ctm-mob-dn-or-im-se-sw-br,
              var(--_ctm-tab-dn-or-im-se-sw-br, var(--_ctm-dn-or-im-se-sw-br))
            )
            var(
              --_ctm-mob-dn-or-im-se-sw-sd,
              var(--_ctm-tab-dn-or-im-se-sw-sd, var(--_ctm-dn-or-im-se-sw-sd))
            )
            var(
              --_ctm-mob-dn-or-im-se-sw-cr,
              var(--_ctm-tab-dn-or-im-se-sw-cr, var(--_ctm-dn-or-im-se-sw-cr))
            );

          .icon {
            svg {
              width: var(
                --_ctm-mob-dn-or-im-se-in-se,
                var(--_ctm-tab-dn-or-im-se-in-se, var(--_ctm-dn-or-im-se-in-se))
              );
              height: var(
                --_ctm-mob-dn-or-im-se-in-se,
                var(--_ctm-tab-dn-or-im-se-in-se, var(--_ctm-dn-or-im-se-in-se))
              );
              path {
                stroke: var(
                  --_ctm-mob-dn-or-im-se-in-c1,
                  var(--_ctm-tab-dn-or-im-se-in-c1, var(--_ctm-dn-or-im-se-in-c1))
                );
                // Overrides the stroke-width presentation attribute baked into the icon markup.
                stroke-width: prepareMediaVariable(--_ctm-dn-or-im-se-se-wh, 1.25);
              }
            }
          }

          &:first-of-type {
            padding: var(
              --_ctm-mob-dn-he-pe-im-se-pg,
              var(--_ctm-tab-dn-he-pe-im-se-pg, var(--_ctm-dn-he-pe-im-se-pg))
            );
            gap: var(
              --_ctm-mob-dn-he-pe-im-se-im-gp,
              var(--_ctm-tab-dn-he-pe-im-se-im-gp, var(--_ctm-dn-he-pe-im-se-im-gp))
            );
            background-color: var(
              --_ctm-mob-dn-he-pe-im-se-bd-cr,
              var(--_ctm-tab-dn-he-pe-im-se-bd-cr, var(--_ctm-dn-he-pe-im-se-bd-cr))
            );
            border-color: var(
              --_ctm-mob-dn-he-pe-im-se-br-cr,
              var(--_ctm-tab-dn-he-pe-im-se-br-cr, var(--_ctm-dn-he-pe-im-se-br-cr))
            );
            border-radius: var(
              --_ctm-mob-dn-he-pe-im-se-br-rs,
              var(--_ctm-tab-dn-he-pe-im-se-br-rs, var(--_ctm-dn-he-pe-im-se-br-rs))
            );
            border-style: var(
              --_ctm-mob-dn-he-pe-im-se-br-se,
              var(--_ctm-tab-dn-he-pe-im-se-br-se, var(--_ctm-dn-he-pe-im-se-br-se))
            );
            border-width: var(
              --_ctm-mob-dn-he-pe-im-se-br-wh,
              var(--_ctm-tab-dn-he-pe-im-se-br-wh, var(--_ctm-dn-he-pe-im-se-br-wh))
            );
            color: var(
              --_ctm-mob-dn-he-pe-im-se-cr,
              var(--_ctm-tab-dn-he-pe-im-se-cr, var(--_ctm-dn-he-pe-im-se-cr))
            );
            font-family: var(
              --_ctm-mob-dn-he-pe-im-se-ft-fy,
              var(--_ctm-tab-dn-he-pe-im-se-ft-fy, var(--_ctm-dn-he-pe-im-se-ft-fy))
            );
            font-size: var(
              --_ctm-mob-dn-he-pe-im-se-ft-se,
              var(--_ctm-tab-dn-he-pe-im-se-ft-se, var(--_ctm-dn-he-pe-im-se-ft-se))
            );
            font-style: var(
              --_ctm-mob-dn-he-pe-im-se-ft-se-ic,
              var(--_ctm-tab-dn-he-pe-im-se-ft-se-ic, var(--_ctm-dn-he-pe-im-se-ft-se-ic))
            );
            font-weight: var(
              --_ctm-mob-dn-he-pe-im-se-ft-wt,
              var(--_ctm-tab-dn-he-pe-im-se-ft-wt, var(--_ctm-dn-he-pe-im-se-ft-wt))
            );
            line-height: var(
              --_ctm-mob-dn-he-pe-im-se-le-ht,
              var(--_ctm-tab-dn-he-pe-im-se-le-ht, var(--_ctm-dn-he-pe-im-se-le-ht))
            );
            letter-spacing: var(
              --_ctm-mob-dn-he-pe-im-se-lr-sg,
              var(--_ctm-tab-dn-he-pe-im-se-lr-sg, var(--_ctm-dn-he-pe-im-se-lr-sg))
            );
            text-align: var(
              --_ctm-mob-dn-he-pe-im-se-tt-an,
              var(--_ctm-tab-dn-he-pe-im-se-tt-an, var(--_ctm-dn-he-pe-im-se-tt-an))
            );
            text-decoration: var(
              --_ctm-mob-dn-he-pe-im-se-ue,
              var(--_ctm-tab-dn-he-pe-im-se-ue, var(--_ctm-dn-he-pe-im-se-ue))
            );
            text-transform: var(
              --_ctm-mob-dn-he-pe-im-se-tt-tm,
              var(--_ctm-tab-dn-he-pe-im-se-tt-tm, var(--_ctm-dn-he-pe-im-se-tt-tm, none))
            );
            word-wrap: var(
              --_ctm-mob-dn-he-pe-im-se-wd-wp,
              var(--_ctm-tab-dn-he-pe-im-se-wd-wp, var(--_ctm-dn-he-pe-im-se-wd-wp, normal))
            );
            word-break: var(
              --_ctm-mob-dn-he-pe-im-se-wd-bk,
              var(--_ctm-tab-dn-he-pe-im-se-wd-bk, var(--_ctm-dn-he-pe-im-se-wd-bk, normal))
            );
            box-shadow: var(
                --_ctm-mob-dn-he-pe-im-se-sw-ae,
                var(--_ctm-tab-dn-he-pe-im-se-sw-ae, var(--_ctm-dn-he-pe-im-se-sw-ae))
              )
              var(
                --_ctm-mob-dn-he-pe-im-se-sw-br,
                var(--_ctm-tab-dn-he-pe-im-se-sw-br, var(--_ctm-dn-he-pe-im-se-sw-br))
              )
              var(
                --_ctm-mob-dn-he-pe-im-se-sw-sd,
                var(--_ctm-tab-dn-he-pe-im-se-sw-sd, var(--_ctm-dn-he-pe-im-se-sw-sd))
              )
              var(
                --_ctm-mob-dn-he-pe-im-se-sw-cr,
                var(--_ctm-tab-dn-he-pe-im-se-sw-cr, var(--_ctm-dn-he-pe-im-se-sw-cr))
              );

            .icon {
              svg {
                width: var(
                  --_ctm-mob-dn-he-pe-im-se-in-se,
                  var(--_ctm-tab-dn-he-pe-im-se-in-se, var(--_ctm-dn-he-pe-im-se-in-se))
                );
                height: var(
                  --_ctm-mob-dn-he-pe-im-se-in-se,
                  var(--_ctm-tab-dn-he-pe-im-se-in-se, var(--_ctm-dn-he-pe-im-se-in-se))
                );
                path {
                  stroke: var(
                    --_ctm-mob-dn-he-pe-im-se-in-c1,
                    var(--_ctm-tab-dn-he-pe-im-se-in-c1, var(--_ctm-dn-he-pe-im-se-in-c1))
                  );
                  // Overrides the stroke-width presentation attribute baked into the icon markup.
                  stroke-width: prepareMediaVariable(--_ctm-dn-he-pe-im-se-se-wh, 1.25);
                }
              }
            }
          }

          &:last-of-type {
            padding: var(
              --_ctm-mob-dn-ct-pe-im-se-pg,
              var(--_ctm-tab-dn-ct-pe-im-se-pg, var(--_ctm-dn-ct-pe-im-se-pg))
            );
            gap: var(
              --_ctm-mob-dn-ct-pe-im-se-im-gp,
              var(--_ctm-tab-dn-ct-pe-im-se-im-gp, var(--_ctm-dn-ct-pe-im-se-im-gp))
            );
            background-color: var(
              --_ctm-mob-dn-ct-pe-im-se-bd-cr,
              var(--_ctm-tab-dn-ct-pe-im-se-bd-cr, var(--_ctm-dn-ct-pe-im-se-bd-cr))
            );
            border-color: var(
              --_ctm-mob-dn-ct-pe-im-se-br-cr,
              var(--_ctm-tab-dn-ct-pe-im-se-br-cr, var(--_ctm-dn-ct-pe-im-se-br-cr))
            );
            border-radius: var(
              --_ctm-mob-dn-ct-pe-im-se-br-rs,
              var(--_ctm-tab-dn-ct-pe-im-se-br-rs, var(--_ctm-dn-ct-pe-im-se-br-rs))
            );
            border-style: var(
              --_ctm-mob-dn-ct-pe-im-se-br-se,
              var(--_ctm-tab-dn-ct-pe-im-se-br-se, var(--_ctm-dn-ct-pe-im-se-br-se))
            );
            border-width: var(
              --_ctm-mob-dn-ct-pe-im-se-br-wh,
              var(--_ctm-tab-dn-ct-pe-im-se-br-wh, var(--_ctm-dn-ct-pe-im-se-br-wh))
            );
            color: var(
              --_ctm-mob-dn-ct-pe-im-se-cr,
              var(--_ctm-tab-dn-ct-pe-im-se-cr, var(--_ctm-dn-ct-pe-im-se-cr))
            );
            font-family: var(
              --_ctm-mob-dn-ct-pe-im-se-ft-fy,
              var(--_ctm-tab-dn-ct-pe-im-se-ft-fy, var(--_ctm-dn-ct-pe-im-se-ft-fy))
            );
            font-size: var(
              --_ctm-mob-dn-ct-pe-im-se-ft-se,
              var(--_ctm-tab-dn-ct-pe-im-se-ft-se, var(--_ctm-dn-ct-pe-im-se-ft-se))
            );
            font-style: var(
              --_ctm-mob-dn-ct-pe-im-se-ft-se-ic,
              var(--_ctm-tab-dn-ct-pe-im-se-ft-se-ic, var(--_ctm-dn-ct-pe-im-se-ft-se-ic))
            );
            font-weight: var(
              --_ctm-mob-dn-ct-pe-im-se-ft-wt,
              var(--_ctm-tab-dn-ct-pe-im-se-ft-wt, var(--_ctm-dn-ct-pe-im-se-ft-wt))
            );
            line-height: var(
              --_ctm-mob-dn-ct-pe-im-se-le-ht,
              var(--_ctm-tab-dn-ct-pe-im-se-le-ht, var(--_ctm-dn-ct-pe-im-se-le-ht))
            );
            letter-spacing: var(
              --_ctm-mob-dn-ct-pe-im-se-lr-sg,
              var(--_ctm-tab-dn-ct-pe-im-se-lr-sg, var(--_ctm-dn-ct-pe-im-se-lr-sg))
            );
            text-align: var(
              --_ctm-mob-dn-ct-pe-im-se-tt-an,
              var(--_ctm-tab-dn-ct-pe-im-se-tt-an, var(--_ctm-dn-ct-pe-im-se-tt-an))
            );
            text-decoration: var(
              --_ctm-mob-dn-ct-pe-im-se-ue,
              var(--_ctm-tab-dn-ct-pe-im-se-ue, var(--_ctm-dn-ct-pe-im-se-ue))
            );
            text-transform: var(
              --_ctm-mob-dn-ct-pe-im-se-tt-tm,
              var(--_ctm-tab-dn-ct-pe-im-se-tt-tm, var(--_ctm-dn-ct-pe-im-se-tt-tm, none))
            );
            word-wrap: var(
              --_ctm-mob-dn-ct-pe-im-se-wd-wp,
              var(--_ctm-tab-dn-ct-pe-im-se-wd-wp, var(--_ctm-dn-ct-pe-im-se-wd-wp, normal))
            );
            word-break: var(
              --_ctm-mob-dn-ct-pe-im-se-wd-bk,
              var(--_ctm-tab-dn-ct-pe-im-se-wd-bk, var(--_ctm-dn-ct-pe-im-se-wd-bk, normal))
            );
            box-shadow: var(
                --_ctm-mob-dn-ct-pe-im-se-sw-ae,
                var(--_ctm-tab-dn-ct-pe-im-se-sw-ae, var(--_ctm-dn-ct-pe-im-se-sw-ae))
              )
              var(
                --_ctm-mob-dn-ct-pe-im-se-sw-sd,
                var(--_ctm-tab-dn-ct-pe-im-se-sw-sd, var(--_ctm-dn-ct-pe-im-se-sw-sd))
              )
              var(
                --_ctm-mob-dn-he-pe-im-se-sw-sd,
                var(--_ctm-tab-dn-he-pe-im-se-sw-sd, var(--_ctm-dn-he-pe-im-se-sw-sd))
              )
              var(
                --_ctm-mob-dn-ct-pe-im-se-sw-cr,
                var(--_ctm-tab-dn-ct-pe-im-se-sw-cr, var(--_ctm-dn-ct-pe-im-se-sw-cr))
              );

            .icon {
              svg {
                width: var(
                  --_ctm-mob-dn-ct-pe-im-se-in-se,
                  var(--_ctm-tab-dn-ct-pe-im-se-in-se, var(--_ctm-dn-ct-pe-im-se-in-se))
                );
                height: var(
                  --_ctm-mob-dn-ct-pe-im-se-in-se,
                  var(--_ctm-tab-dn-ct-pe-im-se-in-se, var(--_ctm-dn-ct-pe-im-se-in-se))
                );
                path {
                  stroke: var(
                    --_ctm-mob-dn-ct-pe-im-se-in-c1,
                    var(--_ctm-tab-dn-ct-pe-im-se-in-c1, var(--_ctm-dn-ct-pe-im-se-in-c1))
                  );
                  // Overrides the stroke-width presentation attribute baked into the icon markup.
                  stroke-width: prepareMediaVariable(--_ctm-dn-ct-pe-im-se-se-wh, 1.25);
                }
              }
            }
          }
        }
      }
      .vertical_breadcrumb_wrapper {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        height: 120px;

        // Background & Fill's border and shadow are painted once, on .wrapper above,
        // which encloses both the horizontal and the vertical trail. They used to be
        // repeated here as well, so the vertical layout drew the section's border and
        // shadow twice — once around the whole widget and again around the inner list.
        background-color: var(
          --_ctm-mob-dn-bd-ad-fl-bd-cr,
          var(--_ctm-tab-dn-bd-ad-fl-bd-cr, var(--_ctm-dn-bd-ad-fl-bd-cr))
        );
        padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));

        &[overflow-item="Scroll"],
        &[overflow-item="Show More"],
        &[overflow-item="Collapsed"] {
          overflow-y: auto;
          gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
        }

        &[overflow-item="Wrap"] {
          flex-wrap: wrap;
          row-gap: var(
            --_ctm-mob-lt-im-vl-sg,
            var(--_ctm-tab-lt-im-vl-sg, var(--_ctm-lt-im-vl-sg))
          );
          column-gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
        }

        .item_wrapper {
          display: flex;
          gap: 6px;

          &:first-of-type {
            .breadcrumb_item {
              padding: 0px 4px;
              display: flex;
              gap: 8px;
              white-space: nowrap;
              align-items: center;

              background-color: var(
                --_ctm-mob-dn-he-pe-im-se-bd-cr,
                var(--_ctm-tab-dn-he-pe-im-se-bd-cr, var(--_ctm-dn-he-pe-im-se-bd-cr))
              );
              border-color: var(
                --_ctm-mob-dn-he-pe-im-se-br-cr,
                var(--_ctm-tab-dn-he-pe-im-se-br-cr, var(--_ctm-dn-he-pe-im-se-br-cr))
              );
              border-radius: var(
                --_ctm-mob-dn-he-pe-im-se-br-rs,
                var(--_ctm-tab-dn-he-pe-im-se-br-rs, var(--_ctm-dn-he-pe-im-se-br-rs))
              );
              border-style: var(
                --_ctm-mob-dn-he-pe-im-se-br-se,
                var(--_ctm-tab-dn-he-pe-im-se-br-se, var(--_ctm-dn-he-pe-im-se-br-se))
              );
              border-width: var(
                --_ctm-mob-dn-he-pe-im-se-br-wh,
                var(--_ctm-tab-dn-he-pe-im-se-br-wh, var(--_ctm-dn-he-pe-im-se-br-wh))
              );
              color: var(
                --_ctm-mob-dn-he-pe-im-se-cr,
                var(--_ctm-tab-dn-he-pe-im-se-cr, var(--_ctm-dn-he-pe-im-se-cr))
              );
              font-family: var(
                --_ctm-mob-dn-he-pe-im-se-ft-fy,
                var(--_ctm-tab-dn-he-pe-im-se-ft-fy, var(--_ctm-dn-he-pe-im-se-ft-fy))
              );
              &.flex__overflow {
                white-space: normal;
                @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
              }
              font-size: var(
                --_ctm-mob-dn-he-pe-im-se-ft-se,
                var(--_ctm-tab-dn-he-pe-im-se-ft-se, var(--_ctm-dn-he-pe-im-se-ft-se))
              );
              font-style: var(
                --_ctm-mob-dn-he-pe-im-se-ft-se-ic,
                var(--_ctm-tab-dn-he-pe-im-se-ft-se-ic, var(--_ctm-dn-he-pe-im-se-ft-se-ic))
              );
              font-weight: var(
                --_ctm-mob-dn-he-pe-im-se-ft-wt,
                var(--_ctm-tab-dn-he-pe-im-se-ft-wt, var(--_ctm-dn-he-pe-im-se-ft-wt))
              );
              line-height: var(
                --_ctm-mob-dn-he-pe-im-se-le-ht,
                var(--_ctm-tab-dn-he-pe-im-se-le-ht, var(--_ctm-dn-he-pe-im-se-le-ht))
              );
              letter-spacing: var(
                --_ctm-mob-dn-he-pe-im-se-lr-sg,
                var(--_ctm-tab-dn-he-pe-im-se-lr-sg, var(--_ctm-dn-he-pe-im-se-lr-sg))
              );
              text-align: var(
                --_ctm-mob-dn-he-pe-im-se-tt-an,
                var(--_ctm-tab-dn-he-pe-im-se-tt-an, var(--_ctm-dn-he-pe-im-se-tt-an))
              );
              text-decoration: var(
                --_ctm-mob-dn-he-pe-im-se-ue,
                var(--_ctm-tab-dn-he-pe-im-se-ue, var(--_ctm-dn-he-pe-im-se-ue))
              );
              text-transform: var(
                --_ctm-mob-dn-he-pe-im-se-tt-tm,
                var(--_ctm-tab-dn-he-pe-im-se-tt-tm, var(--_ctm-dn-he-pe-im-se-tt-tm, none))
              );
              word-wrap: var(
                --_ctm-mob-dn-he-pe-im-se-wd-wp,
                var(--_ctm-tab-dn-he-pe-im-se-wd-wp, var(--_ctm-dn-he-pe-im-se-wd-wp, normal))
              );
              word-break: var(
                --_ctm-mob-dn-he-pe-im-se-wd-bk,
                var(--_ctm-tab-dn-he-pe-im-se-wd-bk, var(--_ctm-dn-he-pe-im-se-wd-bk, normal))
              );
              box-shadow: var(
                  --_ctm-mob-dn-he-pe-im-se-sw-ae,
                  var(--_ctm-tab-dn-he-pe-im-se-sw-ae, var(--_ctm-dn-he-pe-im-se-sw-ae))
                )
                var(
                  --_ctm-mob-dn-he-pe-im-se-sw-br,
                  var(--_ctm-tab-dn-he-pe-im-se-sw-br, var(--_ctm-dn-he-pe-im-se-sw-br))
                )
                var(
                  --_ctm-mob-dn-he-pe-im-se-sw-sd,
                  var(--_ctm-tab-dn-he-pe-im-se-sw-sd, var(--_ctm-dn-he-pe-im-se-sw-sd))
                )
                var(
                  --_ctm-mob-dn-he-pe-im-se-sw-cr,
                  var(--_ctm-tab-dn-he-pe-im-se-sw-cr, var(--_ctm-dn-he-pe-im-se-sw-cr))
                );

              .icon {
                svg {
                  width: var(
                    --_ctm-mob-dn-he-pe-im-se-in-se,
                    var(--_ctm-tab-dn-he-pe-im-se-in-se, var(--_ctm-dn-he-pe-im-se-in-se))
                  );
                  height: var(
                    --_ctm-mob-dn-he-pe-im-se-in-se,
                    var(--_ctm-tab-dn-he-pe-im-se-in-se, var(--_ctm-dn-he-pe-im-se-in-se))
                  );
                  path {
                    stroke: var(
                      --_ctm-mob-dn-he-pe-im-se-in-c1,
                      var(--_ctm-tab-dn-he-pe-im-se-in-c1, var(--_ctm-dn-he-pe-im-se-in-c1))
                    );
                    // Overrides the stroke-width presentation attribute baked into the icon markup.
                    stroke-width: prepareMediaVariable(--_ctm-dn-he-pe-im-se-se-wh, 1.25);
                  }
                }
              }
            }
          }

          .breadcrumb_item {
            padding: 0px 4px;
            display: flex;
            gap: 8px;
            white-space: nowrap;
            align-items: center;

            background-color: var(
              --_ctm-mob-dn-or-im-se-bd-cr,
              var(--_ctm-tab-dn-or-im-se-bd-cr, var(--_ctm-dn-or-im-se-bd-cr))
            );
            border-color: var(
              --_ctm-mob-dn-or-im-se-br-cr,
              var(--_ctm-tab-dn-or-im-se-br-cr, var(--_ctm-dn-or-im-se-br-cr))
            );
            border-radius: var(
              --_ctm-mob-dn-or-im-se-br-rs,
              var(--_ctm-tab-dn-or-im-se-br-rs, var(--_ctm-dn-or-im-se-br-rs))
            );
            border-style: var(
              --_ctm-mob-dn-or-im-se-br-se,
              var(--_ctm-tab-dn-or-im-se-br-se, var(--_ctm-dn-or-im-se-br-se))
            );
            border-width: var(
              --_ctm-mob-dn-or-im-se-br-wh,
              var(--_ctm-tab-dn-or-im-se-br-wh, var(--_ctm-dn-or-im-se-br-wh))
            );
            color: var(
              --_ctm-mob-dn-or-im-se-cr,
              var(--_ctm-tab-dn-or-im-se-cr, var(--_ctm-dn-or-im-se-cr))
            );
            font-family: var(
              --_ctm-mob-dn-or-im-se-ft-fy,
              var(--_ctm-tab-dn-or-im-se-ft-fy, var(--_ctm-dn-or-im-se-ft-fy))
            );
            &.flex__overflow {
              white-space: normal;
              @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
            }
            font-size: var(
              --_ctm-mob-dn-or-im-se-ft-se,
              var(--_ctm-tab-dn-or-im-se-ft-se, var(--_ctm-dn-or-im-se-ft-se))
            );
            font-style: var(
              --_ctm-mob-dn-or-im-se-ft-se-ic,
              var(--_ctm-tab-dn-or-im-se-ft-se-ic, var(--_ctm-dn-or-im-se-ft-se-ic))
            );
            font-weight: var(
              --_ctm-mob-dn-or-im-se-ft-wt,
              var(--_ctm-tab-dn-or-im-se-ft-wt, var(--_ctm-dn-or-im-se-ft-wt))
            );
            line-height: var(
              --_ctm-mob-dn-or-im-se-le-ht,
              var(--_ctm-tab-dn-or-im-se-le-ht, var(--_ctm-dn-or-im-se-le-ht))
            );
            letter-spacing: var(
              --_ctm-mob-dn-or-im-se-lr-sg,
              var(--_ctm-tab-dn-or-im-se-lr-sg, var(--_ctm-dn-or-im-se-lr-sg))
            );
            text-align: var(
              --_ctm-mob-dn-or-im-se-tt-an,
              var(--_ctm-tab-dn-or-im-se-tt-an, var(--_ctm-dn-or-im-se-tt-an))
            );
            text-decoration: var(
              --_ctm-mob-dn-or-im-se-ue,
              var(--_ctm-tab-dn-or-im-se-ue, var(--_ctm-dn-or-im-se-ue))
            );
            text-transform: var(
              --_ctm-mob-dn-or-im-se-tt-tm,
              var(--_ctm-tab-dn-or-im-se-tt-tm, var(--_ctm-dn-or-im-se-tt-tm, none))
            );
            word-wrap: var(
              --_ctm-mob-dn-or-im-se-wd-wp,
              var(--_ctm-tab-dn-or-im-se-wd-wp, var(--_ctm-dn-or-im-se-wd-wp, normal))
            );
            word-break: var(
              --_ctm-mob-dn-or-im-se-wd-bk,
              var(--_ctm-tab-dn-or-im-se-wd-bk, var(--_ctm-dn-or-im-se-wd-bk, normal))
            );
            box-shadow: var(
                --_ctm-mob-dn-or-im-se-sw-ae,
                var(--_ctm-tab-dn-or-im-se-sw-ae, var(--_ctm-dn-or-im-se-sw-ae))
              )
              var(
                --_ctm-mob-dn-or-im-se-sw-br,
                var(--_ctm-tab-dn-or-im-se-sw-br, var(--_ctm-dn-or-im-se-sw-br))
              )
              var(
                --_ctm-mob-dn-or-im-se-sw-sd,
                var(--_ctm-tab-dn-or-im-se-sw-sd, var(--_ctm-dn-or-im-se-sw-sd))
              )
              var(
                --_ctm-mob-dn-or-im-se-sw-cr,
                var(--_ctm-tab-dn-or-im-se-sw-cr, var(--_ctm-dn-or-im-se-sw-cr))
              );

            .icon {
              svg {
                width: var(
                  --_ctm-mob-dn-or-im-se-in-se,
                  var(--_ctm-tab-dn-or-im-se-in-se, var(--_ctm-dn-or-im-se-in-se))
                );
                height: var(
                  --_ctm-mob-dn-or-im-se-in-se,
                  var(--_ctm-tab-dn-or-im-se-in-se, var(--_ctm-dn-or-im-se-in-se))
                );
                path {
                  stroke: var(
                    --_ctm-mob-dn-or-im-se-in-c1,
                    var(--_ctm-tab-dn-or-im-se-in-c1, var(--_ctm-dn-or-im-se-in-c1))
                  );
                  // Overrides the stroke-width presentation attribute baked into the icon markup.
                  stroke-width: prepareMediaVariable(--_ctm-dn-or-im-se-se-wh, 1.25);
                }
              }
            }
          }

          &:last-of-type {
            .breadcrumb_item {
              padding: 0px 4px;
              display: flex;
              gap: 8px;
              white-space: nowrap;
              align-items: center;

              background-color: var(
                --_ctm-mob-dn-ct-pe-im-se-bd-cr,
                var(--_ctm-tab-dn-ct-pe-im-se-bd-cr, var(--_ctm-dn-ct-pe-im-se-bd-cr))
              );
              border-color: var(
                --_ctm-mob-dn-ct-pe-im-se-br-cr,
                var(--_ctm-tab-dn-ct-pe-im-se-br-cr, var(--_ctm-dn-ct-pe-im-se-br-cr))
              );
              border-radius: var(
                --_ctm-mob-dn-ct-pe-im-se-br-rs,
                var(--_ctm-tab-dn-ct-pe-im-se-br-rs, var(--_ctm-dn-ct-pe-im-se-br-rs))
              );
              border-style: var(
                --_ctm-mob-dn-ct-pe-im-se-br-se,
                var(--_ctm-tab-dn-ct-pe-im-se-br-se, var(--_ctm-dn-ct-pe-im-se-br-se))
              );
              border-width: var(
                --_ctm-mob-dn-ct-pe-im-se-br-wh,
                var(--_ctm-tab-dn-ct-pe-im-se-br-wh, var(--_ctm-dn-ct-pe-im-se-br-wh))
              );
              color: var(
                --_ctm-mob-dn-ct-pe-im-se-cr,
                var(--_ctm-tab-dn-ct-pe-im-se-cr, var(--_ctm-dn-ct-pe-im-se-cr))
              );
              font-family: var(
                --_ctm-mob-dn-ct-pe-im-se-ft-fy,
                var(--_ctm-tab-dn-ct-pe-im-se-ft-fy, var(--_ctm-dn-ct-pe-im-se-ft-fy))
              );
              &.flex__overflow {
                white-space: normal;
                @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
              }
              font-size: var(
                --_ctm-mob-dn-ct-pe-im-se-ft-se,
                var(--_ctm-tab-dn-ct-pe-im-se-ft-se, var(--_ctm-dn-ct-pe-im-se-ft-se))
              );
              font-style: var(
                --_ctm-mob-dn-ct-pe-im-se-ft-se-ic,
                var(--_ctm-tab-dn-ct-pe-im-se-ft-se-ic, var(--_ctm-dn-ct-pe-im-se-ft-se-ic))
              );
              font-weight: var(
                --_ctm-mob-dn-ct-pe-im-se-ft-wt,
                var(--_ctm-tab-dn-ct-pe-im-se-ft-wt, var(--_ctm-dn-ct-pe-im-se-ft-wt))
              );
              line-height: var(
                --_ctm-mob-dn-ct-pe-im-se-le-ht,
                var(--_ctm-tab-dn-ct-pe-im-se-le-ht, var(--_ctm-dn-ct-pe-im-se-le-ht))
              );
              letter-spacing: var(
                --_ctm-mob-dn-ct-pe-im-se-lr-sg,
                var(--_ctm-tab-dn-ct-pe-im-se-lr-sg, var(--_ctm-dn-ct-pe-im-se-lr-sg))
              );
              text-align: var(
                --_ctm-mob-dn-ct-pe-im-se-tt-an,
                var(--_ctm-tab-dn-ct-pe-im-se-tt-an, var(--_ctm-dn-ct-pe-im-se-tt-an))
              );
              text-decoration: var(
                --_ctm-mob-dn-ct-pe-im-se-ue,
                var(--_ctm-tab-dn-ct-pe-im-se-ue, var(--_ctm-dn-ct-pe-im-se-ue))
              );
              text-transform: var(
                --_ctm-mob-dn-ct-pe-im-se-tt-tm,
                var(--_ctm-tab-dn-ct-pe-im-se-tt-tm, var(--_ctm-dn-ct-pe-im-se-tt-tm, none))
              );
              word-wrap: var(
                --_ctm-mob-dn-ct-pe-im-se-wd-wp,
                var(--_ctm-tab-dn-ct-pe-im-se-wd-wp, var(--_ctm-dn-ct-pe-im-se-wd-wp, normal))
              );
              word-break: var(
                --_ctm-mob-dn-ct-pe-im-se-wd-bk,
                var(--_ctm-tab-dn-ct-pe-im-se-wd-bk, var(--_ctm-dn-ct-pe-im-se-wd-bk, normal))
              );
              box-shadow: var(
                  --_ctm-mob-dn-ct-pe-im-se-sw-ae,
                  var(--_ctm-tab-dn-ct-pe-im-se-sw-ae, var(--_ctm-dn-ct-pe-im-se-sw-ae))
                )
                var(
                  --_ctm-mob-dn-ct-pe-im-se-sw-sd,
                  var(--_ctm-tab-dn-ct-pe-im-se-sw-sd, var(--_ctm-dn-ct-pe-im-se-sw-sd))
                )
                var(
                  --_ctm-mob-dn-he-pe-im-se-sw-sd,
                  var(--_ctm-tab-dn-he-pe-im-se-sw-sd, var(--_ctm-dn-he-pe-im-se-sw-sd))
                )
                var(
                  --_ctm-mob-dn-ct-pe-im-se-sw-cr,
                  var(--_ctm-tab-dn-ct-pe-im-se-sw-cr, var(--_ctm-dn-ct-pe-im-se-sw-cr))
                );

              .icon {
                svg {
                  width: var(
                    --_ctm-mob-dn-ct-pe-im-se-in-se,
                    var(--_ctm-tab-dn-ct-pe-im-se-in-se, var(--_ctm-dn-ct-pe-im-se-in-se))
                  );
                  height: var(
                    --_ctm-mob-dn-ct-pe-im-se-in-se,
                    var(--_ctm-tab-dn-ct-pe-im-se-in-se, var(--_ctm-dn-ct-pe-im-se-in-se))
                  );
                  path {
                    stroke: var(
                      --_ctm-mob-dn-ct-pe-im-se-in-c1,
                      var(--_ctm-tab-dn-ct-pe-im-se-in-c1, var(--_ctm-dn-ct-pe-im-se-in-c1))
                    );
                    // Overrides the stroke-width presentation attribute baked into the icon markup.
                    stroke-width: prepareMediaVariable(--_ctm-dn-ct-pe-im-se-se-wh, 1.25);
                  }
                }
              }
            }
          }
        }
      }

      .separator {
        .icon {
          display: flex;
          svg {
            width: var(
              --_ctm-mob-dn-im-sr-in-se,
              var(--_ctm-tab-dn-im-sr-in-se, var(--_ctm-dn-im-sr-in-se))
            );
            height: var(
              --_ctm-mob-dn-im-sr-in-se,
              var(--_ctm-tab-dn-im-sr-in-se, var(--_ctm-dn-im-sr-in-se))
            );
            path {
              stroke: var(
                --_ctm-mob-dn-im-sr-in-c1,
                var(--_ctm-tab-dn-im-sr-in-c1, var(--_ctm-dn-im-sr-in-c1))
              );
              // Overrides the stroke-width presentation attribute baked into the icon markup.
              stroke-width: prepareMediaVariable(--_ctm-dn-im-sr-se-wh, 1.25);
            }
          }
        }
      }

      // The Collapsed layout's expand/collapse toggle had no rules at all, so the Expand
      // Icon design section had nothing to paint and the toggle rendered as an unsized,
      // uncoloured, non-clickable box. It takes the same `ed-in` (expand icon) variables
      // the Show More button already uses.
      .collapse_btn,
      .show_more_btn {
        white-space: nowrap;
        background-color: var(
          --_ctm-mob-dn-ed-in-bd-cr,
          var(--_ctm-tab-dn-ed-in-bd-cr, var(--_ctm-dn-ed-in-bd-cr))
        );
        .icon {
          display: flex;
          svg {
            width: var(
              --_ctm-mob-dn-ed-in-in-se,
              var(--_ctm-tab-dn-ed-in-in-se, var(--_ctm-dn-ed-in-in-se))
            );
            height: var(
              --_ctm-mob-dn-ed-in-in-se,
              var(--_ctm-tab-dn-ed-in-in-se, var(--_ctm-dn-ed-in-in-se))
            );
            path {
              stroke: var(
                --_ctm-mob-dn-ed-in-in-c1,
                var(--_ctm-tab-dn-ed-in-in-c1, var(--_ctm-dn-ed-in-in-c1))
              );
              // Overrides the stroke-width presentation attribute baked into the icon markup.
              stroke-width: prepareMediaVariable(--_ctm-dn-ed-in-se-wh, 1.25);
            }
          }
        }
      }

      .collapse_btn {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        cursor: pointer;
      }
    }

    // "Show Border" switches. Each design section paints its border from CSS variables,
    // so the switch reaches the stylesheet as a data attribute and the matching
    // border-width is zeroed here. Kept at the end of the block and matched to the same
    // selector depth as the rules above — anywhere earlier and the section rules would
    // win the tie on source order. The item gates carry :not(:first-of-type)
    // /:not(:last-of-type) so switching "Other Item Style" off doesn't also strip the
    // home and current items, which have their own borders and their own switches.
    // Background & Fill's border lives on .wrapper, which is where both trail layouts
    // now take it from — so the switch has to target that, not the inner trail wrappers.
    &[data-trail-border="false"] > div.wrapper {
      border-width: 0;
      border-style: none;
    }
    &[data-other-border="false"]
      > div
      .horizontal_breadcrumb_wrapper
      .breadcrumb_item:not(:first-of-type):not(:last-of-type),
    &[data-other-border="false"]
      > div
      .vertical_breadcrumb_wrapper
      .item_wrapper:not(:first-of-type):not(:last-of-type)
      .breadcrumb_item {
      border-width: 0;
      border-style: none;
    }
    &[data-home-border="false"] > div .horizontal_breadcrumb_wrapper .breadcrumb_item:first-of-type,
    &[data-home-border="false"]
      > div
      .vertical_breadcrumb_wrapper
      .item_wrapper:first-of-type
      .breadcrumb_item {
      border-width: 0;
      border-style: none;
    }
    &[data-current-border="false"]
      > div
      .horizontal_breadcrumb_wrapper
      .breadcrumb_item:last-of-type,
    &[data-current-border="false"]
      > div
      .vertical_breadcrumb_wrapper
      .item_wrapper:last-of-type
      .breadcrumb_item {
      border-width: 0;
      border-style: none;
    }
  }
}