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

$resizerId: "[data-cms-tool='cms-element-resizer']";
$resizeActive: '[data-cms-element-resizer="true"]';
[data-div-type="element"] {
  &[data-element-type="rfqs"] {
    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)))
          )
      )
    );
    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));

    & > div {
      &.wrapper {
        width: 100%;
        &[data-divider-type="true"] .metric_item {
          border: 0px !important;
          border-top: 2px solid var(--_primary-100) !important;
          .quotes_wrapper {
            border: 0px !important;
          }
        }
      }
    }
    .embla__container {
      grid-template-columns: max-content !important;
      grid-auto-columns: max-content !important;

      .embla__slide {
        width: max-content !important;
      }
    }

    .rfqs_wrapper {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      align-self: stretch;
      // border-radius: 4px;
      // border: 1px solid var(--_primary-100);
      // background: #fff;
      width: 349px;
      font-family: prepareMediaVariable(--_ctm-dn-wt-se-ft-fy);
      text-transform: prepareMediaVariable(--_ctm-dn-wt-se-tt-tm);
      word-wrap: prepareMediaVariable(--_ctm-dn-wt-se-wd-wp);
      word-break: prepareMediaVariable(--_ctm-dn-wt-se-wd-bk);
      &.flex__overflow {
        white-space: normal;
        @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
      }
      font-size: prepareMediaVariable(--_ctm-dn-wt-se-ft-se);
      color: prepareMediaVariable(--_ctm-dn-wt-se-cr);
      font-weight: prepareMediaVariable(--_ctm-dn-wt-se-ft-wt);
      font-style: prepareMediaVariable(--_ctm-dn-wt-se-ft-se-ic);
      text-decoration: prepareMediaVariable(--_ctm-dn-wt-se-ue);
      text-align: prepareMediaVariable(--_ctm-dn-wt-se-tt-an);
      letter-spacing: prepareMediaVariable(--_ctm-dn-wt-se-lr-sg);
      line-height: prepareMediaVariable(--_ctm-dn-wt-se-le-ht);
      background-color: prepareMediaVariable(--_ctm-dn-wt-se-bd-cr);
      border-width: prepareMediaVariable(--_ctm-dn-wt-se-br-wh);
      border-color: prepareMediaVariable(--_ctm-dn-wt-se-br-cr);
      border-style: prepareMediaVariable(--_ctm-dn-wt-se-br-se);
      border-radius: prepareMediaVariable(--_ctm-dn-wt-se-br-rs);
      box-shadow: prepareMediaVariable(--_ctm-dn-wt-se-sw-ae)
        prepareMediaVariable(--_ctm-dn-wt-se-sw-br) prepareMediaVariable(--_ctm-dn-wt-se-sw-sd)
        prepareMediaVariable(--_ctm-dn-wt-se-sw-cr);
      .rfqs_card {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        align-self: stretch;
        width: 349px;
        .heading_wrapper {
          display: flex;
          padding: 16px;
          align-items: center;
          gap: 8px;
          align-self: stretch;
          //border-bottom: 1px solid var(--_gray-200);

          .heading {
            // color: var(--_gray-900);
            // font-size: 20px;
            // font-weight: 600;
            // line-height: 30px;
            font-family: prepareMediaVariable(--_ctm-dn-wt-se-ft-fy);
            text-transform: prepareMediaVariable(--_ctm-dn-wt-se-tt-tm);
            word-wrap: prepareMediaVariable(--_ctm-dn-wt-se-wd-wp);
            word-break: prepareMediaVariable(--_ctm-dn-wt-se-wd-bk);
            font-size: prepareMediaVariable(--_ctm-dn-wt-se-ft-se);
            color: prepareMediaVariable(--_ctm-dn-wt-se-cr);
            font-weight: prepareMediaVariable(--_ctm-dn-wt-se-ft-wt);
            font-style: prepareMediaVariable(--_ctm-dn-wt-se-ft-se-ic);
            text-decoration: prepareMediaVariable(--_ctm-dn-wt-se-ue);
            text-align: prepareMediaVariable(--_ctm-dn-wt-se-tt-an);
            letter-spacing: prepareMediaVariable(--_ctm-dn-wt-se-lr-sg);
            line-height: prepareMediaVariable(--_ctm-dn-wt-se-le-ht);
          }
        }

        .metric_item {
          display: flex;
          flex-direction: column;
          align-items: center;
          flex: 1 0 0;
          align-self: stretch;
          //border-radius: 0px 0px 6px 6px;

          background-color: prepareMediaVariable(--_ctm-dn-im-se-bd-cr);
          border-width: prepareMediaVariable(--_ctm-dn-im-se-br-wh);
          border-color: prepareMediaVariable(--_ctm-dn-im-se-br-cr);
          border-style: prepareMediaVariable(--_ctm-dn-im-se-br-se);
          border-radius: prepareMediaVariable(--_ctm-dn-im-se-br-rs);
          box-shadow: prepareMediaVariable(--_ctm-dn-im-se-sw-ae)
            prepareMediaVariable(--_ctm-dn-im-se-sw-br) prepareMediaVariable(--_ctm-dn-im-se-sw-sd)
            prepareMediaVariable(--_ctm-dn-im-se-sw-cr);

          .content {
            display: flex;
            padding: 12px 16px;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            gap: 12px;
            flex: 1 0 0;
            align-self: stretch;
            font-family: prepareMediaVariable(--_ctm-dn-im-se-ft-fy);
            text-transform: prepareMediaVariable(--_ctm-dn-im-se-tt-tm);
            word-wrap: prepareMediaVariable(--_ctm-dn-im-se-wd-wp);
            word-break: prepareMediaVariable(--_ctm-dn-im-se-wd-bk);
            &.flex__overflow {
              white-space: normal;
              @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
            }
            font-size: prepareMediaVariable(--_ctm-dn-im-se-ft-se);
            color: prepareMediaVariable(--_ctm-dn-im-se-cr);
            font-weight: prepareMediaVariable(--_ctm-dn-im-se-ft-wt);
            font-style: prepareMediaVariable(--_ctm-dn-im-se-ft-se-ic);
            text-decoration: prepareMediaVariable(--_ctm-dn-im-se-ue);
            text-align: prepareMediaVariable(--_ctm-dn-im-se-tt-an);
            letter-spacing: prepareMediaVariable(--_ctm-dn-im-se-lr-sg);
            line-height: prepareMediaVariable(--_ctm-dn-im-se-le-ht);

            .metric_wrapper {
              display: flex;
              align-items: center;
              gap: 16px;
              flex: 1 0 0;
              align-self: stretch;

              .rfq_id {
                flex: 1 0 0;
                // color: var(--_gray-900);
                // font-size: 14px;
                // font-weight: 600;
                // line-height: 20px;
                font-family: prepareMediaVariable(--_ctm-dn-rq-id-ft-fy);
                text-transform: prepareMediaVariable(--_ctm-dn-rq-id-tt-tm);
                word-wrap: prepareMediaVariable(--_ctm-dn-rq-id-wd-wp);
                word-break: prepareMediaVariable(--_ctm-dn-rq-id-wd-bk);
                font-size: prepareMediaVariable(--_ctm-dn-rq-id-ft-se);
                color: prepareMediaVariable(--_ctm-dn-rq-id-cr);
                font-weight: prepareMediaVariable(--_ctm-dn-rq-id-ft-wt);
                font-style: prepareMediaVariable(--_ctm-dn-rq-id-ft-se-ic);
                text-decoration: prepareMediaVariable(--_ctm-dn-rq-id-ue);
                text-align: prepareMediaVariable(--_ctm-dn-rq-id-tt-an);
                letter-spacing: prepareMediaVariable(--_ctm-dn-rq-id-lr-sg);
                line-height: prepareMediaVariable(--_ctm-dn-rq-id-le-ht);
                background-color: prepareMediaVariable(--_ctm-dn-rq-id-bd-cr);
                border-width: prepareMediaVariable(--_ctm-dn-rq-id-br-wh);
                border-color: prepareMediaVariable(--_ctm-dn-rq-id-br-cr);
                border-style: prepareMediaVariable(--_ctm-dn-rq-id-br-se);
                border-radius: prepareMediaVariable(--_ctm-dn-rq-id-br-rs);
                box-shadow: prepareMediaVariable(--_ctm-dn-rq-id-sw-ae)
                  prepareMediaVariable(--_ctm-dn-rq-id-sw-br)
                  prepareMediaVariable(--_ctm-dn-rq-id-sw-sd)
                  prepareMediaVariable(--_ctm-dn-rq-id-sw-cr);
              }

              .status_badge {
                display: flex;
                padding: 2px 8px 2px 6px;
                align-items: center;
                gap: 4px;
                // border-radius: 16px;
                // background: #fff4ed;
                mix-blend-mode: multiply;
                background-color: prepareMediaVariable(--_ctm-dn-rq-ss-bd-cr);
                border-width: prepareMediaVariable(--_ctm-dn-rq-ss-br-wh);
                border-color: prepareMediaVariable(--_ctm-dn-rq-ss-br-cr);
                border-style: prepareMediaVariable(--_ctm-dn-rq-ss-br-se);
                border-radius: prepareMediaVariable(--_ctm-dn-rq-ss-br-rs);
                box-shadow: prepareMediaVariable(--_ctm-dn-rq-ss-sw-ae)
                  prepareMediaVariable(--_ctm-dn-rq-ss-sw-br)
                  prepareMediaVariable(--_ctm-dn-rq-ss-sw-sd)
                  prepareMediaVariable(--_ctm-dn-rq-ss-sw-cr);

                .rfq_status {
                  // color: #b93815;
                  // text-align: center;
                  // font-size: 12px;
                  // line-height: 18px;
                  font-family: prepareMediaVariable(--_ctm-dn-rq-ss-ft-fy);
                  text-transform: prepareMediaVariable(--_ctm-dn-rq-ss-tt-tm);
                  word-wrap: prepareMediaVariable(--_ctm-dn-rq-ss-wd-wp);
                  word-break: prepareMediaVariable(--_ctm-dn-rq-ss-wd-bk);
                  font-size: prepareMediaVariable(--_ctm-dn-rq-ss-ft-se);
                  color: prepareMediaVariable(--_ctm-dn-rq-ss-cr);
                  font-weight: prepareMediaVariable(--_ctm-dn-rq-ss-ft-wt);
                  font-style: prepareMediaVariable(--_ctm-dn-rq-ss-ft-se-ic);
                  text-decoration: prepareMediaVariable(--_ctm-dn-rq-ss-ue);
                  text-align: prepareMediaVariable(--_ctm-dn-rq-ss-tt-an);
                  letter-spacing: prepareMediaVariable(--_ctm-dn-rq-ss-lr-sg);
                  line-height: prepareMediaVariable(--_ctm-dn-rq-ss-le-ht);
                }
              }

              .rfq_updated_date {
                flex: 1 0 0;
                // color: var(--_gray-700);
                // font-size: 12px;
                // font-weight: 400;
                // line-height: 18px;

                font-family: prepareMediaVariable(--_ctm-dn-rd-on-ft-fy);
                text-transform: prepareMediaVariable(--_ctm-dn-rd-on-tt-tm);
                word-wrap: prepareMediaVariable(--_ctm-dn-rd-on-wd-wp);
                word-break: prepareMediaVariable(--_ctm-dn-rd-on-wd-bk);
                font-size: prepareMediaVariable(--_ctm-dn-rd-on-ft-se);
                color: prepareMediaVariable(--_ctm-dn-rd-on-cr);
                font-weight: prepareMediaVariable(--_ctm-dn-rd-on-ft-wt);
                font-style: prepareMediaVariable(--_ctm-dn-rd-on-ft-se-ic);
                text-decoration: prepareMediaVariable(--_ctm-dn-rd-on-ue);
                text-align: prepareMediaVariable(--_ctm-dn-rd-on-tt-an);
                letter-spacing: prepareMediaVariable(--_ctm-dn-rd-on-lr-sg);
                line-height: prepareMediaVariable(--_ctm-dn-rd-on-le-ht);
                background-color: prepareMediaVariable(--_ctm-dn-rd-on-bd-cr);
                border-width: prepareMediaVariable(--_ctm-dn-rd-on-br-wh);
                border-color: prepareMediaVariable(--_ctm-dn-rd-on-br-cr);
                border-style: prepareMediaVariable(--_ctm-dn-rd-on-br-se);
                border-radius: prepareMediaVariable(--_ctm-dn-rd-on-br-rs);
                box-shadow: prepareMediaVariable(--_ctm-dn-rd-on-sw-ae)
                  prepareMediaVariable(--_ctm-dn-rd-on-sw-br)
                  prepareMediaVariable(--_ctm-dn-rd-on-sw-sd)
                  prepareMediaVariable(--_ctm-dn-rd-on-sw-cr);
              }

              .rfqs_amount {
                // color: var(--_gray-900);
                // text-align: right;
                // font-size: 14px;
                // font-weight: 600;
                // line-height: 20px;

                font-family: prepareMediaVariable(--_ctm-dn-rq-id-ft-fy);
                text-transform: prepareMediaVariable(--_ctm-dn-rq-id-tt-tm);
                word-wrap: prepareMediaVariable(--_ctm-dn-rq-id-wd-wp);
                word-break: prepareMediaVariable(--_ctm-dn-rq-id-wd-bk);
                font-size: prepareMediaVariable(--_ctm-dn-rq-id-ft-se);
                color: prepareMediaVariable(--_ctm-dn-rq-id-cr);
                font-weight: prepareMediaVariable(--_ctm-dn-rq-id-ft-wt);
                font-style: prepareMediaVariable(--_ctm-dn-rq-id-ft-se-ic);
                text-decoration: prepareMediaVariable(--_ctm-dn-rq-id-ue);
                text-align: prepareMediaVariable(--_ctm-dn-rq-id-tt-an);
                letter-spacing: prepareMediaVariable(--_ctm-dn-rq-id-lr-sg);
                line-height: prepareMediaVariable(--_ctm-dn-rq-id-le-ht);
                background-color: prepareMediaVariable(--_ctm-dn-rq-id-bd-cr);
                border-width: prepareMediaVariable(--_ctm-dn-rq-id-br-wh);
                border-color: prepareMediaVariable(--_ctm-dn-rq-id-br-cr);
                border-style: prepareMediaVariable(--_ctm-dn-rq-id-br-se);
                border-radius: prepareMediaVariable(--_ctm-dn-rq-id-br-rs);
                box-shadow: prepareMediaVariable(--_ctm-dn-rq-id-sw-ae)
                  prepareMediaVariable(--_ctm-dn-rq-id-sw-br)
                  prepareMediaVariable(--_ctm-dn-rq-id-sw-sd)
                  prepareMediaVariable(--_ctm-dn-rq-id-sw-cr);
              }
            }
            .rfq_action {
              display: flex;
              align-items: center;
              gap: 16px;
              flex: 1 0 0;
              align-self: stretch;
              font-size: 14px;
              .rfq_send span svg {
                path {
                  stroke: var(
                    --_ctm-mob-dn-in-as-sd-me-in-in-cr,
                    var(--_ctm-tab-dn-in-as-sd-me-in-in-cr, var(--_ctm-dn-in-as-sd-me-in-in-cr))
                  );
                  // Overrides the stroke-width presentation attribute baked into the icon markup.
                  stroke-width: prepareMediaVariable(--_ctm-dn-in-as-sd-me-in-se-wh, 1.25);
                }

                width: var(
                  --_ctm-mob-dn-in-as-sd-me-in-in-se,
                  var(--_ctm-tab-dn-in-as-sd-me-in-in-se, var(--_ctm-dn-in-as-sd-me-in-in-se))
                );
                height: var(
                  --_ctm-mob-dn-in-as-sd-me-in-in-se,
                  var(--_ctm-tab-dn-in-as-sd-me-in-in-se, var(--_ctm-dn-in-as-sd-me-in-in-se))
                );
              }
              .rfq_download span svg {
                path {
                  stroke: var(
                    --_ctm-mob-dn-in-as-dd-in-in-cr,
                    var(--_ctm-tab-dn-in-as-dd-in-in-cr, var(--_ctm-dn-in-as-dd-in-in-cr))
                  );
                  // Overrides the stroke-width presentation attribute baked into the icon markup.
                  stroke-width: prepareMediaVariable(--_ctm-dn-in-as-dd-in-se-wh, 1.25);
                }

                width: var(
                  --_ctm-mob-dn-in-as-dd-in-in-se,
                  var(--_ctm-tab-dn-in-as-dd-in-in-se, var(--_ctm-dn-in-as-dd-in-in-se))
                );
                height: var(
                  --_ctm-mob-dn-in-as-dd-in-in-se,
                  var(--_ctm-tab-dn-in-as-dd-in-in-se, var(--_ctm-dn-in-as-dd-in-in-se))
                );
              }
              .rfq_print span svg {
                path {
                  stroke: var(
                    --_ctm-mob-dn-in-as-pt-in-in-cr,
                    var(--_ctm-tab-dn-in-as-pt-in-in-cr, var(--_ctm-dn-in-as-pt-in-in-cr))
                  );
                  // Overrides the stroke-width presentation attribute baked into the icon markup.
                  stroke-width: prepareMediaVariable(--_ctm-dn-in-as-pt-in-se-wh, 1.25);
                }

                width: var(
                  --_ctm-mob-dn-in-as-pt-in-in-se,
                  var(--_ctm-tab-dn-in-as-pt-in-in-se, var(--_ctm-dn-in-as-pt-in-in-se))
                );
                height: var(
                  --_ctm-mob-dn-in-as-pt-in-in-se,
                  var(--_ctm-tab-dn-in-as-pt-in-in-se, var(--_ctm-dn-in-as-pt-in-in-se))
                );
              }
              .rfq_view span svg {
                path {
                  stroke: var(
                    --_ctm-mob-dn-in-as-vw-in-in-cr,
                    var(--_ctm-tab-dn-in-as-vw-in-in-cr, var(--_ctm-dn-in-as-vw-in-in-cr))
                  );
                  // Overrides the stroke-width presentation attribute baked into the icon markup.
                  stroke-width: prepareMediaVariable(--_ctm-dn-in-as-vw-in-se-wh, 1.25);
                }

                width: var(
                  --_ctm-mob-dn-in-as-vw-in-in-se,
                  var(--_ctm-tab-dn-in-as-vw-in-in-se, var(--_ctm-dn-in-as-vw-in-in-se))
                );
                height: var(
                  --_ctm-mob-dn-in-as-vw-in-in-se,
                  var(--_ctm-tab-dn-in-as-vw-in-in-se, var(--_ctm-dn-in-as-vw-in-in-se))
                );
              }
              .rfq_cancel span svg {
                path {
                  stroke: var(
                    --_ctm-mob-dn-in-as-cl-in-in-cr,
                    var(--_ctm-tab-dn-in-as-cl-in-in-cr, var(--_ctm-dn-in-as-cl-in-in-cr))
                  );
                  // Overrides the stroke-width presentation attribute baked into the icon markup.
                  stroke-width: prepareMediaVariable(--_ctm-dn-in-as-cl-in-se-wh, 1.25);
                }

                width: var(
                  --_ctm-mob-dn-in-as-cl-in-in-se,
                  var(--_ctm-tab-dn-in-as-cl-in-in-se, var(--_ctm-dn-in-as-cl-in-in-se))
                );
                height: var(
                  --_ctm-mob-dn-in-as-cl-in-in-se,
                  var(--_ctm-tab-dn-in-as-cl-in-in-se, var(--_ctm-dn-in-as-cl-in-in-se))
                );
              }
            }
          }
        }
      }
    }

    .embla {
      width: 100%;
      height: auto;
      position: relative;
      display: flex;
      flex-direction: column;
      // overflow: hidden;

      .embla__viewport {
        width: 100%;
        height: 100%;
        position: relative;
        display: flex;
        flex-direction: column;

        overflow: hidden;

        .embla__container {
          width: 100%;
          height: 100%;
          display: grid;
          grid-template-rows: 100%;

          grid-template-columns: repeat(
            var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se))),
            calc(
              100% /
                var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
            )
          );

          grid-auto-flow: column;
          gap: var(--_ctm-mob-lt-sg-bn-is, var(--_ctm-tab-lt-sg-bn-is, var(--_ctm-lt-sg-bn-is)));

          &[data-control-type="Bottom"][data-slider-control="Arrows"] {
            height: calc(100% - calc(prepareMediaVariable(--_ctm-dn-pn-as-aw-se) + 10px));
          }

          &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
            height: calc(
              100% - calc(
                  var(
                      --_ctm-mob-dn-pn-le-le-ht,
                      var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
                    ) +
                    20px
                )
            );
          }

          &[data-control-type="Bottom"][data-slider-control="Dots"] {
            height: calc(
              100% - calc(
                  var(
                      --_ctm-mob-dn-pn-ds-dt-se,
                      var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
                    ) +
                    20px
                )
            );
          }

          .embla__slide {
            width: 100%;
            height: 100%;
          }
        }
      }
      &:not([data-display-style="Column"]) {
        .embla__container {
          grid-auto-columns: calc(
            100% / var(--_ctm-mob-lt-is-pr-se, var(--_ctm-tab-lt-is-pr-se, var(--_ctm-lt-is-pr-se)))
          );
        }
      }

      &[data-display-style="Grid"][data-scroll-direction="Vertical"] {
        // overflow: unset;

        .embla__viewport {
          overflow: unset;
          height: 80%;
          flex-grow: 1;
          &:not([data-is-builder-type="true"]) {
            height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
          }

          .embla__container {
            overflow: unset;
            height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));
            // min-height: var(--_ctm-mob-height, var(--_ctm-tab-height, var(--_ctm-height)));

            grid-template-columns: repeat(var(--_ctm-lt-is-pr-rw), 1fr);
            grid-template-rows: unset;

            grid-auto-flow: row;

            &[data-overflow-hidden="true"] {
              overflow: hidden;
            }
          }
        }
      }

      &[data-display-style="Grid"][data-scroll-direction="Horizontal"] {
        .embla__viewport {
          .embla__container {
            grid-template-rows: repeat(
              var(--_ctm-mob-lt-is-pr-cn, var(--_ctm-tab-lt-is-pr-cn, var(--_ctm-lt-is-pr-cn))),
              calc(
                100% /
                  var(--_ctm-mob-lt-is-pr-cn, var(--_ctm-tab-lt-is-pr-cn, var(--_ctm-lt-is-pr-cn)))
              )
            );
          }
        }
      }

      &[data-display-style="Rows"] {
        // overflow: unset;

        .embla__viewport {
          overflow: unset;
          height: 80%;
          flex-grow: 1;

          &:not([data-is-builder-type="true"]) {
            height: var(--_ctm-height);
          }

          .embla__container {
            overflow: hidden;
            height: var(--_ctm-height);
            // min-height: var(--_ctm-height);

            grid-template-columns: repeat(
              var(--_ctm-mob-lt-is-pr-rw, var(--_ctm-tab-lt-is-pr-rw, var(--_ctm-lt-is-pr-rw))),
              1fr
            );
            grid-template-rows: unset;
            grid-auto-flow: row;
          }
        }
      }

      &[data-display-style="Column"] {
        // overflow: unset;

        .embla__viewport {
          .embla__container {
            display: flex;
            .embla__slide {
              width: unset;
              height: 100%;
              aspect-ratio: 1 / 2;
            }
          }
        }
      }

      .arrow-navigation {
        display: flex;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        justify-content: space-between;
        transform: translate(-50%, -50%);
        //   padding-left: 20px;
        &[data-control-type="Side"] {
          .left-button,
          .right-button {
            background-color: transparent;
          }
        }
        &[data-background-shape="Round"] {
          .left-button,
          .right-button {
            // background-color: #f2f5f5;
            background-color: prepareMediaVariable(--_ctm-dn-pn-as-bd-cr);
            box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
          }
        }
        &[data-control-type="Bottom-Overflow"] {
          transform: translateX(-50%);
          width: 100%;
          justify-content: center;
          gap: 12px;
          top: unset;
          bottom: 6px;
        }
        &[data-control-type="Bottom"] {
          transform: unset;
          position: static;
          width: 100%;
          justify-content: center;
          gap: 12px;
          margin-top: 10px;
        }
        &[data-control-type="Top"] {
          top: 0px;
          position: absolute;
          /* right: 0px; */
          justify-content: end;
          width: 170px;
          transform: unset;
          gap: 12px;
          margin-top: 10px;
        }
        .left-button {
          padding: 10px;
          border-radius: 50%;
          border: none;
          width: prepareMediaVariable(--_ctm-dn-pn-as-aw-se);
          height: prepareMediaVariable(--_ctm-dn-pn-as-aw-se);
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          outline: none;
          margin-left: 12px;
          &:disabled {
            & svg {
              path {
                stroke: rgb(192, 192, 192);
              }
            }
          }
        }
        .right-button {
          border-radius: 50%;
          border: none;
          width: prepareMediaVariable(--_ctm-dn-pn-as-aw-se);
          height: prepareMediaVariable(--_ctm-dn-pn-as-aw-se);

          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          outline: none;
          margin-right: 12px;
          padding: 10px;

          &:disabled {
            & svg {
              path {
                stroke: rgb(192, 192, 192);
              }
            }
          }
        }
        .icon {
          display: flex;

          svg {
            width: calc(prepareMediaVariable(--_ctm-dn-pn-as-aw-se) * 0.5);
            height: calc(prepareMediaVariable(--_ctm-dn-pn-as-aw-se) * 0.5);

            path {
              stroke: prepareMediaVariable(--_ctm-dn-pn-as-aw-cr);
            }
          }
        }
      }

      &[data-control-type="Side"] {
        .embla__viewport {
          width: calc(100% - 120px);
          margin-inline: auto;
        }
        .left-button {
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
        }
        .right-button {
          position: absolute;

          right: 0;
          top: 50%;
          transform: translateY(-50%);
        }
      }

      &[data-thumbnail-placement="top"] {
        flex-direction: column-reverse;
      }
      &[data-thumbnail-placement="bottom"] {
        flex-direction: column;
      }
      &[data-thumbnail-placement="left"] {
        flex-direction: row-reverse;

        .embla__thumbs {
          width: var(--_ctm-lt-tl-se);
          height: 100%;

          & .embla__thumbs__container {
            flex-direction: column;
            height: 100%;
          }
        }
      }
      &[data-thumbnail-placement="right"] {
        flex-direction: row;
        .embla__thumbs {
          width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));

          height: 100%;

          & .embla__thumbs__container {
            flex-direction: column;
            height: 100%;
          }
        }
      }
      .embla__dots {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        margin-right: calc((2.6rem - 1.4rem) / 2 * -1);
        gap: 6px;

        &[data-control-type="Bottom-Overflow"] {
          position: absolute;
          bottom: 10px;
          left: 50%;
          transform: translateX(-50%);
          width: 75%;
        }
        .embla__dot {
          -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
          -webkit-appearance: none;
          appearance: none;
          background-color: var(
            --_ctm-mob-dn-pn-ds-or-dt-cr,
            var(--_ctm-tab-dn-pn-ds-or-dt-cr, var(--_ctm-dn-pn-ds-or-dt-cr))
          );

          touch-action: manipulation;
          display: inline-flex;
          text-decoration: none;
          cursor: pointer;
          border: 0;
          padding: 0;
          margin: 0;
          // width: 0.6rem;
          // height: 0.6rem;
          width: var(
            --_ctm-mob-dn-pn-ds-dt-se,
            var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
          );
          height: var(
            --_ctm-mob-dn-pn-ds-dt-se,
            var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
          );

          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
        }
        .embla__dot:after {
          // box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
          width: var(
            --_ctm-mob-dn-pn-ds-dt-se,
            var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
          );
          height: var(
            --_ctm-mob-dn-pn-ds-dt-se,
            var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
          );

          border-radius: 50%;
          display: flex;
          align-items: center;
          content: "";
        }
        .embla__dot--selected:after {
          box-shadow: inset 0 0 0 1px var(--text-body);
          background-color: var(
            --_ctm-mob-dn-pn-ds-ct-dt-cr,
            var(--_ctm-tab-dn-pn-ds-ct-dt-cr, var(--_ctm-dn-pn-ds-ct-dt-cr))
          );
        }
        &[data-slider-control="Pagination Line"] {
          .embla__dot {
            width: var(
              --_ctm-mob-dn-pn-le-le-wh,
              var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
            );
            height: var(
              --_ctm-mob-dn-pn-le-le-ht,
              var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
            );
            background-color: var(
              --_ctm-mob-dn-pn-le-or-le-cr,
              var(--_ctm-tab-dn-pn-le-or-le-cr, var(--_ctm-dn-pn-le-or-le-cr))
            );
            border-radius: 6px;
          }

          .embla__dot--selected:after {
            box-shadow: inset 0 0 0 1px var(--text-body);
            border-radius: 6px;
            width: var(
              --_ctm-mob-dn-pn-le-le-wh,
              var(--_ctm-tab-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh))
            );
            height: var(
              --_ctm-mob-dn-pn-le-le-ht,
              var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
            );
            background-color: var(
              --_ctm-mob-dn-pn-le-ct-le-cr,
              var(--_ctm-tab-dn-pn-le-ct-le-cr, var(--_ctm-dn-pn-le-ct-le-cr))
            );
          }
        }
      }

      .embla__thumbs {
        width: 100%;
        height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));

        position: relative;
        display: grid;
        grid-template-columns: 1fr;
        overflow: hidden;
        // margin: 10px;
        padding: 10px;

        .embla__thumbs__viewport {
          width: 100%;
          height: 100%;
          position: relative;
          display: flex;
          flex-direction: column;

          overflow: hidden;
        }
        .embla__thumbs__container {
          display: flex;
          flex-direction: row;
          margin-left: calc(var(--thumbs-slide-spacing) * -1);
          gap: var(--_ctm-mob-lt-tl-sg, var(--_ctm-tab-lt-tl-sg, var(--_ctm-lt-tl-sg)));

          width: 100%;
          // justify-content: center;
          // height: 200px;

          .embla__thumbs__slide {
            min-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
            max-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
            height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));

            & img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }
}