@use "sass:map";
@use "sass:list";
@use "./functions.scss" as *;
$activeElementSelector: "[data-has-clicked='true']";
$es: '[data-div-type="element"]';
$mgc: '[data-element-type="mgContainer"]';
$smp: '[data-element-type="simple-list"]';
$wrapper: ".flex__menu__list__wrapper";
$menuItem: ".flex__menu__item";
$activeMg: '[data-show-mg="true"]';
// $subMenuContainer: ".flex__submenu__container";
// $subMenuItem: ".flex__sub__menu__item";
// $subMenuItemText: ".flex__sub__menu__item__text";
$nodatap: ".no__menu_item__p";
$hrz: "[data-element-type='mega-menu'] > .hrz";
$vtl: "[data-element-type='mega-menu'] > .vtl";
$hamburger: ".flex__menu__hamburger";
$hamburgerActive: "[data-hamburger-active='true']";
$wrapperData: (
  start: (
    left: prepareMediaVariable(--_ctm-meg-dn-hr-os-cr-ot-x, 0px),
  ),
  end: (
    right: prepareMediaVariable(--_ctm-meg-dn-hr-os-cr-ot-x, 0px),
  ),
  center: (
    left: calc(50% + #{prepareMediaVariable(--_ctm-meg-dn-hr-os-cr-ot-x, 0px)}),
    transform: translateX(-50%),
  ),
);

$defaultValues: (
  --_min-submenu-height: getListOfResponsive(650px, 400px, 550px),
);

@mixin hamburgerCSS() {
  position: relative;
  display: var(--_d-flex);
  justify-content: prepareMediaVariable(--_ctm-meg-dn-hr-os-vl-at);
  & > div {
    &#{$wrapper} {
      position: absolute;
      // left: var(--_sf-hm-mc-lt-vl-v2, 0px);
      //   width: 100%;
      // width: 100vw;
      top: calc(100% + prepareMediaVariable(--_ctm-meg-dn-hr-os-cr-ot-y, 0px));
      z-index: 2;
      visibility: hidden;
      opacity: 0;
      max-height: 0px;
      overflow: clip;
      display: var(--_d-flex);
      flex-direction: column;
      gap: prepareMediaVariable(--_ctm-meg-lt-im-gp);
      align-items: flex-start;

      @each $key, $val in $wrapperData {
        &[data-position="#{$key}"] {
          @each $k, $v in $val {
            #{$k}: #{$v};
          }
        }
      }

      &:is([data-hamburger-active="true"] > *) {
        // animation: animThree var(--_transition-duration) var(--_transition-timing-function) 1
        //   forwards alternate;
        visibility: visible;
        opacity: 1;
        width: prepareMediaVariable(--_ctm-meg-dn-hr-os-cr-wh, 100%);
        max-height: var(--_min-submenu-height, 650px);
        overflow-y: auto;
      }

      & > #{$menuItem} {
        width: 100%;
        align-items: flex-start;
        flex-direction: column;
        gap: #{prepareMediaVariable(--_ctm-meg-dn-sb-mu-cr-cr-ot-y)};
        // & > #{$subMenuContainer} {
        //   width: 100% !important;
        //   position: static !important;
        //   transform: none !important;
        // }

        & > #{$es} {
          position: var(--_p-relative) !important;
          width: 100% !important;
          left: 0 !important;
          top: 0 !important;

          &:is(#{$mgc}) {
            & > .wrapper {
              margin-inline: auto;
            }
          }
        }
      }

      @keyframes animThree {
        100% {
          max-height: var(--_min-submenu-height, 650px);
          opacity: 1;
          visibility: visible;
          overflow-y: auto;
        }
      }
    }
  }

  & > #{$hamburger} {
    display: var(--_d-flex);
    pointer-events: all;
  }
}

[data-div-type="element"] {
  &[data-element-type="mega-menu"] {
    width: calc(1% * #{prepareMediaVariable(--_ctm-meg-ele-nw-wh-vl)});
    height: min-content;
    margin: prepareMediaVariable(--_ctm-meg-lt-mn);
    @include prepareMediaQueries($defaultValues);
    //   var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, auto)))

    & > div {
      &.wrapper {
        width: 100%;
        height: auto;
        min-height: prepareMediaVariable(--_ctm-meg-lt-mn-ht);
        // padding: #{prepareMediaVariable(--_ctm-lt-pg)};
        // background: prepareMediaVariable(--_ctm-meg-dn-mu-cr-bd-cr);
        // border-radius: prepareMediaVariable(--_ctm-meg-dn-mu-cr-br-rs);

        // &[data-show-border="true"] {
        //   border-color: prepareMediaVariable(--_ctm-meg-dn-mu-cr-br-cr);
        //   border-width: prepareMediaVariable(--_ctm-meg-dn-mu-cr-br-wh);
        //   border-style: prepareMediaVariable(--_ctm-meg-dn-mu-cr-br-se);
        // }
        // &[data-show-boxshadow="true"] {
        //   box-shadow: prepareMediaVariable(--_ctm-meg-dn-mu-cr-sw-ae)
        //     prepareMediaVariable(--_ctm-meg-dn-mu-cr-sw-br) prepareMediaVariable(--_ctm-meg-dn-mu-cr-sw-sd)
        //     prepareMediaVariable(--_ctm-meg-dn-mu-cr-sw-cr);
        // }

        &.hrz {
          & > div {
            &#{$wrapper} {
              display: var(--_d-flex);
              flex-direction: row;
              gap: prepareMediaVariable(--_ctm-meg-lt-im-gp);
              justify-content: prepareMediaVariable(--_ctm-meg-lt-jy-ct);
              align-items: center;
            }
          }
        }

        &.vtl {
          & > div {
            &#{$wrapper} {
              display: var(--_d-flex);
              flex-direction: column;
              gap: prepareMediaVariable(--_ctm-meg-lt-im-gp);
            }
          }
        }

        & > div {
          &#{$wrapper} {
            padding: #{prepareMediaVariable(--_ctm-meg-lt-pg)};
            background: prepareMediaVariable(--_ctm-meg-dn-mu-cr-bd-cr);
            border-radius: prepareMediaVariable(--_ctm-meg-dn-mu-cr-br-rs);

            &:is([data-show-border="true"] > *) {
              border-color: prepareMediaVariable(--_ctm-meg-dn-mu-cr-br-cr);
              border-width: prepareMediaVariable(--_ctm-meg-dn-mu-cr-br-wh);
              border-style: prepareMediaVariable(--_ctm-meg-dn-mu-cr-br-se);
            }
            &:is([data-show-boxshadow="true"] > *) {
              box-shadow: prepareMediaVariable(--_ctm-meg-dn-mu-cr-sw-ae)
                prepareMediaVariable(--_ctm-meg-dn-mu-cr-sw-br)
                prepareMediaVariable(--_ctm-meg-dn-mu-cr-sw-sd)
                prepareMediaVariable(--_ctm-meg-dn-mu-cr-sw-cr);
            }
            & > div {
              &#{$menuItem} {
                position: relative;
                padding: var(
                  --_sf-it-at-pd,
                  var(--_sf-it-hr-pd, #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-dt-se-pg)})
                );
                background: var(
                  --_sf-it-at-bd,
                  var(--_sf-it-hr-bd, #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-dt-se-bd-cr)})
                );
                border-radius: var(
                  --_sf-it-at-br,
                  var(--_sf-it-hr-br, #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-dt-se-br-rs)})
                );
                display: var(--_d-flex);
                align-items: center;
                &:is(#{$vtl} *) {
                  align-items: flex-start;
                  flex-direction: column;
                  gap: #{prepareMediaVariable(--_ctm-meg-dn-sb-mu-cr-cr-ot-y)};
                }
                &:hover {
                  --_sf-it-hr-pd: #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-hr-se-pg)};
                  --_sf-it-hr-bd: #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-hr-se-bd-cr)};
                  --_sf-it-hr-br: #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-hr-se-br-rs)};
                  --_sf-it-hr-brc: #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-hr-se-br-cr)};
                  --_sf-it-hr-bw: #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-hr-se-br-wh)};
                  --_sf-it-hr-bs: #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-hr-se-br-se)};

                  --_sf-it-hr-bsa: #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-hr-se-sw-ae)};
                  --_sf-it-hr-blr: #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-hr-se-sw-br)};
                  --_sf-it-hr-spr: #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-hr-se-sw-sd)};
                  --_sf-it-hr-bscl: #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-hr-se-sw-cr)};

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

                  --_sf-it-hr-fsi: #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-hr-se-ft-se-ic)};
                  --_sf-it-hr-td: #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-hr-se-ue)};
                  --_sf-it-hr-tae: #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-hr-se-tt-an)};
                  --_sf-it-hr-ls: #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-hr-se-lr-sg)};
                  --_sf-it-hr-lh: #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-hr-se-le-ht)};
                  --_sf-it-hr-ttm: #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-hr-se-tt-tm)};
                  --_sf-it-hr-wwp: #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-hr-se-wd-wp)};
                  --_sf-it-hr-wbk: #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-hr-se-wd-bk)};
                  --_sf-it-hr-in-cr: #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-hr-se-in-c1)};
                  --_sf-it-hr-in-se: #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-hr-se-in-se)};

                  // Per-item leading icon hover overrides.
                  --_sf-it-hr-in-cr-im: #{prepareMediaVariable(
                      --_ctm-meg-dn-mu-im-se-hr-se-in-c1-im
                    )};
                  --_sf-it-hr-in-se-im: #{prepareMediaVariable(
                      --_ctm-meg-dn-mu-im-se-hr-se-in-se-im
                    )};
                }
                &.active {
                  --_sf-it-at-pd: #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-sd-se-pg)};
                  --_sf-it-at-bd: #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-sd-se-bd-cr)};
                  --_sf-it-at-br: #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-sd-se-br-rs)};
                  --_sf-it-at-brc: #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-sd-se-br-cr)};
                  --_sf-it-at-bw: #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-sd-se-br-wh)};
                  --_sf-it-at-bs: #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-sd-se-br-se)};

                  --_sf-it-at-bsa: #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-sd-se-sw-ae)};
                  --_sf-it-at-blr: #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-sd-se-sw-br)};
                  --_sf-it-at-spr: #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-sd-se-sw-sd)};
                  --_sf-it-at-bscl: #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-sd-se-sw-cr)};

                  --_sf-it-at-ff: #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-sd-se-ft-fy)};
                  --_sf-it-at-fs: #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-sd-se-ft-se)};
                  --_sf-it-at-fclr: #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-sd-se-cr)};
                  --_sf-it-at-fw: #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-sd-se-ft-wt)};
                  --_sf-it-at-fsi: #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-sd-se-ft-se-ic)};
                  --_sf-it-at-td: #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-sd-se-ue)};
                  --_sf-it-at-tae: #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-sd-se-tt-an)};
                  --_sf-it-at-ls: #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-sd-se-lr-sg)};
                  --_sf-it-at-lh: #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-sd-se-le-ht)};
                  --_sf-it-at-ttm: #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-sd-se-tt-tm)};
                  --_sf-it-at-wwp: #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-sd-se-wd-wp)};
                  --_sf-it-at-wbk: #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-sd-se-wd-bk)};
                  --_sf-it-at-in-cr: #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-sd-se-in-c1)};
                  --_sf-it-at-in-se: #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-sd-se-in-se)};

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

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

                & > a {
                  display: var(--_d-flex);
                  justify-content: space-between;
                  align-items: center;
                  gap: prepareMediaVariable(--_ctm-meg-dn-mu-im-se-dt-se-in-gp);
                  & > span {
                    display: var(--_d-flex);
                    font-family: var(
                      --_sf-it-at-ff,
                      var(
                        --_sf-it-hr-ff,
                        #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-dt-se-ft-fy)}
                      )
                    );
                    &.flex__overflow {
                      white-space: normal;
                      @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
                    }
                    font-size: var(
                      --_sf-it-at-fs,
                      var(
                        --_sf-it-hr-fs,
                        #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-dt-se-ft-se)}
                      )
                    );
                    color: var(
                      --_sf-it-at-fclr,
                      var(
                        --_sf-it-hr-fclr,
                        #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-dt-se-cr)}
                      )
                    );
                    font-weight: var(
                      --_sf-it-at-fw,
                      var(
                        --_sf-it-hr-fw,
                        #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-dt-se-ft-wt)}
                      )
                    );
                    font-style: var(
                      --_sf-it-at-fsi,
                      var(
                        --_sf-it-hr-fsi,
                        #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-dt-se-ft-se-ic)}
                      )
                    );
                    text-decoration: var(
                      --_sf-it-at-td,
                      var(--_sf-it-hr-td, #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-dt-se-ue)})
                    );
                    text-align: var(
                      --_sf-it-at-tae,
                      var(
                        --_sf-it-hr-tae,
                        #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-dt-se-tt-an)}
                      )
                    );
                    letter-spacing: var(
                      --_sf-it-at-ls,
                      var(
                        --_sf-it-hr-ls,
                        #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-dt-se-lr-sg)}
                      )
                    );
                    line-height: var(
                      --_sf-it-at-lh,
                      var(
                        --_sf-it-hr-lh,
                        #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-dt-se-le-ht)}
                      )
                    );
                    text-transform: var(
                      --_sf-it-at-ttm,
                      var(
                        --_sf-it-hr-ttm,
                        #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-dt-se-tt-tm, none)}
                      )
                    );
                    word-wrap: var(
                      --_sf-it-at-wwp,
                      var(
                        --_sf-it-hr-wwp,
                        #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-dt-se-wd-wp, normal)}
                      )
                    );
                    word-break: var(
                      --_sf-it-at-wbk,
                      var(
                        --_sf-it-hr-wbk,
                        #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-dt-se-wd-bk, keep-all)}
                      )
                    );

                    // The item's own leading glyph, sized and coloured from the
                    // `Item`-suffixed vars so it stays independent of the caret.
                    &.flex__menu__item__leading__icon {
                      flex: 0 0 auto;
                      margin-inline-end: prepareMediaVariable(
                        --_ctm-meg-dn-mu-im-se-dt-se-in-gp-im,
                        0px
                      );

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

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

                    &.flex__menu__item__icon {
                      pointer-events: all;
                      &[data-rotate="true"] {
                        --_sf-svg-tr: 180deg;
                      }
                      svg {
                        width: var(
                          --_sf-it-at-in-se,
                          var(
                            --_sf-it-hr-in-se,
                            #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-dt-se-in-se)}
                          )
                        );
                        height: var(
                          --_sf-it-at-in-se,
                          var(
                            --_sf-it-hr-in-se,
                            #{prepareMediaVariable(--_ctm-meg-dn-mu-im-se-dt-se-in-se)}
                          )
                        );
                        transform: rotate(#{var(--_sf-svg-tr, 0deg)});
                        transition: transform var(--_transition-duration)
                          var(--_transition-timing-function);

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

                  // Let the label absorb the free space when a leading icon is
                  // present, so `space-between` does not spread the three children.
                  & > .flex__menu__item__leading__icon + span {
                    flex: 1 1 auto;
                  }
                }

                & > #{$es} {
                  position: var(--_p-absolute);

                  &:is(.hrz > div > div > *) {
                    top: 100%; // Need to Integrate top value
                    &:is(#{$mgc}) {
                      left: var(--_sf-mg-dm-ps-vl, 0px);
                    }

                    &:is(#{$smp}) {
                      left: prepareMediaVariable(--_ctm-dn-sb-mu-cr-cr-ot-x, 0px);
                    }
                    // left: 0px;
                  }
                  &:is(.vtl > div > div > *) {
                    left: 100%; // Need to Integrate top value

                    &:is(#{$mgc}) {
                      // top: var(--_sf-mg-dm-ps-vl, 0px);
                      top: 0px;
                    }
                  }

                  display: var(--_sf-bm-es-at-dp-vl, var(--_d-none)) !important;

                  &:is(#{$activeMg} > *) {
                    --_sf-bm-es-at-dp-vl: var(--_d-grid) !important;
                  }
                }

                // Sub Item Container

                // & > ul {
                //   &#{$subMenuContainer} {
                //     background: prepareMediaVariable(--_ctm-meg-dn-sb-mu-cr-bd-cr);
                //     border-radius: prepareMediaVariable(--_ctm-meg-dn-sb-mu-cr-br-rs);
                //     padding: prepareMediaVariable(--_ctm-meg-dn-sb-mu-cr-pg);

                //     &:is(#{$hrz} *) {
                //       position: absolute;
                //       left: calc(50% + #{prepareMediaVariable(--_ctm-meg-dn-sb-mu-cr-cr-ot-x)});
                //       width: calc(100% + #{prepareMediaVariable(--_ctm-meg-dn-sb-mu-cr-cr-wh)});
                //       top: calc(100% + #{prepareMediaVariable(--_ctm-meg-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-meg-dn-sb-mu-cr-br-wh);
                //       border-color: prepareMediaVariable(--_ctm-meg-dn-sb-mu-cr-br-cr);
                //       border-style: prepareMediaVariable(--_ctm-meg-dn-sb-mu-cr-br-se);
                //     }
                //     &[data-show-boxshadow="true"] {
                //       box-shadow: prepareMediaVariable(--_ctm-meg-dn-sb-mu-cr-sw-ae)
                //         prepareMediaVariable(--_ctm-meg-dn-sb-mu-cr-sw-br)
                //         prepareMediaVariable(--_ctm-meg-dn-sb-mu-cr-sw-sd)
                //         prepareMediaVariable(--_ctm-meg-dn-sb-mu-cr-sw-cr);
                //     }

                //     & > li {
                //       &#{$subMenuItem} {
                //         display: var(--_d-flex);
                //         flex-direction: column;

                //         padding: var(
                //           --_sf-sb-it-at-pd,
                //           var(
                //             --_sf-sb-it-hr-pd,
                //             #{prepareMediaVariable(--_ctm-meg-dn-sb-mu-im-se-dt-se-pg)}
                //           )
                //         );
                //         background: var(
                //           --_sf-sb-it-at-bd,
                //           var(
                //             --_sf-sb-it-hr-bd,
                //             #{prepareMediaVariable(--_ctm-meg-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-meg-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-meg-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-meg-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-meg-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-meg-dn-sb-mu-im-se-dt-se-sw-ae)}
                //               )
                //             )
                //             var(
                //               --_sf-sb-it-at-blr,
                //               var(
                //                 --_sf-sb-it-hr-blr,
                //                 #{prepareMediaVariable(--_ctm-meg-dn-sb-mu-im-se-dt-se-sw-br)}
                //               )
                //             )
                //             var(
                //               --_sf-sb-it-at-spr,
                //               var(
                //                 --_sf-sb-it-hr-spr,
                //                 #{prepareMediaVariable(--_ctm-meg-dn-sb-mu-im-se-dt-se-sw-sd)}
                //               )
                //             )
                //             var(
                //               --_sf-sb-it-at-bscl,
                //               var(
                //                 --_sf-sb-it-hr-bscl,
                //                 prepareMediaVariable(--_ctm-meg-dn-sb-mu-im-se-dt-se-sw-cr)
                //               )
                //             );
                //         }

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

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

                //           --_sf-sb-it-hr-fsi: #{prepareMediaVariable(
                //               --_ctm-meg-dn-sb-mu-im-se-hr-se-ft-se-ic
                //             )};
                //           --_sf-sb-it-hr-td: #{prepareMediaVariable(--_ctm-meg-dn-sb-mu-im-se-hr-se-ue)};
                //           --_sf-sb-it-hr-tae: #{prepareMediaVariable(
                //               --_ctm-meg-dn-sb-mu-im-se-hr-se-tt-an
                //             )};
                //           --_sf-sb-it-hr-ls: #{prepareMediaVariable(
                //               --_ctm-meg-dn-sb-mu-im-se-hr-se-lr-sg
                //             )};
                //           --_sf-sb-it-hr-lh: #{prepareMediaVariable(
                //               --_ctm-meg-dn-sb-mu-im-se-hr-se-le-ht
                //             )};
                //         }
                //         &.active {
                //           --_sf-sb-it-at-pd: #{prepareMediaVariable(--_ctm-meg-dn-sb-mu-im-se-sd-se-pg)};
                //           --_sf-sb-it-at-bd: #{prepareMediaVariable(
                //               --_ctm-meg-dn-sb-mu-im-se-sd-se-bd-cr
                //             )};
                //           --_sf-sb-it-at-br: #{prepareMediaVariable(
                //               --_ctm-meg-dn-sb-mu-im-se-sd-se-br-rs
                //             )};
                //           --_sf-sb-it-at-brc: #{prepareMediaVariable(
                //               --_ctm-meg-dn-sb-mu-im-se-sd-se-br-cr
                //             )};
                //           --_sf-sb-it-at-bw: #{prepareMediaVariable(
                //               --_ctm-meg-dn-sb-mu-im-se-sd-se-br-wh
                //             )};
                //           --_sf-sb-it-at-bs: #{prepareMediaVariable(
                //               --_ctm-meg-dn-sb-mu-im-se-sd-se-br-se
                //             )};
                //           --_sf-sb-it-hr-bsa: #{prepareMediaVariable(
                //               --_ctm-meg-dn-sb-mu-im-se-sd-se-sw-ae
                //             )};
                //           --_sf-sb-it-at-blr: #{prepareMediaVariable(
                //               --_ctm-meg-dn-sb-mu-im-se-sd-se-sw-br
                //             )};
                //           --_sf-sb-it-at-spr: #{prepareMediaVariable(
                //               --_ctm-meg-dn-sb-mu-im-se-sd-se-sw-sd
                //             )};
                //           --_sf-sb-it-at-bscl: #{prepareMediaVariable(
                //               --_ctm-meg-dn-sb-mu-im-se-sd-se-sw-cr
                //             )};

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

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

                //           & > span {
                //             display: var(--_d-flex);

                //             &#{$subMenuItemText} {
                //               font-family: var(
                //                   --_sf-it-at-ff,
                //                   var(
                //                     --_sf-it-hr-ff,
                //                     #{prepareMediaVariable(--_ctm-meg-dn-sb-mu-im-se-dt-se-ft-fy)}
                //                   )
                //                 ),
                //               font-size: var(
                //                 --_sf-sb-it-at-fs,
                //                 var(
                //                   --_sf-sb-it-hr-fs,
                //                   #{prepareMediaVariable(--_ctm-meg-dn-sb-mu-im-se-dt-se-ft-se)}
                //                 )
                //               );
                //               color: var(
                //                 --_sf-sb-it-at-fclr,
                //                 var(
                //                   --_sf-sb-it-hr-fclr,
                //                   #{prepareMediaVariable(--_ctm-meg-dn-sb-mu-im-se-dt-se-cr)}
                //                 )
                //               );
                //               font-weight: var(
                //                 --_sf-sb-it-at-fw,
                //                 var(
                //                   --_sf-sb-it-hr-fw,
                //                   #{prepareMediaVariable(--_ctm-meg-dn-sb-mu-im-se-fw-se-ft-wt)}
                //                 )
                //               );
                //               font-style: var(
                //                 --_sf-sb-it-at-fsi,
                //                 var(
                //                   --_sf-sb-it-hr-fsi,
                //                   #{prepareMediaVariable(--_ctm-meg-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-meg-dn-sb-mu-im-se-dt-se-ue)}
                //                 )
                //               );
                //               text-align: var(
                //                 --_sf-sb-it-at-tae,
                //                 var(
                //                   --_sf-sb-it-hr-tae,
                //                   #{prepareMediaVariable(--_ctm-meg-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-meg-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-meg-dn-sb-mu-im-se-dt-se-le-ht)}
                //                 )
                //               );
                //             }
                //           }
                //         }
                //       }
                //     }
                //   }
                // }
              }
            }
          }

          & > p {
            &#{$nodatap} {
              font-size: 14px;
              color: var(--_gray-500);
            }
          }
        }
        & > #{$hamburger} {
          display: var(--_d-none);
          padding: var(--_sf-hm-hr-pd, #{prepareMediaVariable(--_ctm-meg-dn-hr-se-dt-se-pg)});
          border-radius: var(
            --_sf-hm-hr-br,
            #{prepareMediaVariable(--_ctm-meg-dn-hr-se-dt-se-br-rs)}
          );
          background: var(--_sf-hm-hr-bd, #{prepareMediaVariable(--_ctm-meg-dn-hr-se-dt-se-bd-cr)});

          &[data-show-border="true"] {
            border-style: var(
              --_sf-hm-hr-bs,
              #{prepareMediaVariable(--_ctm-meg-dn-hr-se-dt-se-br-se)}
            );
            border-width: var(
              --_sf-hm-hr-bw,
              #{prepareMediaVariable(--_ctm-meg-dn-hr-se-dt-se-br-wh)}
            );
            border-color: var(
              --_sf-hm-hr-bc,
              #{prepareMediaVariable(--_ctm-meg-dn-hr-se-dt-se-br-cr)}
            );
          }

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

          &:hover {
            --_sf-hm-hr-ic-sz: #{prepareMediaVariable(--_ctm-meg-dn-hr-se-hr-se-in-se)};
            --_sf-hm-hr-ic-clr: #{prepareMediaVariable(--_ctm-meg-dn-hr-se-hr-se-in-c1)};

            --_sf-hm-hr-pd: #{prepareMediaVariable(--_ctm-meg-dn-hr-se-hr-se-pg)};
            --_sf-hm-hr-br: #{prepareMediaVariable(--_ctm-meg-dn-hr-se-hr-se-br-rs)};
            --_sf-hm-hr-bd: #{prepareMediaVariable(--_ctm-meg-dn-hr-se-hr-se-bd-cr)};

            --_sf-hm-hr-bs: #{prepareMediaVariable(--_ctm-meg-dn-hr-se-hr-se-br-se)};
            --_sf-hm-hr-bw: #{prepareMediaVariable(--_ctm-meg-dn-hr-se-dt-se-br-wh)};
            --_sf-hm-hr-bc: #{prepareMediaVariable(--_ctm-meg-dn-hr-se-hr-se-br-cr)};

            --_sf-hm-hr-bsa: #{prepareMediaVariable(--_ctm-meg-dn-hr-se-hr-se-sw-ae)};
            --_sf-hm-hr-blr: #{prepareMediaVariable(--_ctm-meg-dn-hr-se-hr-se-sw-br)};
            --_sf-hm-hr-spr: #{prepareMediaVariable(--_ctm-meg-dn-hr-se-hr-se-sw-sd)};
            --_sf-hm-hr-bscl: #{prepareMediaVariable(--_ctm-meg-dn-hr-se-hr-se-sw-cr)};
          }

          & > span {
            display: var(--_d-flex);
            align-items: center;
            justify-content: center;
          }

          svg {
            width: var(--_sf-hm-hr-ic-sz, #{prepareMediaVariable(--_ctm-meg-dn-hr-se-dt-se-in-se)});
            height: var(
              --_sf-hm-hr-ic-sz,
              #{prepareMediaVariable(--_ctm-meg-dn-hr-se-dt-se-in-se)}
            );

            path {
              stroke: var(
                --_sf-hm-hr-ic-clr,
                #{prepareMediaVariable(--_ctm-meg-dn-hr-se-dt-se-in-c1)}
              );
              // Overrides the stroke-width presentation attribute baked into the icon
              // markup. Authored on the default state only, so it keeps applying on hover.
              stroke-width: #{prepareMediaVariable(--_ctm-meg-dn-hr-se-dt-se-se-wh, 1.25)};
            }
          }
        }

        @media only screen and (min-width: 10px) {
          &.dk {
            @include hamburgerCSS();
          }
        }

        @media only screen and (min-width: 10px) and (max-width: 1023px) {
          &.tb {
            @include hamburgerCSS();
          }
        }

        @media only screen and (min-width: 10px) and (max-width: 767px) {
          &.mb {
            @include hamburgerCSS();
          }
        }
      }
    }
  }
}