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

$item: "flex__icon_list_item";
$icon: "flex__ili_span_icn";
$text: "flex__ili_span_txt";
$textContaner: "flex__ili__container";
$desc: "flex__ili__description";
$overflowSelector: ".flex__overflow";
$pos2: (
  hrz: (keys: (0: inline,
      after: (top: 0,
        right: 0,
        height: prepareMediaVariable(--_ctm-dn-lt-dr-wh),
        width: prepareMediaVariable(--_ctm-dn-lt-dr-wt),
      ),
    ),
    after: (start: (top: 0px,
      ),
      center: (top: 50%,
        transform: translateY(-50%),
      ),
      end: (top: auto,
        bottom: 0,
      ),
    ),
  ),
  vtl: (keys: (0: block,
      after: (bottom: 0,
        left: 0,
        width: prepareMediaVariable(--_ctm-dn-lt-dr-wh),
        height: prepareMediaVariable(--_ctm-dn-lt-dr-wt),
      ),
    ),
    after: (start: (left: 0px,
      ),
      center: (left: 50%,
        transform: translateX(-50%),
      ),
      end: (left: auto,
        right: 0,
      ),
    ),
  ),
);

[data-div-type="element"] {
  &[data-element-type="icon-list"] {
    &>.wrapper {
      width: 100%;
      // gap: prepareMediaVariable(--_ctm-lt-im-gp);
      row-gap: prepareMediaVariable(--_ctm-lt-rw-gp, 0px);
      column-gap: prepareMediaVariable(--_ctm-lt-cn-gp, 0px);
      padding: prepareMediaVariable(--_ctm-lt-pg, 0px);
      display: var(--_d-flex) !important;

      &.hrz {
        flex-direction: row;
        // justify-content: space-between;
        align-items: prepareMediaVariable(--_ctm-lt-an-is);
        justify-content: prepareMediaVariable(--_ctm-lt-jy-ct);
        flex-wrap: prepareMediaVariable(--_ctm-lt-fx-wp);
        --_ctm-custom-lt-im-gp: #{prepareMediaVariable(--_ctm-lt-cn-gp, 0px)};
      }

      &.vtl {
        flex-direction: column;
        justify-content: prepareMediaVariable(--_ctm-lt-an-is);
        align-items: prepareMediaVariable(--_ctm-lt-jy-ct);
        --_ctm-custom-lt-im-gp: #{prepareMediaVariable(--_ctm-lt-rw-gp, 0px)};
      }

      &[data-show-border="true"] {
        border-color: prepareMediaVariable(--_ctm-dn-lt-br-cr);
        border-style: prepareMediaVariable(--_ctm-dn-lt-br-se);
        border-width: prepareMediaVariable(--_ctm-dn-lt-br-wh);
      }

      border-radius: prepareMediaVariable(--_ctm-dn-lt-br-rs);
      background-color: prepareMediaVariable(--_ctm-dn-lt-bd-cr);

      &[data-show-boxshadow="true"] {
        box-shadow: prepareMediaVariable(--_ctm-dn-lt-sw-ae) prepareMediaVariable(--_ctm-dn-lt-sw-br) prepareMediaVariable(--_ctm-dn-lt-sw-sd) prepareMediaVariable(--_ctm-dn-lt-sw-cr);
      }

      &[data-show-divider="true"] {
        &>.#{$item} {

          // &:not(:last-of-type)
          &:not(:last-child) {
            position: var(--_p-relative);

            @each $key, $value in $pos2 {
              $isVertical: $key ==vtl;
              $keys: map.get($value, keys);
              $afterKeys: map.get($keys, after);
              $afterPos: map.get($value, after);

              &:is(.#{$key} > *) {
                // padding-#{map.get($keys, 0)}-end: calc(
                //   #{prepareMediaVariable(--_ctm-lt-im-gp)} +
                //     #{prepareMediaVariable(--_ctm-dn-lt-dr-wt)}
                // );
                padding-#{map.get($keys, 0)}-end: calc(#{var(--_ctm-custom-lt-im-gp)} + #{prepareMediaVariable(--_ctm-dn-lt-dr-wt)});

                @each $k, $v in $afterKeys {
                  &::after {
                    #{$k}: #{$v};
                  }
                }

                @each $key1, $value1 in $afterPos {
                  &:is([data-show-pos1="#{$key1}"] > *) {
                    &::after {
                      @each $k, $v in $value1 {
                        #{$k}: #{$v};
                      }
                    }
                  }
                }
              }
            }

            &::after {
              content: "";
              position: var(--_p-absolute);
              background: prepareMediaVariable(--_ctm-dn-lt-dr-cr);
              border-radius: prepareMediaVariable(--_ctm-dn-lt-dr-br-rs);
            }
          }
        }
      }

      &>.#{$item} {
        display: var(--_d-flex);
        gap: var(--_in_hr-gp, prepareMediaVariable(--_ctm-dn-in-dt-se-in-gp, 0px));

        &:hover {
          --_in_hr-gp: #{prepareMediaVariable(--_ctm-dn-in-hr-se-in-gp, 0px)};
          --_in-hr-sz: #{prepareMediaVariable(--_ctm-dn-in-hr-se-in-se)};
          --_in-hr-as: #{prepareMediaVariable(--_ctm-dn-in-hr-se-vl-at)};
          --_in-hr-cr: #{prepareMediaVariable(--_ctm-dn-in-hr-se-in-c1)};

          --_txt-ht-ff: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-ft-fy)};
          --_txt-ht-fs: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-ft-se)};
          --_txt-ht-cr: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-cr)};
          --_txt-ht-fw: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-ft-wt)};
          --_txt-ht-td: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-ue)};
          --_txt-ht-fst: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-ft-se-ic)};
          --_txt-ht-tl: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-tt-an)};
          --_txt-ht-ls: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-lr-sg)};
          --_txt-ht-lt: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-le-ht)};
          --_txt-ht-tt-tm: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-tt-tm)};
          --_txt-ht-wd-wp: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-wd-wp)};
          --_txt-ht-wd-bk: #{prepareMediaVariable(--_ctm-dn-tt-hr-se-wd-bk)};
        }

        &>span {
          &.#{$icon} {
            display: var(--_d-flex);
            align-self: var(--_in-hr-as, prepareMediaVariable(--_ctm-dn-in-dt-se-vl-at));

            &>svg {
              width: var(--_in-hr-sz, prepareMediaVariable(--_ctm-dn-in-dt-se-in-se));
              height: var(--_in-hr-sz, prepareMediaVariable(--_ctm-dn-in-dt-se-in-se));

              path {
                stroke: var(--_in-hr-cr, prepareMediaVariable(--_ctm-dn-in-dt-se-in-c1));
                // Overrides the stroke-width presentation attribute baked into the icon markup.
                stroke-width: prepareMediaVariable(--_ctm-dn-in-dt-se-se-wh, 1.25);
              }
            }
          }
        }

        &>div {
          &.#{$textContaner} {
            display: var(--_d-flex);
            flex-grow: 1;
            flex-direction: column;
            align-self: prepareMediaVariable(--_ctm-dn-tt-cr-vl-at);
            padding: prepareMediaVariable(--_ctm-dn-tt-cr-pg);
            row-gap: prepareMediaVariable(--_ctm-dn-tt-cr-im-gp, 0px);

            &[data-show-divider="true"] {
              // margin-inline-start: calc(
              //   #{prepareMediaVariable(--_ctm-dn-lt-lt-gp)} +
              //     #{prepareMediaVariable(--_ctm-dn-lt-dr-wt)}
              // );
              margin-inline-start: calc(var(--_in_hr-gp, prepareMediaVariable(--_ctm-dn-in-dt-se-in-gp, 0px)) + var(--_ctm-mob-dn-tt-cr-dr-wt,
                    var(--_ctm-tab-dn-tt-cr-dr-wt, var(--_ctm-dn-tt-cr-dr-wt, inherit))));
              position: relative;

              @each $key, $value in map.get(map.get($pos2, hrz), after) {
                &[data-divider-pos="#{$key}"] {
                  &::before {
                    @each $key1, $value1 in $value {
                      #{$key1}: #{$value1};
                    }
                  }
                }
              }

              &::before {
                content: "";
                background: prepareMediaVariable(--_ctm-dn-tt-cr-dr-cr);
                position: absolute;
                // left: calc(
                //   -1 *
                //     calc(
                //       #{prepareMediaVariable(--_ctm-dn-lt-lt-gp)} +
                //         #{prepareMediaVariable(--_ctm-dn-lt-dr-wt)}
                //     )
                // );
                left: calc(calc(-1 * var(--_ctm-mob-dn-tt-cr-dr-wt,
                        var(--_ctm-tab-dn-tt-cr-dr-wt, var(--_ctm-dn-tt-cr-dr-wt, inherit)))) - var(--_in_hr-gp, prepareMediaVariable(--_ctm-dn-in-dt-se-in-gp, 0px)));
                width: prepareMediaVariable(--_ctm-dn-tt-cr-dr-wt);
                height: prepareMediaVariable(--_ctm-dn-tt-cr-dr-wh);
                border-radius: prepareMediaVariable(--_ctm-dn-tt-cr-dr-br-rs);
              }
            }

            &>.#{$text} {

              &,
              * {
                font-family: var(--_txt-ht-ff, prepareMediaVariable(--_ctm-dn-tt-dt-se-ft-fy));
                font-size: var(--_txt-ht-fs, prepareMediaVariable(--_ctm-dn-tt-dt-se-ft-se));
                color: var(--_txt-ht-cr, prepareMediaVariable(--_ctm-dn-tt-dt-se-cr));
                font-weight: var(--_txt-ht-fw, prepareMediaVariable(--_ctm-dn-tt-dt-se-ft-wt));
                text-decoration: var(--_txt-ht-td, prepareMediaVariable(--_ctm-dn-tt-dt-se-ue));
                font-style: var(--_txt-ht-fst, prepareMediaVariable(--_ctm-dn-tt-dt-se-ft-se-ic));
                text-align: var(--_txt-ht-tl, prepareMediaVariable(--_ctm-dn-tt-dt-se-tt-an));
                letter-spacing: var(--_txt-ht-ls, prepareMediaVariable(--_ctm-dn-tt-dt-se-lr-sg));
                line-height: var(--_txt-ht-lt, prepareMediaVariable(--_ctm-dn-tt-dt-se-le-ht));
                text-transform: var(--_txt-ht-tt-tm,
                    prepareMediaVariable(--_ctm-dn-tt-dt-se-tt-tm));
                word-wrap: var(--_txt-ht-wd-wp, prepareMediaVariable(--_ctm-dn-tt-dt-se-wd-wp));
                word-break: var(--_txt-ht-wd-bk, prepareMediaVariable(--_ctm-dn-tt-dt-se-wd-bk));
              }

              &#{$overflowSelector} {
                @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
              }
            }

            &>.#{$desc} {

              &,
              * {
                font-family: prepareMediaVariable(--_ctm-dn-dn-ft-fy);
                text-transform: prepareMediaVariable(--_ctm-dn-dn-tt-tm);
                word-wrap: prepareMediaVariable(--_ctm-dn-dn-wd-wp);
                word-break: prepareMediaVariable(--_ctm-dn-dn-wd-bk);
                font-size: prepareMediaVariable(--_ctm-dn-dn-ft-se);
                color: prepareMediaVariable(--_ctm-dn-dn-cr);
                font-weight: prepareMediaVariable(--_ctm-dn-dn-ft-wt);
                text-decoration: prepareMediaVariable(--_ctm-dn-dn-ue);
                font-style: prepareMediaVariable(--_ctm-dn-dn-ft-se-ic);
                text-align: #{prepareMediaVariable(--_ctm-dn-dn-tt-an)};
                letter-spacing: #{prepareMediaVariable(--_ctm-dn-dn-lr-sg)};
                line-height: #{prepareMediaVariable(--_ctm-dn-dn-le-ht)};
                text-transform: #{prepareMediaVariable(--_ctm-dn-dn-tt-tm)};
                word-wrap: #{prepareMediaVariable(--_ctm-dn-dn-wd-wp)};
                word-break: #{prepareMediaVariable(--_ctm-dn-dn-wd-bk)};
              }

              &#{$overflowSelector} {
                @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
              }
            }

            a {
              color: inherit;
              text-decoration: none;
            }
          }
        }
      }
    }
  }
}