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

[data-div-type="element"] {
  &[data-element-type="productLabels"] {
    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)));

    & > .wrapper {
      width: 100%;
    }
    &[data-show-shadow="false"] {
      --_show-shadow: none;
    }
    &[data-overflow-items="Scroll"] {
      .horizontal {
        width: 100%;
        overflow-x: auto;
        // Keep label chips at their natural (admin-styled) width; only prevent
        // them from squishing in a horizontal scroll row.
        .item {
          flex-shrink: 0;
        }
      }
      .vertical {
        overflow-y: auto;
        max-height: 30%;
      }
    }
    .text-element {
      color: #333;
      font-size: 12px;
      font-style: normal;
      font-weight: 400;
      line-height: 18px;
      margin-bottom: 6px;
    }
    .labels__container {
      background-color: var(
        --_ctm-mob-dn-wt-se-bd-cr,
        var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr))
      );

      border-color: var(
        --_ctm-mob-dn-wt-se-br-cr,
        var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr))
      );

      border-style: var(
        --_ctm-mob-dn-wt-se-br-se,
        var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se))
      );

      border-width: var(
        --_ctm-mob-dn-wt-se-br-wh,
        var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh))
      );

      border-radius: var(
        --_ctm-mob-dn-wt-se-br-rs,
        var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs))
      );

      box-shadow: var(
        --_show-shadow,
        var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae)))
          var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br)))
          var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd)))
          var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr)))
      );

      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
      .stack {
        display: flex;
        flex-direction: column;
        gap: prepareMediaVariable(--_ctm-lt-te-ad-is-sg);

        // Labels are fully styled in the admin Label Builder — this element only
        // arranges them. The .item is a transparent wrapper so each label chip
        // renders at its own (admin-designed) size. `position: relative` is kept
        // for the optional divider pseudo-element below.
        .item {
          position: relative;
          display: inline-flex;
        }
        .items__container {
          &[data-show-divider="true"] {
            &[data-flex-direction="row"] {
              // The divider is a pseudo-element and takes no space of its own, so a thick
              // one grew back over the label beside it — see dividerGapReserve in functions.scss.
              .item:not(:last-child) {
                @include dividerGapReserve(--_ctm-dn-wt-se-dr-wt, right);
              }
              .item:not(:last-child)::before {
                content: "";
                position: absolute;
                top: 0;
                bottom: 0; /* For full height divider */
                right: dividerGapOffset(--_ctm-lt-im-sg, --_ctm-dn-wt-se-dr-wt);
                width: var(
                  --_ctm-mob-dn-wt-se-dr-wt,
                  var(--_ctm-tab-dn-wt-se-dr-wt, var(--_ctm-dn-wt-se-dr-wt))
                ); /* Divider thickness */
                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))
                ); /* Divider color */
              }
            }
            &[data-flex-direction="column"] {
              .item:not(:last-child) {
                @include dividerGapReserve(--_ctm-dn-wt-se-dr-wt);
              }
              .item:not(:last-child)::before {
                content: "";
                position: absolute;
                left: 0;
                right: 0;
                bottom: dividerGapOffset(--_ctm-lt-im-sg, --_ctm-dn-wt-se-dr-wt);
                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))
                );
              }
            }
          }
        }

        .title {
          white-space: nowrap;
          color: var(--_ctm-mob-dn-wt-se-cr, var(--_ctm-tab-dn-wt-se-cr, var(--_ctm-dn-wt-se-cr)));
          font-family: var(
            --_ctm-mob-dn-wt-se-ft-fy,
            var(--_ctm-tab-dn-wt-se-ft-fy, var(--_ctm-dn-wt-se-ft-fy))
          );
          text-transform: var(
            --_ctm-mob-dn-wt-se-tt-tm,
            var(--_ctm-tab-dn-wt-se-tt-tm, var(--_ctm-dn-wt-se-tt-tm))
          );
          word-wrap: var(
            --_ctm-mob-dn-wt-se-wd-wp,
            var(--_ctm-tab-dn-wt-se-wd-wp, var(--_ctm-dn-wt-se-wd-wp))
          );
          word-break: var(
            --_ctm-mob-dn-wt-se-wd-bk,
            var(--_ctm-tab-dn-wt-se-wd-bk, var(--_ctm-dn-wt-se-wd-bk))
          );
          font-size: var(
            --_ctm-mob-dn-wt-se-ft-se,
            var(--_ctm-tab-dn-wt-se-ft-se, var(--_ctm-dn-wt-se-ft-se))
          );
          font-weight: var(
            --_ctm-mob-dn-wt-se-ft-wt,
            var(--_ctm-tab-dn-wt-se-ft-wt, var(--_ctm-dn-wt-se-ft-wt))
          );
          font-style: var(
            --_ctm-mob-dn-wt-se-ft-se-ic,
            var(--_ctm-tab-dn-wt-se-ft-se-ic, var(--_ctm-dn-wt-se-ft-se-ic))
          );
          text-align: var(
            --_ctm-mob-dn-wt-se-tt-an,
            var(--_ctm-tab-dn-wt-se-tt-an, var(--_ctm-dn-wt-se-tt-an))
          );
          letter-spacing: var(
            --_ctm-mob-dn-wt-se-lr-sg,
            var(--_ctm-tab-dn-wt-se-lr-sg, var(--_ctm-dn-wt-se-lr-sg))
          );
          line-height: var(
            --_ctm-mob-dn-wt-se-le-ht,
            var(--_ctm-tab-dn-wt-se-le-ht, var(--_ctm-dn-wt-se-le-ht))
          );
          text-decoration: var(
            --_ctm-mob-dn-wt-se-ue,
            var(--_ctm-tab-dn-wt-se-ue, var(--_ctm-dn-wt-se-ue))
          );
          padding: prepareMediaVariable(--_ctm-dn-wt-se-pg);
        }
        .horizontal {
          display: flex;
          gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, 10px)));
          .item {
            flex-shrink: 0;
          }

          &[data-overflow-items="Wrap"] {
            flex-wrap: wrap;
          }
          &[data-overflow-items="Scroll"] {
            width: 100%;
            overflow-x: auto;
          }
          &[data-overflow-items="Hidden"] {
            overflow-x: hidden;
          }

          &[items-content-alignement="right"] {
            justify-content: flex-end;
          }
          &[items-content-alignement="left"] {
            justify-content: flex-start;
          }
          &[items-content-alignement="center"] {
            justify-content: center;
          }
        }
        .vertical {
          display: flex;
          flex-direction: column;
          gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
          max-height: prepareMediaVariable(--_ctm-lt-mx-cr-ht);

          &[data-overflow-items="Scroll"] {
            overflow-y: auto;
          }
          &[data-overflow-items="Hidden"] {
            overflow-y: hidden;
          }

          &[items-content-alignement="right"] {
            align-items: flex-end;
          }
          &[items-content-alignement="left"] {
            align-items: flex-start;
          }
          &[items-content-alignement="center"] {
            align-items: center;
          }
        }
        .grid {
          display: grid;
          grid-template-columns: repeat(var(--_ctm-lt-is-pr-rw), minmax(auto, 1fr));
          grid-template-columns: repeat(
            var(--_ctm-mob-lt-is-pr-rw, var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw))),
            minmax(auto, 1fr)
          );
          // Keep admin-styled chips at their natural size instead of stretching
          // them to fill the grid cell.
          justify-items: start;
          gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, 10px)));
          max-height: prepareMediaVariable(--_ctm-lt-mx-cr-ht);
          &[data-overflow-items="Scroll"] {
            overflow-y: auto;
          }
          &[data-overflow-items="Hidden"] {
            overflow-y: hidden;
          }
          margin: 0px;
          .item {
            width: auto;
          }
        }
      }
    }
  }
}