@use "sass:map";
@use "sass:list";

[data-div-type="element"] {
  &[data-element-type="menu"] {
    width: var(
      --_sf-el-wh-st-mx,
      calc(
        1% *
          var(
            --_ctm-mob-ele-nw-wh-vl,
            var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
          )
      )
    );
    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
    // aspect-ratio: 1 / var(--_sf-aspect-ratio);

    --_aspect-ratio: calc(
      1 *
        (
          var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) /
            var(--_ctm-mob-lt-wh, var(--_ctm-tab-lt-wh, var(--_ctm-lt-wh)))
        )
    );

    & > .wrapper {
      width: 100%;
      height: 100%;
    }
    &[data-show-shadow="false"] {
      --_show-shadow: none;
    }

    .menu__element {
      background-color: var(
        --_ctm-mob-dn-mu-cr-bd-cr,
        var(--_ctm-tab-dn-mu-cr-bd-cr, var(--_ctm-dn-mu-cr-bd-cr))
      );
      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
      display: flex;
      align-items: center;

      width: 100%;
      height: 100%;
      border-color: var(
        --_ctm-mob-dn-mu-cr-br-cr,
        var(--_ctm-tab-dn-mu-cr-br-cr, var(--_ctm-dn-mu-cr-br-cr))
      );
      border-style: var(
        --_ctm-mob-dn-mu-cr-br-se,
        var(--_ctm-tab-dn-mu-cr-br-se, var(--_ctm-dn-mu-cr-br-se))
      );
      border-width: var(
        --_ctm-mob-dn-mu-cr-br-wh,
        var(--_ctm-tab-dn-mu-cr-br-wh, var(--_ctm-dn-mu-cr-br-wh))
      );
      border-radius: var(
        --_ctm-mob-dn-mu-cr-br-rs,
        var(--_ctm-tab-dn-mu-cr-br-rs, var(--_ctm-dn-mu-cr-br-rs))
      );
      box-shadow: var(
        --_show-shadow,
        var(--_ctm-mob-dn-mu-cr-sw-ae, var(--_ctm-tab-dn-mu-cr-sw-ae, var(--_ctm-dn-mu-cr-sw-ae)))
          var(--_ctm-mob-dn-mu-cr-sw-br, var(--_ctm-tab-dn-mu-cr-sw-br, var(--_ctm-dn-mu-cr-sw-br)))
          var(--_ctm-mob-dn-mu-cr-sw-sd, var(--_ctm-tab-dn-mu-cr-sw-sd, var(--_ctm-dn-mu-cr-sw-sd)))
          var(--_ctm-mob-dn-mu-cr-sw-cr, var(--_ctm-tab-dn-mu-cr-sw-cr, var(--_ctm-dn-mu-cr-sw-cr)))
      );

      gap: var(
        --_ctm-mob-lt-sg-bn-mu-lt-is,
        var(--_ctm-tab-lt-sg-bn-mu-lt-is, var(--_ctm-lt-sg-bn-mu-lt-is))
      );

      .menu__item {
        background-color: var(
          --_ctm-mob-dn-mu-im-se-bd-cr,
          var(--_ctm-tab-dn-mu-im-se-bd-cr, var(--_ctm-dn-mu-im-se-bd-cr))
        );

        width: 100%;
        border-color: var(
          --_ctm-mob-dn-mu-im-se-br-cr,
          var(--_ctm-tab-dn-mu-im-se-br-cr, var(--_ctm-dn-mu-im-se-br-cr))
        );
        border-style: var(
          --_ctm-mob-dn-mu-im-se-br-se,
          var(--_ctm-tab-dn-mu-im-se-br-se, var(--_ctm-dn-mu-im-se-br-se))
        );
        border-width: var(
          --_ctm-mob-dn-mu-im-se-br-wh,
          var(--_ctm-tab-dn-mu-im-se-br-wh, var(--_ctm-dn-mu-im-se-br-wh))
        );
        border-radius: var(
          --_ctm-mob-dn-mu-im-se-br-rs,
          var(--_ctm-tab-dn-mu-im-se-br-rs, var(--_ctm-dn-mu-im-se-br-rs))
        );
        box-shadow: var(
          --_show-shadow,
          var(
              --_ctm-mob-dn-mu-im-se-sw-ae,
              var(--_ctm-tab-dn-mu-im-se-sw-ae, var(--_ctm-dn-mu-im-se-sw-ae))
            )
            var(
              --_ctm-mob-dn-mu-im-se-sw-br,
              var(--_ctm-tab-dn-mu-im-se-sw-br, var(--_ctm-dn-mu-im-se-sw-br))
            )
            var(
              --_ctm-mob-dn-mu-im-se-sw-sd,
              var(--_ctm-tab-dn-mu-im-se-sw-sd, var(--_ctm-dn-mu-im-se-sw-sd))
            )
            var(
              --_ctm-mob-dn-mu-im-se-sw-cr,
              var(--_ctm-tab-dn-mu-im-se-sw-cr, var(--_ctm-dn-mu-im-se-sw-cr))
            )
        );
        &[data-has-link="true"] {
          cursor: pointer;
        }

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