@use "sass:map";
@use "sass:list";
@use "./functions.scss" as *;
$subMenuContainer: ".flex__submenu__container";
$nodatap: ".no__menu_item__p";
$subMenuItem: ".flex__sub__menu__item";
$subMenuItemText: ".flex__sub__menu__item__text";

[data-div-type="element"] {
  &[data-element-type="simple-list"] {
    width: calc(1% * #{prepareMediaVariable(--_ctm-ele-nw-wh-vl)});
    margin: prepareMediaVariable(--_ctm-lt-mn);

    & > .wrapper {
      width: 100%;

      & > #{$subMenuContainer} {
        padding: #{prepareMediaVariable(--_ctm-lt-pg, 0px)};
        min-height: prepareMediaVariable(--_ctm-lt-mn-ht);
        background: prepareMediaVariable(--_ctm-dn-sb-mu-cr-bd-cr);
        border-radius: prepareMediaVariable(--_ctm-dn-sb-mu-cr-br-rs);
        width: 100%;
        display: var(--_d-flex);
        flex-direction: column;
        gap: prepareMediaVariable(--_ctm-lt-im-gp);
        align-items: prepareMediaVariable(--_ctm-lt-jy-ct);

        // &:is(#{$hrz} *) {
        //   position: absolute;
        //   left: calc(50% + #{prepareMediaVariable(--_ctm-dn-sb-mu-cr-cr-ot-x)});
        //   width: calc(100% + #{prepareMediaVariable(--_ctm-dn-sb-mu-cr-cr-wh)});
        //   top: calc(100% + #{prepareMediaVariable(--_ctm-dn-sb-mu-cr-cr-ot-y)});
        //   transform: translateX(-50%);
        //   z-index: 2;
        // }
        // &:is(#{$vtl} *) {
        //   width: 100%;
        // }

        // max-height: 0px;
        // overflow: clip;
        // max-height: 500px;
        // overflow-y: auto;
        // animation: animTwo var(--_transition-duration)
        //   var(--_transition-timing-function) 1 forwards alternate;

        // @keyframes animTwo {
        //   100% {
        //     max-height: 500px;
        //     overflow-y: auto;
        //   }
        // }

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

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

        & > li {
          &#{$subMenuItem} {
            display: var(--_d-flex);
            flex-direction: column;
            width: 100%;
            padding: var(
              --_sf-sb-it-at-pd,
              var(--_sf-sb-it-hr-pd, #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-pg, 0px)})
            );
            background: var(
              --_sf-sb-it-at-bd,
              var(--_sf-sb-it-hr-bd, #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-bd-cr)})
            );
            border-radius: var(
              --_sf-sb-it-at-br,
              var(--_sf-sb-it-hr-br, #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-br-rs)})
            );

            &[data-show-border="true"] {
              border-color: var(
                --_sf-sb-it-at-brc,
                var(--_sf-sb-it-hr-brc, #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-br-cr)})
              );
              border-width: var(
                --_sf-sb-it-at-bw,
                var(--_sf-sb-it-hr-bw, #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-br-wh)})
              );
              border-style: var(
                --_sf-sb-it-at-bs,
                var(--_sf-sb-it-hr-bs, prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-br-se))
              );
            }

            &[data-show-boxshadow="true"] {
              box-shadow: var(
                  --_sf-sb-it-at-bsa,
                  var(
                    --_sf-sb-it-hr-bsa,
                    #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-sw-ae)}
                  )
                )
                var(
                  --_sf-sb-it-at-blr,
                  var(
                    --_sf-sb-it-hr-blr,
                    #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-sw-br)}
                  )
                )
                var(
                  --_sf-sb-it-at-spr,
                  var(
                    --_sf-sb-it-hr-spr,
                    #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-sw-sd)}
                  )
                )
                var(
                  --_sf-sb-it-at-bscl,
                  var(--_sf-sb-it-hr-bscl, prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-sw-cr))
                );
            }

            &:hover {
              --_sf-sb-it-hr-pd: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-pg, 0px)};
              --_sf-sb-it-hr-bd: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-bd-cr)};
              --_sf-sb-it-hr-br: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-br-rs)};
              --_sf-sb-it-hr-brc: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-br-cr)};
              --_sf-sb-it-hr-bw: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-br-wh)};
              --_sf-sb-it-hr-bs: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-br-se)};
              --_sf-sb-it-hr-bsa: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-sw-ae)};
              --_sf-sb-it-hr-blr: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-sw-br)};
              --_sf-sb-it-hr-spr: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-sw-sd)};
              --_sf-sb-it-hr-bscl: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-sw-cr)};

              --_sf-sb-it-hr-ff: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-ft-fy)};
              --_sf-sb-it-hr-fs: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-ft-se)};
              --_sf-sb-it-hr-fclr: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-cr)};
              --_sf-sb-it-hr-fw: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-ft-wt)};

              --_sf-sb-it-hr-fsi: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-ft-se-ic)};
              --_sf-sb-it-hr-td: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-ue)};
              --_sf-sb-it-hr-tae: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-tt-an)};
              --_sf-sb-it-hr-ls: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-lr-sg)};
              --_sf-sb-it-hr-lh: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-le-ht)};

              // Per-item leading icon hover overrides.
              --_sf-sb-it-hr-isz-im: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-in-se-im)};
              --_sf-sb-it-hr-icr-im: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-hr-se-in-c1-im)};
            }

            &.active {
              --_sf-sb-it-at-pd: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-pg)};
              --_sf-sb-it-at-bd: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-bd-cr)};
              --_sf-sb-it-at-br: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-br-rs)};
              --_sf-sb-it-at-brc: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-br-cr)};
              --_sf-sb-it-at-bw: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-br-wh)};
              --_sf-sb-it-at-bs: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-br-se)};
              --_sf-sb-it-hr-bsa: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-sw-ae)};
              --_sf-sb-it-at-blr: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-sw-br)};
              --_sf-sb-it-at-spr: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-sw-sd)};
              --_sf-sb-it-at-bscl: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-sw-cr)};

              --_sf-sb-it-at-ff: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-ft-fy)};
              --_sf-sb-it-at-fs: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-ft-se)};
              --_sf-sb-it-at-fclr: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-cr)};
              --_sf-sb-it-at-fw: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-ft-wt)};
              --_sf-sb-it-at-fsi: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-ft-se-ic)};
              --_sf-sb-it-at-td: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-ue)};
              --_sf-sb-it-at-tae: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-tt-an)};
              --_sf-sb-it-at-ls: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-lr-sg)};
              --_sf-sb-it-at-lh: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-le-ht)};

              // Per-item leading icon selected-state overrides.
              --_sf-sb-it-at-isz-im: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-in-se-im)};
              --_sf-sb-it-at-icr-im: #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-sd-se-in-c1-im)};
            }

            & > a {
              display: var(--_d-flex);
              justify-content: space-between;
              align-items: center;
              width: 100%;

              & > span {
                display: var(--_d-flex);
                width: 100%;
                justify-content: var(
                  --_sf-sb-it-at-tae,
                  var(
                    --_sf-sb-it-hr-tae,
                    #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-tt-an)}
                  )
                );

                // Per-item leading glyph, styled from the list item scope's own
                // `Item` vars — the glyph itself is picked per item under Content.
                &.flex__sub__menu__item__leading__icon {
                  flex: 0 0 auto;
                  width: auto;
                  align-items: center;
                  margin-inline-end: prepareMediaVariable(
                    --_ctm-dn-sb-mu-im-se-dt-se-in-gp-im,
                    0px
                  );

                  svg {
                    width: var(
                      --_sf-sb-it-at-isz-im,
                      var(
                        --_sf-sb-it-hr-isz-im,
                        #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-in-se-im)}
                      )
                    );
                    height: var(
                      --_sf-sb-it-at-isz-im,
                      var(
                        --_sf-sb-it-hr-isz-im,
                        #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-in-se-im)}
                      )
                    );

                    path {
                      stroke: var(
                        --_sf-sb-it-at-icr-im,
                        var(
                          --_sf-sb-it-hr-icr-im,
                          #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-in-c1-im)}
                        )
                      );
                      stroke-width: prepareMediaVariable(
                        --_ctm-dn-sb-mu-im-se-dt-se-se-wh-im,
                        1.25
                      );
                    }
                  }
                }

                &#{$subMenuItemText} {
                  flex: 1 1 auto;
                  // Lets the clamp actually bind: a flex item defaults to
                  // min-width:auto and would grow past the row instead.
                  min-width: 0;

                  // Text Overflow: the renderer adds `.flex__overflow` and publishes
                  // the line count, so the clamp only applies once the toggle is on.
                  &.flex__overflow {
                    white-space: normal;
                    @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
                  }

                  font-family: var(
                    --_sf-it-at-ff,
                    var(--_sf-it-hr-ff, #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-ft-fy)})
                  );
                  text-transform: var(
                    --_sf-it-at-ff,
                    var(--_sf-it-hr-ff, #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-tt-tm)})
                  );
                  word-wrap: var(
                    --_sf-it-at-ff,
                    var(--_sf-it-hr-ff, #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-wd-wp)})
                  );
                  word-break: var(
                    --_sf-it-at-ff,
                    var(--_sf-it-hr-ff, #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-wd-bk)})
                  );
                  font-size: var(
                    --_sf-sb-it-at-fs,
                    var(
                      --_sf-sb-it-hr-fs,
                      #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-ft-se)}
                    )
                  );
                  color: var(
                    --_sf-sb-it-at-fclr,
                    var(
                      --_sf-sb-it-hr-fclr,
                      #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-cr)}
                    )
                  );
                  font-weight: var(
                    --_sf-sb-it-at-fw,
                    var(
                      --_sf-sb-it-hr-fw,
                      #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-ft-wt)}
                    )
                  );
                  font-style: var(
                    --_sf-sb-it-at-fsi,
                    var(
                      --_sf-sb-it-hr-fsi,
                      #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-ft-se-ic)}
                    )
                  );
                  text-decoration: var(
                    --_sf-sb-it-at-td,
                    var(--_sf-sb-it-hr-td, #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-ue)})
                  );
                  text-align: var(
                    --_sf-sb-it-at-tae,
                    var(
                      --_sf-sb-it-hr-tae,
                      #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-tt-an)}
                    )
                  );
                  letter-spacing: var(
                    --_sf-sb-it-at-ls,
                    var(
                      --_sf-sb-it-hr-ls,
                      #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-lr-sg)}
                    )
                  );
                  line-height: var(
                    --_sf-sb-it-at-lh,
                    var(
                      --_sf-sb-it-hr-lh,
                      #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-le-ht)}
                    )
                  );
                }
              }
            }
          }

          &#{$nodatap} {
            font-size: 14px;
            color: var(--_gray-500);
          }
        }
      }
    }
  }
}