@use "sass:map";
@use "sass:list";
@use "./repeater-embla-controls.scss" as *;
@use "./functions.scss" as *;
$dataShowShadow: "[data-sw-sw='true']";
$dataShowBorder: "[data-sw-br='true']";

[data-div-type="element"] {
  &[data-element-type="kits"] {
    width: var(--_sf-el-wh-st-mx, calc(1% * #{prepareMediaVariable(--_ctm-ele-nw-wh-vl, 100)}));

    &[data-cms-element-resizer="true"] {
      --_sf-img-dwdth: 100%;
    }

    --_sf-ic-sz-nn: #{prepareMediaVariable(--_ctm-lt-aw-in-se, 40px)};
    --_sf-ed-vl-sz: #{prepareMediaVariable(--_ctm-lt-dt-se, 10px)};
    --_sf-sl-ct-ic-dt-at-cl: #{prepareMediaVariable(--_ctm-lt-cl-ae-cr)};

    & > .wrapper {
      min-height: prepareMediaVariable(--_ctm-lt-mn-ht, 0px);
      background-color: prepareMediaVariable(--_ctm-dn-wt-se-bd-cr);
      border-radius: prepareMediaVariable(--_ctm-dn-wt-se-br-rs);
      &#{$dataShowBorder} {
        border-color: prepareMediaVariable(--_ctm-dn-wt-se-br-cr);
        border-style: prepareMediaVariable(--_ctm-dn-wt-se-br-se);
        border-width: prepareMediaVariable(--_ctm-dn-wt-se-br-wh);
      }
      &#{$dataShowShadow} {
        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)};
      }

      padding: prepareMediaVariable(--_ctm-lt-pg);

      @for $i from 1 through 3 {
        &:is([data-control-type="#{$i}"]) {
          @if ($i == 3) {
            overflow-y: visible;
          }
          @include CMSRepeaterEmblaControlStyles($i);
        }
      }

      .btn__with__text {
        background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-bd-cr));

        padding: prepareMediaVariable(--_ctm-lt-bn-pg);
        display: flex;
        flex-direction: var(--_sf-fd-bn);
        align-items: center;

        justify-content: prepareMediaVariable(--_ctm-lt-at);
        gap: prepareMediaVariable(--_ctm-lt-gp);

        width: prepareMediaVariable(--_ctm-lt-bn-wh, 100%);
        height: prepareMediaVariable(--_ctm-lt-bn-ht, 50px);

        border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-br-rs));

        box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-sw-ae))
          var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-sw-br))
          var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-sw-sd))
          var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-sw-cr));

        &[data-show-border="true"] {
          border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-br-cr));

          border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-br-se));

          border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-br-wh));
        }

        &[data-show-shadow="false"] {
          --_show-shadow: none;
        }
        &[data-icon-position="left"] {
          --_sf-fd-bn: row;
        }
        &[data-icon-position="right"] {
          --_sf-fd-bn: row-reverse;
        }
        &[data-icon-position="center"] {
          --_sf-fd-bn: row;
        }

        &:hover {
          --_sf-vw-hr-kt-pg: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-pg)};
          --_sf-hr-bd-cr: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-bd-cr)};
          --_sf-hr-br-cr: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-br-cr)};
          --_sf-hr-br-se: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-br-se)};
          --_sf-hr-br-wh: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-br-wh)};
          --_sf-hr-br-rs: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-br-rs)};

          // for shadow
          --_sf-hr-sw-ae: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-sw-ae)};
          --_sf-hr-sw-br: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-sw-br)};

          --_sf-hr-sw-cr: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-sw-cr)};

          // for font

          --_sf-hr-cr: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-cr)};
          --_sf-hr-ft-fy: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-ft-fy)};
          --_sf-hr-ft-se: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-ft-se)};
          --_sf-hr-ft-wt: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-ft-wt)};
          --_sf-hr-ft-se-ic: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-ft-se-ic)};
          --_sf-hr-tt-an: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-tt-an)};
          --_sf-hr-lr-sg: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-lr-sg)};
          --_sf-hr-le-ht: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-le-ht)};

          --_sf-hr-txt-tr: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-tt-tm)};
          --_sf-hr-wd-wp: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-wd-wp)};
          --_sf-hr-wd-bk: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-wd-bk)};

          --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-in-se)};

          --_sf-hr-in-c1: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-in-c1)};
          --_sf-hr-ue: #{prepareMediaVariable(--_ctm-dn-vw-kt-se-hr-se-ue)};

          &[data-hover-show-shadow="false"] {
            --_hover-show-shadow: none;
          }
          &[data-hover-show-icon="false"] {
            --_hover-show-icon: none;
          }
        }
        &[data-show-icon="false"] {
          --_show-icon: none;
        }
        &[data-element-style="Icon"] {
          &[data-icon-position="left"] {
            --_sf-jc: start;
          }
          &[data-icon-position="right"] {
            --_sf-jc: end;
          }
          &[data-icon-position="center"] {
            --_sf-jc: center;
          }
        }

        .txt {
          display: flex;

          color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-cr));

          font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-ft-fy));
          &.flex__overflow {
            white-space: normal;
            @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
          }

          font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-ft-se));

          font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-ft-wt));

          font-style: var(
            --_sf-hr-ft-se-ic,
            prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-ft-se-ic)
          );

          text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-tt-an));

          letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-lr-sg));

          line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-le-ht));

          text-transform: var(
            --_sf-hr-txt-tr,
            prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-tt-tm, normal)
          );
          word-break: var(--_sf-hr-txt-wd-bk, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-wd-bk));
          word-wrap: var(--_sf-hr-txt-wd-bk, prepareMediaVariable(--_ctm-dn-tt-dt-se-wd-wp));

          text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-ue));
          // text-decoration: var(--_ctm-mob-dn-ue, var(--_ctm-tab-dn-ue, var(--_ctm-dn-ue)));
        }

        .icon {
          display: var(--_hover-show-icon, var(--_show-icon, flex));
          svg {
            width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-in-se));
            height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-in-se));

            path {
              stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-in-c1));
              // Overrides the stroke-width presentation attribute baked into the icon markup.
              stroke-width: prepareMediaVariable(--_ctm-dn-vw-kt-se-dt-se-se-wh, 1.25);
            }
          }
        }
        [data-element-style="Text"] {
          display: inline-block;
          width: 100%;
        }

        .icon--hover {
          // position: absolute;
          // inset: 0;
          // opacity: 0;
          display: none;
          transition: opacity 0.2s ease;
        }

        &:hover .icon--hover {
          // opacity: 1;
          display: flex;
        }

        &:hover .icon--default {
          // opacity: 0;
          display: none;
        }
      }
    }
  }
}

/**
 * Kits element layout styles.
 * NOTE: temporary location — move into the actual stylesheet path later.
 *
 * Both display types (slider + grid) are built on embla carousel.
 *  - Slider view: each embla slide = one product card. `--kit-spv` controls how
 *    many cards are visible per view, `--kit-gap` the gap between them.
 *  - Grid view: each embla slide = a page of items laid out in a CSS grid.
 *    `--kit-cols` controls the columns per row, items per page is chunked in JS
 *    (`itemsPerSlide`), so after N items a new embla slide begins.
 */

$kit-gap: #{prepareMediaVariable(--_ctm-lt-se-gp, 16px)};
$grid-gap: #{prepareMediaVariable(--_ctm-lt-im-gp, 16px)};
$kit-spv: #{prepareMediaVariable(--_ctm-lt-ss-pr-vw, 3)};
$kit-cols: #{prepareMediaVariable(--_ctm-lt-gd-cs, 2)};

.kit__v2 {
  // embla viewport
  &.embla {
    overflow: hidden;
    width: 100%;
  }

  .embla__container {
    display: flex;
    gap: $kit-gap;
  }

  .embla__slide {
    min-width: 0; // allow flex items to shrink below content size
    width: 100%;
  }

  // ---- Product card (shared by slider + grid) ----
  &__card,
  &__grid-item {
    display: flex;
    flex-direction: column;
  }

  // wrapper the ResizeObserver measures (its width == the card/grid-item width)
  &__img-wrap {
    width: 100%;
    line-height: 0;
  }

  &__img {
    display: block;
    width: 100%;
    height: prepareMediaVariable(--_ctm-lt-ie-ht, 100px);
    object-fit: cover;
  }

  &__title {
    display: block;
    margin-top: 8px;
  }
}

// ---- Slider view: N cards per view ----
.kit--slider {
  .embla__slide {
    // width of one card accounting for the gaps between the visible cards
    flex: 0 0 calc((100% - (#{$kit-gap} * (#{$kit-spv} - 1))) / #{$kit-spv});
  }
}

.embla__slide.kit__slide--grid {
  flex: 0 0 calc((100% - (#{$kit-gap} * (#{$kit-spv} - 1))) / #{$kit-spv});
}

// ---- Grid view: one page (grid) per embla slide ----
.kit--grid {
  .embla__slide--grid {
    flex: 0 0 100%; // one page fills the viewport
  }

  .kit__grid {
    display: grid;
    grid-template-columns: repeat(#{$kit-cols}, minmax(0, 1fr));
    gap: $grid-gap;
  }
}