@use "sass:map";
@use "sass:list";
@use "./functions.scss" as *;
$activeElementSelector: "[data-has-clicked='true']";
$wrapper: ".flex__menu__list__wrapper";
$menuItem: ".flex__menu__item";
$subMenuContainer: ".flex__submenu__container";
$nodatap: ".no__menu_item__p";
$subMenuItem: ".flex__sub__menu__item";
$subMenuItemText: ".flex__sub__menu__item__text";
$hrz: "[data-element-type='menu-v2'] > .hrz";
$vtl: "[data-element-type='menu-v2'] > .vtl";
$hamburger: ".flex__menu__hamburger";
$hamburgerActive: "[data-hamburger-active='true']";

$wrapperData: (
  start: (
    left: prepareMediaVariable(--_ctm-dn-hr-os-cr-ot-x, 0px),
  ),
  end: (
    right: prepareMediaVariable(--_ctm-dn-hr-os-cr-ot-x, 0px),
  ),
  center: (
    left: calc(50% + #{prepareMediaVariable(--_ctm-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-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-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-lt-im-gp);

      @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-dn-hr-os-cr-wh, 100%);
        max-height: var(--_min-submenu-height, 650px);
        overflow-y: auto;
      }

      & > #{$menuItem} {
        align-items: flex-start;
        width: 100%;
        flex-direction: column;
        gap: #{prepareMediaVariable(--_ctm-dn-sb-mu-cr-cr-ot-y)};

        & > #{$subMenuContainer} {
          width: 100% !important;
          position: static !important;
          transform: none !important;
        }
      }

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

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

[data-div-type="element"] {
  &[data-element-type="menu-v2"] {
    width: calc(1% * #{prepareMediaVariable(--_ctm-ele-nw-wh-vl)});
    margin: prepareMediaVariable(--_ctm-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%;
        // padding: #{prepareMediaVariable(--_ctm-lt-pg)};
        // background: prepareMediaVariable(--_ctm-dn-mu-cr-bd-cr);
        // border-radius: prepareMediaVariable(--_ctm-dn-mu-cr-br-rs);

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

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

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

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

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

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

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

            & > div {
              &#{$menuItem} {
                position: relative;
                padding: var(
                  --_sf-it-at-pd,
                  var(--_sf-it-hr-pd, #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-pg)})
                );
                background: var(
                  --_sf-it-at-bd,
                  var(--_sf-it-hr-bd, #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-bd-cr)})
                );
                border-radius: var(
                  --_sf-it-at-br,
                  var(--_sf-it-hr-br, #{prepareMediaVariable(--_ctm-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-dn-sb-mu-cr-cr-ot-y)};
                }

                &:hover {
                  --_sf-it-hr-pd: #{prepareMediaVariable(--_ctm-dn-mu-im-se-hr-se-pg)};
                  --_sf-it-hr-bd: #{prepareMediaVariable(--_ctm-dn-mu-im-se-hr-se-bd-cr)};
                  --_sf-it-hr-br: #{prepareMediaVariable(--_ctm-dn-mu-im-se-hr-se-br-rs)};
                  --_sf-it-hr-brc: #{prepareMediaVariable(--_ctm-dn-mu-im-se-hr-se-br-cr)};
                  --_sf-it-hr-bw: #{prepareMediaVariable(--_ctm-dn-mu-im-se-hr-se-br-wh)};
                  --_sf-it-hr-bs: #{prepareMediaVariable(--_ctm-dn-mu-im-se-hr-se-br-se)};

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

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

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

                  // Dropdown icon (size/color) hover overrides — consumed by
                  // the .flex__menu__item__icon svg cascade below.
                  --_sf-it-hr-isz: #{prepareMediaVariable(--_ctm-dn-mu-im-se-hr-se-in-se)};
                  --_sf-it-hr-icr: #{prepareMediaVariable(--_ctm-dn-mu-im-se-hr-se-in-c1)};

                  // Same, for the per-item leading icon.
                  --_sf-it-hr-isz-im: #{prepareMediaVariable(--_ctm-dn-mu-im-se-hr-se-in-se-im)};
                  --_sf-it-hr-icr-im: #{prepareMediaVariable(--_ctm-dn-mu-im-se-hr-se-in-c1-im)};
                }

                &.active {
                  --_sf-it-at-pd: #{prepareMediaVariable(--_ctm-dn-mu-im-se-sd-se-pg)};
                  --_sf-it-at-bd: #{prepareMediaVariable(--_ctm-dn-mu-im-se-sd-se-bd-cr)};
                  --_sf-it-at-br: #{prepareMediaVariable(--_ctm-dn-mu-im-se-sd-se-br-rs)};
                  --_sf-it-at-brc: #{prepareMediaVariable(--_ctm-dn-mu-im-se-sd-se-br-cr)};
                  --_sf-it-at-bw: #{prepareMediaVariable(--_ctm-dn-mu-im-se-sd-se-br-wh)};
                  --_sf-it-at-bs: #{prepareMediaVariable(--_ctm-dn-mu-im-se-sd-se-br-se)};

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

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

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

                  // Same, for the per-item leading icon.
                  --_sf-it-at-isz-im: #{prepareMediaVariable(--_ctm-dn-mu-im-se-sd-se-in-se-im)};
                  --_sf-it-at-icr-im: #{prepareMediaVariable(--_ctm-dn-mu-im-se-sd-se-in-c1-im)};
                }

                &[data-show-border="true"] {
                  border-color: var(
                    --_sf-it-at-brc,
                    var(--_sf-it-hr-brc, #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-br-cr)})
                  );
                  border-width: var(
                    --_sf-it-at-bw,
                    var(--_sf-it-hr-bw, #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-br-wh)})
                  );
                  border-style: var(
                    --_sf-it-at-bs,
                    var(--_sf-it-hr-bs, prepareMediaVariable(--_ctm-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-dn-mu-im-se-dt-se-sw-ae)})
                    )
                    var(
                      --_sf-it-at-blr,
                      var(--_sf-it-hr-blr, #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-sw-br)})
                    )
                    var(
                      --_sf-it-at-spr,
                      var(--_sf-it-hr-spr, #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-sw-sd)})
                    )
                    var(
                      --_sf-it-at-bscl,
                      var(--_sf-it-hr-bscl, prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-sw-cr))
                    );
                }

                & > a {
                  display: var(--_d-flex);
                  justify-content: space-between;
                  align-items: center;
                  gap: prepareMediaVariable(--_ctm-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-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-dn-mu-im-se-dt-se-ft-se)})
                    );
                    color: var(
                      --_sf-it-at-fclr,
                      var(--_sf-it-hr-fclr, #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-cr)})
                    );
                    font-weight: var(
                      --_sf-it-at-fw,
                      var(--_sf-it-hr-fw, #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-ft-wt)})
                    );
                    font-style: var(
                      --_sf-it-at-fsi,
                      var(
                        --_sf-it-hr-fsi,
                        #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-ft-se-ic)}
                      )
                    );
                    text-decoration: var(
                      --_sf-it-at-td,
                      var(--_sf-it-hr-td, #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-ue)})
                    );
                    text-align: var(
                      --_sf-it-at-tae,
                      var(--_sf-it-hr-tae, #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-tt-an)})
                    );
                    letter-spacing: var(
                      --_sf-it-at-ls,
                      var(--_sf-it-hr-ls, #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-lr-sg)})
                    );
                    line-height: var(
                      --_sf-it-at-lh,
                      var(--_sf-it-hr-lh, #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-le-ht)})
                    );
                    text-transform: var(
                      --_sf-it-at-ttm,
                      var(
                        --_sf-it-hr-ttm,
                        #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-tt-tm, none)}
                      )
                    );
                    word-wrap: var(
                      --_sf-it-at-wwp,
                      var(
                        --_sf-it-hr-wwp,
                        #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-wd-wp, normal)}
                      )
                    );
                    word-break: var(
                      --_sf-it-at-wbk,
                      var(
                        --_sf-it-hr-wbk,
                        #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-wd-bk, normal)}
                      )
                    );

                    // The item's own leading glyph. Styled from the `Item`-suffixed
                    // vars so it is sized and coloured independently of the caret
                    // below, which shares this parent but reads the unsuffixed set.
                    &.flex__menu__item__leading__icon {
                      flex: 0 0 auto;
                      margin-inline-end: prepareMediaVariable(
                        --_ctm-dn-mu-im-se-dt-se-in-gp-im,
                        0px
                      );

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

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

                    &.flex__menu__item__icon {
                      &[data-rotate="true"] {
                        --_sf-svg-tr: 180deg;
                      }

                      svg {
                        width: var(
                          --_sf-it-at-isz,
                          var(
                            --_sf-it-hr-isz,
                            #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-in-se)}
                          )
                        );
                        height: var(
                          --_sf-it-at-isz,
                          var(
                            --_sf-it-hr-isz,
                            #{prepareMediaVariable(--_ctm-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-icr,
                            var(
                              --_sf-it-hr-icr,
                              #{prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-in-c1)}
                            )
                          );
                          // Overrides the stroke-width presentation attribute baked into the icon markup.
                          stroke-width: prepareMediaVariable(--_ctm-dn-mu-im-se-dt-se-se-wh, 1.25);
                        }
                      }
                    }
                  }

                  // The row is `space-between`, so a third child would otherwise
                  // spread all three apart. Letting the label absorb the free space
                  // keeps the glyph beside it and the caret out at the edge.
                  & > .flex__menu__item__leading__icon + span {
                    flex: 1 1 auto;
                  }
                }

                // Sub Item Container

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

                    display: var(--_d-flex);
                    flex-direction: column;
                    row-gap: prepareMediaVariable(--_ctm-dn-sb-mu-cr-im-gp);

                    &: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;

                        padding: var(
                          --_sf-sb-it-at-pd,
                          var(
                            --_sf-sb-it-hr-pd,
                            #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-pg)}
                          )
                        );
                        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)};
                          --_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
                            )};
                          --_sf-sb-it-hr-ttm: #{prepareMediaVariable(
                              --_ctm-dn-sb-mu-im-se-hr-se-tt-tm
                            )};
                          --_sf-sb-it-hr-wwp: #{prepareMediaVariable(
                              --_ctm-dn-sb-mu-im-se-hr-se-wd-wp
                            )};
                          --_sf-sb-it-hr-wbk: #{prepareMediaVariable(
                              --_ctm-dn-sb-mu-im-se-hr-se-wd-bk
                            )};

                          // 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
                            )};
                          --_sf-sb-it-at-ttm: #{prepareMediaVariable(
                              --_ctm-dn-sb-mu-im-se-sd-se-tt-tm
                            )};
                          --_sf-sb-it-at-wwp: #{prepareMediaVariable(
                              --_ctm-dn-sb-mu-im-se-sd-se-wd-wp
                            )};
                          --_sf-sb-it-at-wbk: #{prepareMediaVariable(
                              --_ctm-dn-sb-mu-im-se-sd-se-wd-bk
                            )};

                          // 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;

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

                            // Per-item leading glyph, styled from the sub-menu item
                            // scope's own `Item` vars.
                            &.flex__sub__menu__item__leading__icon {
                              flex: 0 0 auto;
                              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} {
                              width: 100%;
                              flex: 1 1 auto;
                              font-family: var(
                                --_sf-it-at-ff,
                                var(
                                  --_sf-it-hr-ff,
                                  #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-ft-fy)}
                                )
                              );
                              &.flex__overflow {
                                white-space: normal;
                                @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
                              }
                              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)}
                                )
                              );
                              text-transform: var(
                                --_sf-sb-it-at-ttm,
                                var(
                                  --_sf-sb-it-hr-ttm,
                                  #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-tt-tm, none)}
                                )
                              );
                              word-wrap: var(
                                --_sf-sb-it-at-wwp,
                                var(
                                  --_sf-sb-it-hr-wwp,
                                  #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-wd-wp, normal)}
                                )
                              );
                              word-break: var(
                                --_sf-sb-it-at-wbk,
                                var(
                                  --_sf-sb-it-hr-wbk,
                                  #{prepareMediaVariable(--_ctm-dn-sb-mu-im-se-dt-se-wd-bk, normal)}
                                )
                              );
                              display: -webkit-box;
                              -webkit-line-clamp: 1;
                              -webkit-box-orient: vertical;
                              overflow: hidden;
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }

        & > #{$hamburger} {
          display: var(--_d-none);
          padding: var(--_sf-hm-hr-pd, #{prepareMediaVariable(--_ctm-dn-hr-se-dt-se-pg)});
          border-radius: var(--_sf-hm-hr-br, #{prepareMediaVariable(--_ctm-dn-hr-se-dt-se-br-rs)});
          background: var(--_sf-hm-hr-bd, #{prepareMediaVariable(--_ctm-dn-hr-se-dt-se-bd-cr)});

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

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

          &:hover {
            & > span {
            }

            svg {
              --_sf-hm-hr-ic-sz: #{prepareMediaVariable(--_ctm-dn-hr-se-hr-se-in-se)};
              // Published on the <svg> rather than on <path>: custom properties
              // inherit, so whatever shapes the glyph is drawn with will read them.
              --_sf-hm-hr-ic-clr: #{prepareMediaVariable(--_ctm-dn-hr-se-hr-se-in-c1)};
            }

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

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

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

            --_sf-hm-hr-bsa: #{prepareMediaVariable(--_ctm-dn-hr-se-hr-se-sw-ae)};
            --_sf-hm-hr-blr: #{prepareMediaVariable(--_ctm-dn-hr-se-hr-se-sw-br)};
            --_sf-hm-hr-spr: #{prepareMediaVariable(--_ctm-dn-hr-se-hr-se-sw-sd)};
            --_sf-hm-hr-bscl: #{prepareMediaVariable(--_ctm-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-dn-hr-se-dt-se-in-se)});
            height: var(--_sf-hm-hr-ic-sz, #{prepareMediaVariable(--_ctm-dn-hr-se-dt-se-in-se)});

            // Reaches every stroked shape, not just <path>: the built-in glyphs are
            // paths, but a custom (Sirv-hosted) hamburger is arbitrary markup and is
            // inlined by SirvIcon just the same, so <line>/<rect>/<circle> icons have
            // to pick up Icon Color and Stroke Width too.
            path,
            line,
            polyline,
            polygon,
            circle,
            ellipse,
            rect {
              stroke: var(--_sf-hm-hr-ic-clr, #{prepareMediaVariable(--_ctm-dn-hr-se-dt-se-in-c1)});
              stroke-width: #{prepareMediaVariable(--_ctm-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();
          }
        }
      }
    }
  }
}