@use "./functions.scss" as *;
.add_order__wrapper {
  position: relative;
  display: inline-block;

  &[data-show-shadow="false"] {
    --_show-shadow: none;
  }
  // Icon Position. These used to target `.add_order_button`, which no longer exists —
  // the button is rendered by the shared ButtonComponent as `.btn__with__text`, so none
  // of these rules matched and the control did nothing. `.btn__with__text` resolves its
  // direction through `--_sf-jc`, which nothing was setting either, so it fell back to
  // the initial `row` whatever the control said.
  &[data-icon-position="left"],
  &[data-icon-position="center"] {
    .btn__with__text {
      --_sf-jc: row;
    }
  }
  &[data-icon-position="right"] {
    .btn__with__text {
      --_sf-jc: row-reverse;
    }
  }
  &[data-element-style="Icon"] {
    &[data-icon-position="left"] {
      .btn__with__text {
        justify-content: start;
      }
    }
    &[data-icon-position="right"] {
      .btn__with__text {
        justify-content: end;
      }
    }
    &[data-icon-position="center"] {
      .btn__with__text {
        justify-content: center;
      }
    }
  }
  .btn__with__text {
    // background: transparent;
    background: var(
      --_ctm-mob-dn-dt-se-bd-cr,
      var(--_ctm-tab-dn-dt-se-bd-cr, var(--_ctm-dn-dt-se-bd-cr))
    );
    border: none;
    width: var(--_ctm-mob-lt-wh, var(--_ctm-tab-lt-wh, var(--_ctm-lt-wh)));
    height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
    gap: var(--_ctm-mob-lt-gp, var(--_ctm-tab-lt-gp, var(--_ctm-lt-gp)));
    display: flex;
    align-items: center;
    flex-direction: var(--_sf-jc);
    justify-content: var(--_ctm-lt-tt-an, center);
    font-size: var(
      --_ctm-mob-dn-dt-se-ft-se,
      var(--_ctm-tab-dn-dt-se-ft-se, var(--_ctm-dn-dt-se-ft-se))
    );
    color: var(--_ctm-mob-dn-dt-se-cr, var(--_ctm-tab-dn-dt-se-cr, var(--_ctm-dn-dt-se-cr)));
    background-color: var(
      --_ctm-mob-dn-dt-se-bd-cr,
      var(--_ctm-tab-dn-dt-se-bd-cr, var(--_ctm-dn-dt-se-bd-cr))
    );
    font-family: var(
      --_sf-hr-ff,
      var(--_ctm-mob-dn-dt-se-ft-fy, var(--_ctm-tab-dn-dt-se-ft-fy, var(--_ctm-dn-dt-se-ft-fy)))
    );
    text-transform: var(
      --_sf-hr-tt-tm,
      var(--_ctm-mob-dn-dt-se-tt-tm, var(--_ctm-tab-dn-dt-se-tt-tm, var(--_ctm-dn-dt-se-tt-tm)))
    );
    word-wrap: var(
      --_sf-hr-wd-wp,
      var(--_ctm-mob-dn-dt-se-wd-wp, var(--_ctm-tab-dn-dt-se-wd-wp, var(--_ctm-dn-dt-se-wd-wp)))
    );
    word-break: var(
      --_sf-hr-wd-bk,
      var(--_ctm-mob-dn-dt-se-wd-bk, var(--_ctm-tab-dn-dt-se-wd-bk, var(--_ctm-dn-dt-se-wd-bk)))
    );
    &.flex__overflow {
      white-space: normal;
      @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
    }

    font-weight: var(
      --_ctm-mob-dn-dt-se-ft-wt,
      var(--_ctm-tab-dn-dt-se-ft-wt, var(--_ctm-dn-dt-se-ft-wt))
    );
    font-style: var(
      --_ctm-mob-dn-dt-se-ft-se-ic,
      var(--_ctm-tab-dn-dt-se-ft-se-ic, var(--_ctm-dn-dt-se-ft-se-ic))
    );
    text-align: var(
      --_ctm-mob-dn-dt-se-tt-an,
      var(--_ctm-tab-dn-dt-se-tt-an, var(--_ctm-dn-dt-se-tt-an))
    );
    letter-spacing: var(
      --_ctm-mob-dn-dt-se-lr-sg,
      var(--_ctm-tab-dn-dt-se-lr-sg, var(--_ctm-dn-dt-se-lr-sg))
    );
    line-height: var(
      --_ctm-mob-dn-dt-se-le-ht,
      var(--_ctm-tab-dn-dt-se-le-ht, var(--_ctm-dn-dt-se-le-ht))
    );
    text-decoration: var(
      --_ctm-mob-dn-dt-se-ue,
      var(--_ctm-tab-dn-dt-se-ue, var(--_ctm-dn-dt-se-ue))
    );
    border-color: var(
      --_ctm-mob-dn-dt-se-br-cr,
      var(--_ctm-tab-dn-dt-se-br-cr, var(--_ctm-dn-dt-se-br-cr))
    );
    border-style: var(
      --_ctm-mob-dn-dt-se-br-se,
      var(--_ctm-tab-dn-dt-se-br-se, var(--_ctm-dn-dt-se-br-se))
    );
    border-width: var(
      --_ctm-mob-dn-dt-se-br-wh,
      var(--_ctm-tab-dn-dt-se-br-wh, var(--_ctm-dn-dt-se-br-wh))
    );
    border-radius: var(
      --_ctm-mob-dn-dt-se-br-rs,
      var(--_ctm-tab-dn-dt-se-br-rs, var(--_ctm-dn-dt-se-br-rs))
    );
    box-shadow: var(
      --_show-text-content-shadow,
      var(
          --_ctm-mob-dn-dt-se-sw-ae,
          var(--_ctm-tab-dn-dt-se-sw-ae, var(--_ctm-dn-dt-se-sw-ae, none))
        )
        var(
          --_ctm-mob-dn-dt-se-sw-br,
          var(--_ctm-tab-dn-dt-se-sw-br, var(--_ctm-dn-dt-se-sw-br, none))
        )
        var(
          --_ctm-mob-dn-dt-se-sw-sd,
          var(--_ctm-tab-dn-dt-se-sw-sd, var(--_ctm-dn-dt-se-sw-sd, none))
        )
        var(
          --_ctm-mob-dn-dt-se-sw-cr,
          var(--_ctm-tab-dn-dt-se-sw-cr, var(--_ctm-dn-dt-se-sw-cr, none))
        )
    );

    cursor: pointer;
    // padding: 6px 12px;
    padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));

    svg {
      width: var(
        --_ctm-mob-dn-dt-se-in-se,
        var(--_ctm-tab-dn-dt-se-in-se, var(--_ctm-dn-dt-se-in-se))
      );
      height: var(
        --_ctm-mob-dn-dt-se-in-se,
        var(--_ctm-tab-dn-dt-se-in-se, var(--_ctm-dn-dt-se-in-se))
      );
      path {
        stroke: var(
          --_ctm-mob-dn-dt-se-in-c1,
          var(--_ctm-tab-dn-dt-se-in-c1, var(--_ctm-dn-dt-se-in-c1))
        );
        // Overrides the stroke-width presentation attribute baked into the icon markup.
        // Stroke width is authored on the default state only — the :hover block leaves
        // it alone, so this declaration keeps applying while hovered.
        stroke-width: prepareMediaVariable(--_ctm-dn-dt-se-se-wh, 1.25);
      }
    }

    &:hover {
      // The label lives in a child (`.txt`, from ButtonComponent) which sets its own
      // typography as `var(--_sf-hr-*, <default state>)`. Declaring color/font directly
      // on the button below therefore never reached it — the child always won with the
      // default-state values, which is why the Hover state's text properties appeared
      // dead. Publishing the hover values as those custom properties is what `.txt`
      // is written to consume, and matches how product-actions.scss does it.
      --_sf-hr-cr: var(--_ctm-mob-dn-hr-se-cr, var(--_ctm-tab-dn-hr-se-cr, var(--_ctm-dn-hr-se-cr)));
      --_sf-hr-ft-fy: var(
        --_ctm-mob-dn-hr-se-ft-fy,
        var(--_ctm-tab-dn-hr-se-ft-fy, var(--_ctm-dn-hr-se-ft-fy))
      );
      --_sf-hr-tt-tm: var(
        --_ctm-mob-dn-hr-se-tt-tm,
        var(--_ctm-tab-dn-hr-se-tt-tm, var(--_ctm-dn-hr-se-tt-tm))
      );
      --_sf-hr-wd-wp: var(
        --_ctm-mob-dn-hr-se-wd-wp,
        var(--_ctm-tab-dn-hr-se-wd-wp, var(--_ctm-dn-hr-se-wd-wp))
      );
      --_sf-hr-wd-bk: var(
        --_ctm-mob-dn-hr-se-wd-bk,
        var(--_ctm-tab-dn-hr-se-wd-bk, var(--_ctm-dn-hr-se-wd-bk))
      );
      --_sf-hr-ft-se: var(
        --_ctm-mob-dn-hr-se-ft-se,
        var(--_ctm-tab-dn-hr-se-ft-se, var(--_ctm-dn-hr-se-ft-se))
      );
      --_sf-hr-ft-wt: var(
        --_ctm-mob-dn-hr-se-ft-wt,
        var(--_ctm-tab-dn-hr-se-ft-wt, var(--_ctm-dn-hr-se-ft-wt))
      );
      --_sf-hr-ft-se-ic: var(
        --_ctm-mob-dn-hr-se-ft-se-ic,
        var(--_ctm-tab-dn-hr-se-ft-se-ic, var(--_ctm-dn-hr-se-ft-se-ic))
      );
      --_sf-hr-tt-an: var(
        --_ctm-mob-dn-hr-se-tt-an,
        var(--_ctm-tab-dn-hr-se-tt-an, var(--_ctm-dn-hr-se-tt-an))
      );
      --_sf-hr-lr-sg: var(
        --_ctm-mob-dn-hr-se-lr-sg,
        var(--_ctm-tab-dn-hr-se-lr-sg, var(--_ctm-dn-hr-se-lr-sg))
      );
      --_sf-hr-le-ht: var(
        --_ctm-mob-dn-hr-se-le-ht,
        var(--_ctm-tab-dn-hr-se-le-ht, var(--_ctm-dn-hr-se-le-ht))
      );
      --_sf-hr-ue: var(--_ctm-mob-dn-hr-se-ue, var(--_ctm-tab-dn-hr-se-ue, var(--_ctm-dn-hr-se-ue)));

      background-color: var(
        --_ctm-mob-dn-hr-se-bd-cr,
        var(--_ctm-tab-dn-hr-se-bd-cr, var(--_ctm-dn-hr-se-bd-cr))
      );
      // @include BgColorLighter(var(--_thm-sy-bs-dt-se-bd-cr), 10%);
      font-size: var(
        --_ctm-mob-dn-hr-se-ft-se,
        var(--_ctm-tab-dn-hr-se-ft-se, var(--_ctm-dn-hr-se-ft-se))
      );
      color: var(--_ctm-mob-dn-hr-se-cr, var(--_ctm-tab-dn-hr-se-cr, var(--_ctm-dn-hr-se-cr)));
      font-family: var(
        --_sf-hr-ff,
        var(--_ctm-mob-dn-hr-se-ft-fy, var(--_ctm-tab-dn-hr-se-ft-fy, var(--_ctm-dn-hr-se-ft-fy)))
      );
      text-transform: var(
        --_sf-hr-tt-tm,
        var(--_ctm-mob-dn-hr-se-tt-tm, var(--_ctm-tab-dn-hr-se-tt-tm, var(--_ctm-dn-hr-se-tt-tm)))
      );
      word-wrap: var(
        --_sf-hr-wd-wp,
        var(--_ctm-mob-dn-hr-se-wd-wp, var(--_ctm-tab-dn-hr-se-wd-wp, var(--_ctm-dn-hr-se-wd-wp)))
      );
      word-break: var(
        --_sf-hr-wd-bk,
        var(--_ctm-mob-dn-hr-se-wd-bk, var(--_ctm-tab-dn-hr-se-wd-bk, var(--_ctm-dn-hr-se-wd-bk)))
      );
      font-weight: var(
        --_ctm-mob-dn-hr-se-ft-wt,
        var(--_ctm-tab-dn-hr-se-ft-wt, var(--_ctm-dn-hr-se-ft-wt))
      );
      font-style: var(
        --_ctm-mob-dn-hr-se-ft-se-ic,
        var(--_ctm-tab-dn-hr-se-ft-se-ic, var(--_ctm-dn-hr-se-ft-se-ic))
      );
      text-align: var(
        --_ctm-mob-dn-hr-se-tt-an,
        var(--_ctm-tab-dn-hr-se-tt-an, var(--_ctm-dn-hr-se-tt-an))
      );
      letter-spacing: var(
        --_ctm-mob-dn-hr-se-lr-sg,
        var(--_ctm-tab-dn-hr-se-lr-sg, var(--_ctm-dn-hr-se-lr-sg))
      );
      line-height: var(
        --_ctm-mob-dn-hr-se-le-ht,
        var(--_ctm-tab-dn-hr-se-le-ht, var(--_ctm-dn-hr-se-le-ht))
      );
      text-decoration: var(
        --_ctm-mob-dn-hr-se-ue,
        var(--_ctm-tab-dn-hr-se-ue, var(--_ctm-dn-hr-se-ue))
      );
      border-color: var(
        --_ctm-mob-dn-hr-se-br-cr,
        var(--_ctm-tab-dn-hr-se-br-cr, var(--_ctm-dn-hr-se-br-cr))
      );
      border-style: var(
        --_ctm-mob-dn-hr-se-br-se,
        var(--_ctm-tab-dn-hr-se-br-se, var(--_ctm-dn-hr-se-br-se))
      );
      border-width: var(
        --_ctm-mob-dn-hr-se-br-wh,
        var(--_ctm-tab-dn-hr-se-br-wh, var(--_ctm-dn-hr-se-br-wh))
      );
      border-radius: var(
        --_ctm-mob-dn-hr-se-br-rs,
        var(--_ctm-tab-dn-hr-se-br-rs, var(--_ctm-dn-hr-se-br-rs))
      );
      box-shadow: var(
        --_show-text-content-shadow,
        var(
            --_ctm-mob-dn-hr-se-sw-ae,
            var(--_ctm-tab-dn-hr-se-sw-ae, var(--_ctm-dn-hr-se-sw-ae, none))
          )
          var(
            --_ctm-mob-dn-hr-se-sw-br,
            var(--_ctm-tab-dn-hr-se-sw-br, var(--_ctm-dn-hr-se-sw-br, none))
          )
          var(
            --_ctm-mob-dn-hr-se-sw-sd,
            var(--_ctm-tab-dn-hr-se-sw-sd, var(--_ctm-dn-hr-se-sw-sd, none))
          )
          var(
            --_ctm-mob-dn-hr-se-sw-cr,
            var(--_ctm-tab-dn-hr-se-sw-cr, var(--_ctm-dn-hr-se-sw-cr, none))
          )
      );

      svg {
        // background-color: red;
        width: var(
          --_ctm-mob-dn-hr-se-in-se,
          var(--_ctm-tab-dn-hr-se-in-se, var(--_ctm-dn-hr-se-in-se))
        );
        height: var(
          --_ctm-mob-dn-hr-se-in-se,
          var(--_ctm-tab-dn-hr-se-in-se, var(--_ctm-dn-hr-se-in-se))
        );
        path {
          stroke: var(
            --_ctm-mob-dn-hr-se-in-c1,
            var(--_ctm-tab-dn-hr-se-in-c1, var(--_ctm-dn-hr-se-in-c1))
          );
        }
      }
    }
    // &[data-show-border="true"] {
    //   border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-dt-se-br-cr));

    //   border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-dt-se-br-se));

    //   border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-dt-se-br-wh));
    // }

    .txt {
      display: flex;

      color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-dt-se-cr));

      font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-dt-se-ft-fy));
      text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-dt-se-tt-tm));
      word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-dt-se-wd-wp));
      word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-dt-se-wd-bk));
      &.flex__overflow {
        white-space: normal;
        @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
      }

      font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-dt-se-ft-se));

      font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-dt-se-ft-wt));

      font-style: var(--_sf-hr-ft-se-ic, prepareMediaVariable(--_ctm-dn-dt-se-ft-se-ic));

      text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-dt-se-tt-an));

      letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-dt-se-lr-sg));

      line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-dt-se-le-ht));

      text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-se-ue));
      // text-decoration: var(--_ctm-mob-dn-ue, var(--_ctm-tab-dn-ue, var(--_ctm-dn-ue)));
    }

    & > span {
      display: flex;
    }
    .icon--hover {
      // position: absolute;
      // inset: 0;
      // opacity: 0;
      display: none;
      transition: opacity 0.2s ease;
    }

    &:hover .icon--hover {
      // opacity: 1;
      display: flex;
    }

    &:hover .icon--default {
      // opacity: 0;
      display: none;
    }

    .icon--hover {
      // position: absolute;
      // inset: 0;
      // opacity: 0;
      display: none;
      transition: opacity 0.2s ease;
    }

    &:hover .icon--hover {
      // opacity: 1;
      display: flex;
    }

    &:hover .icon--default {
      // opacity: 0;
      display: none;
    }

    .icon--hover {
      // position: absolute;
      // inset: 0;
      // opacity: 0;
      display: none;
      transition: opacity 0.2s ease;
    }

    &:hover .icon--hover {
      // opacity: 1;
      display: flex;
    }

    &:hover .icon--default {
      // opacity: 0;
      display: none;
    }
  }

  .add_order_menu {
    position: absolute;
    top: 120%;
    left: 0;
    width: 280px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    padding: 4px;
    z-index: 10;
    padding: 4px;
  }

  .add_order_item {
    padding: 12px;
    font-size: 16px;
    font-weight: 500;
    // color: #1f2937; // Darker text
    color: var(--_thm-cs-tt-by-tt);
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.2s;
    cursor: pointer;
    border-radius: 4px;
    white-space: nowrap;
    &:not(:last-child) {
      margin-bottom: 2px;
    }

    &:hover {
      background-color: var(--_primary-25); // Subtle blue
      color: var(--_thm-cs-tt-ls-as);

      svg path {
        stroke: var(--_thm-cs-tt-ls-as);
      }
    }

    .icon {
      font-size: 18px;
      display: flex;
      align-items: center;
    }
  }
}