@use "sass:map";
@use "sass:list";
@use "./functions.scss" as *;

[data-div-type="element"] {
  &[data-element-type="quantitySelector"] {
    // width: var(--_lt-wh);
    // height: var(--_lt-ht);
    // margin: var(--_lt-mn);
    // padding: var(--_lt-pg);
    // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
    // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
    // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
    // height: ;
    // aspect-ratio: 1 / var(--_sf-aspect-ratio);
    // --_aspect-ratio: calc(
    //   1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
    // );

    & > .wrapper {
      width: 100%;
      // height: 100%;
    }
    &[data-show-shadow="false"] {
      --_show-shadow: none;
    }
    // /* Chrome, Safari, Edge, Opera */
    // input::-webkit-outer-spin-button,
    // input::-webkit-inner-spin-button {
    //   -webkit-appearance: none;
    //   margin: 0;
    // }

    // /* Firefox */
    // input[type="number"] {
    //   -moz-appearance: textfield;
    // }
    .text-element {
      background: #6d96e4;
      padding: 10px;
      font-weight: 600;
      color: rgba(75, 69, 70, 1);
    }
    .quantity_container {
      background-color: var(
        --_ctm-mob-dn-wt-se-bd-cr,
        var(--_ctm-tab-dn-wt-se-bd-cr, var(--_ctm-dn-wt-se-bd-cr))
      );

      border-color: var(
        --_ctm-mob-dn-wt-se-br-cr,
        var(--_ctm-tab-dn-wt-se-br-cr, var(--_ctm-dn-wt-se-br-cr))
      );

      border-style: var(
        --_ctm-mob-dn-wt-se-br-se,
        var(--_ctm-tab-dn-wt-se-br-se, var(--_ctm-dn-wt-se-br-se))
      );

      border-width: var(
        --_ctm-mob-dn-wt-se-br-wh,
        var(--_ctm-tab-dn-wt-se-br-wh, var(--_ctm-dn-wt-se-br-wh))
      );

      border-radius: var(
        --_ctm-mob-dn-wt-se-br-rs,
        var(--_ctm-tab-dn-wt-se-br-rs, var(--_ctm-dn-wt-se-br-rs))
      );

      box-shadow: var(
        --_show-shadow,
        var(--_ctm-mob-dn-wt-se-sw-ae, var(--_ctm-tab-dn-wt-se-sw-ae, var(--_ctm-dn-wt-se-sw-ae)))
          var(--_ctm-mob-dn-wt-se-sw-br, var(--_ctm-tab-dn-wt-se-sw-br, var(--_ctm-dn-wt-se-sw-br)))
          var(--_ctm-mob-dn-wt-se-sw-sd, var(--_ctm-tab-dn-wt-se-sw-sd, var(--_ctm-dn-wt-se-sw-sd)))
          var(--_ctm-mob-dn-wt-se-sw-cr, var(--_ctm-tab-dn-wt-se-sw-cr, var(--_ctm-dn-wt-se-sw-cr)))
      );

      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
      gap: var(
        --_ctm-mob-lt-it-ad-mn-qy-sg,
        var(--_ctm-tab-lt-it-ad-mn-qy-sg, var(--_ctm-lt-it-ad-mn-qy-sg))
      );
      display: flex;
      flex-direction: column;
      // gap: var(
      //   --_ctm-mob-lt-te-ad-dn-sg,
      //   var(--_ctm-tab-lt-te-ad-dn-sg, var(--_ctm-lt-te-ad-dn-sg))
      // );
      .label-wrapper {
        // height:;
        display: flex;
        align-items: center;
        background-color: var(
          --_ctm-mob-dn-ll-bd-cr,
          var(--_ctm-tab-dn-ll-bd-cr, var(--_ctm-dn-ll-bd-cr))
        );

        border-color: var(
          --_ctm-mob-dn-ll-br-cr,
          var(--_ctm-tab-dn-ll-br-cr, var(--_ctm-dn-ll-br-cr))
        );

        border-style: var(
          --_ctm-mob-dn-ll-br-se,
          var(--_ctm-tab-dn-ll-br-se, var(--_ctm-dn-ll-br-se))
        );

        border-width: var(
          --_ctm-mob-dn-ll-br-wh,
          var(--_ctm-tab-dn-ll-br-wh, var(--_ctm-dn-ll-br-wh))
        );

        border-radius: var(
          --_ctm-mob-dn-ll-br-rs,
          var(--_ctm-tab-dn-ll-br-rs, var(--_ctm-dn-ll-br-rs))
        );

        box-shadow: var(
          --_show-shadow,
          var(--_ctm-mob-dn-ll-sw-ae, var(--_ctm-tab-dn-ll-sw-ae, var(--_ctm-dn-ll-sw-ae)))
            var(--_ctm-mob-dn-ll-sw-br, var(--_ctm-tab-dn-ll-sw-br, var(--_ctm-dn-ll-sw-br)))
            var(--_ctm-mob-dn-ll-sw-sd, var(--_ctm-tab-dn-ll-sw-sd, var(--_ctm-dn-ll-sw-sd)))
            var(--_ctm-mob-dn-ll-sw-cr, var(--_ctm-tab-dn-ll-sw-cr, var(--_ctm-dn-ll-sw-cr)))
        );
        .label {
          height: unset;
        }
      }

      .label {
        white-space: nowrap;
        width: 100%;
        height: 100%;

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

      .input {
        flex-grow: 1;
        outline: none;
        padding: 8px;

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

      .quantity_open_input {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        gap: var(
          --_ctm-mob-lt-ll-ad-it-sg,
          var(--_ctm-tab-lt-ll-ad-it-sg, var(--_ctm-lt-ll-ad-it-sg))
        );
        &[data-label-position="Bottom"] {
          flex-direction: column-reverse;
          align-items: flex-start;
          .label-wrapper {
            width: 100%;
          }
        }
        &[data-label-position="Top"] {
          .label-wrapper {
            width: 100%;
          }
        }
        &[data-label-position="Left"] {
          flex-direction: row;
          align-items: stretch;
        }
        &[data-label-position="Right"] {
          flex-direction: row-reverse;
          align-items: stretch;
        }
      }
      .input-wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        overflow: hidden;
        & > div {
          width: 100%;
        }

        position: relative;
        background-color: var(
          --_ctm-mob-dn-it-bd-cr,
          var(--_ctm-tab-dn-it-bd-cr, var(--_ctm-dn-it-bd-cr))
        );
        box-shadow: var(
            --_ctm-mob-dn-it-sw-ae,
            var(--_ctm-tab-dn-it-sw-ae, var(--_ctm-dn-it-sw-ae))
          )
          var(--_ctm-mob-dn-it-sw-br, var(--_ctm-tab-dn-it-sw-br, var(--_ctm-dn-it-sw-br)))
          var(--_ctm-mob-dn-it-sw-sd, var(--_ctm-tab-dn-it-sw-sd, var(--_ctm-dn-it-sw-sd)))
          var(--_ctm-mob-dn-it-sw-cr, var(--_ctm-tab-dn-it-sw-cr, var(--_ctm-dn-it-sw-cr)));
        border-radius: var(
          --_ctm-mob-dn-it-br-rs,
          var(--_ctm-tab-dn-it-br-rs, var(--_ctm-dn-it-br-rs))
        );

        border-color: var(
          --_ctm-mob-dn-it-br-cr,
          var(--_ctm-tab-dn-it-br-cr, var(--_ctm-dn-it-br-cr))
        );
        border-style: var(
          --_ctm-mob-dn-it-br-se,
          var(--_ctm-tab-dn-it-br-se, var(--_ctm-dn-it-br-se))
        );
        border-width: var(
          --_ctm-mob-dn-it-br-wh,
          var(--_ctm-tab-dn-it-br-wh, var(--_ctm-dn-it-br-wh))
        );

        padding: prepareMediaVariable(--_ctm-dn-it-pg);
        width: prepareMediaVariable(--_ctm-dn-it-wh);

        .input__dropdown {
          position: absolute;
          top: 100%;
          z-index: 10;
          border: 1px solid var(--_gray-200);
          padding: 20px;
          padding: 0px;
          margin-top: 10px;
          right: 0px;
          max-height: 150px;
          overflow-y: auto;
          border-radius: 4px;
          margin-top: 10px;

          .dropdown__option {
            padding: 8px;
            cursor: pointer;
            border-bottom: 1px solid var(--_gray-200);
            text-align: center;
            background-color: #fff;
            user-select: none;
            &:hover,
            &.active {
              background-color: var(--_primary-25);
            }
          }
        }

        .buttons {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-between;
          position: absolute;
          right: 10px;

          button {
            width: 20px;
            height: 20px;
            background: none;
            border: none;
            cursor: pointer;
            padding: 0;
            font-size: 14px;
            color: #333;

            &:hover {
              color: #000;
            }

            &:disabled {
              color: #ccc;
              cursor: not-allowed;
            }
          }
        }
      }
      .icrease-decrease {
        input {
          text-align: center;
        }
      }
      .input_dropdown {
        .input {
          min-width: 50px;
        }
        .est__dropdown {
          min-width: 50px;
        }
      }

      //Dropdown
      .est__dropdown__main {
        position: relative;
        width: 100%;
        margin-top: 0px;
        // padding: 30px;
        label {
          font-size: 14px;
          color: var(--_gray-700);
          margin-bottom: 8px;
          display: block;
        }

        .est__dropdown {
          cursor: pointer;
          position: relative;
          color: var(--_gray-700);

          // border-radius: 6px;
          // background-color: #fff;
          border: none;
          border-radius: 0;
          background-color: transparent;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: prepareMediaVariable(--_ctm-dn-dn-se-pg);

          width: prepareMediaVariable(--_ctm-dn-dn-se-wh, 100%);
          .value__selected {
            width: 100%;
            background-color: var(
              --_ctm-mob-dn-dn-se-bd-cr,
              var(--_ctm-tab-dn-dn-se-bd-cr, var(--_ctm-dn-dn-se-bd-cr))
            );

            border-color: var(
              --_ctm-mob-dn-dn-se-br-cr,
              var(--_ctm-tab-dn-dn-se-br-cr, var(--_ctm-dn-dn-se-br-cr))
            );

            border-style: var(
              --_ctm-mob-dn-dn-se-br-se,
              var(--_ctm-tab-dn-dn-se-br-se, var(--_ctm-dn-dn-se-br-se))
            );

            border-width: var(
              --_ctm-mob-dn-dn-se-br-wh,
              var(--_ctm-tab-dn-dn-se-br-wh, var(--_ctm-dn-dn-se-br-wh))
            );

            border-radius: var(
              --_ctm-mob-dn-dn-se-br-rs,
              var(--_ctm-tab-dn-dn-se-br-rs, var(--_ctm-dn-dn-se-br-rs))
            );

            box-shadow: var(
              --_show-shadow,
              var(
                  --_ctm-mob-dn-dn-se-sw-ae,
                  var(--_ctm-tab-dn-dn-se-sw-ae, var(--_ctm-dn-dn-se-sw-ae))
                )
                var(
                  --_ctm-mob-dn-dn-se-sw-br,
                  var(--_ctm-tab-dn-dn-se-sw-br, var(--_ctm-dn-dn-se-sw-br))
                )
                var(
                  --_ctm-mob-dn-dn-se-sw-sd,
                  var(--_ctm-tab-dn-dn-se-sw-sd, var(--_ctm-dn-dn-se-sw-sd))
                )
                var(
                  --_ctm-mob-dn-dn-se-sw-cr,
                  var(--_ctm-tab-dn-dn-se-sw-cr, var(--_ctm-dn-dn-se-sw-cr))
                )
            );
          }

          &.open .list {
            display: flex;
          }
          .est__dropdown__button {
            display: flex;
            align-items: center;
            width: 100%;
          }

          .est__dropdown__icon {
            position: absolute;
            // top: 10px;
            right: 5px;
          }

          .list {
            display: none;
            flex-direction: column;
            border: 1px solid var(--_gray-200);
            border-radius: 6px;
            position: absolute;
            top: 100%;
            left: 0;
            width: prepareMediaVariable(--_ctm-dn-dn-se-wh, 100%);
            background-color: #fff;
            border-radius: 4px;
            z-index: var(--_higher-zIndex);
            max-height: 200px;
            overflow-y: auto;
            margin-top: var(
              --_ctm-mob-dn-dn-se-on-ad-lt-sg,
              var(--_ctm-tab-dn-dn-se-on-ad-lt-sg, var(--_ctm-dn-dn-se-on-ad-lt-sg))
            );
            gap: var(--_ctm-mob-lt-gp-bn-is, var(--_ctm-tab-lt-gp-bn-is, var(--_ctm-lt-gp-bn-is)));

            &.top {
              bottom: 100%;
              top: auto;
            }

            .list__option {
              cursor: pointer;
              text-align: center;
            }
          }
        }
      }
      .btn__with__text {
        height: 100%;
      }

      .btn__with__text[data-btn-name="increase-button"] {
        &[data-show-shadow="false"] {
          --_show-shadow: none;
        }
        &[data-icon-position="left"] {
          --_sf-fd-bn: row;
        }
        &[data-icon-position="right"] {
          --_sf-fd-bn: row-reverse;
        }
        &[data-icon-position="center"] {
          --_sf-fd-bn: row;
        }

        &:hover {
          --_sf-hr-bd-cr: var(
            --_ctm-mob-dn-ie-bn-hr-se-bd-cr,
            var(--_ctm-tab-dn-ie-bn-hr-se-bd-cr, var(--_ctm-dn-ie-bn-hr-se-bd-cr))
          );
          --_sf-hr-br-cr: var(
            --_ctm-mob-dn-ie-bn-hr-se-br-cr,
            var(--_ctm-tab-dn-ie-bn-hr-se-br-cr, var(--_ctm-dn-ie-bn-hr-se-br-cr))
          );
          --_sf-hr-br-se: var(
            --_ctm-mob-dn-ie-bn-hr-se-br-se,
            var(--_ctm-tab-dn-ie-bn-hr-se-br-se, var(--_ctm-dn-ie-bn-hr-se-br-se))
          );
          --_sf-hr-br-wh: var(
            --_ctm-mob-dn-ie-bn-hr-se-br-wh,
            var(--_ctm-tab-dn-ie-bn-hr-se-br-wh, var(--_ctm-dn-ie-bn-hr-se-br-wh))
          );
          --_sf-hr-br-rs: var(
            --_ctm-mob-dn-ie-bn-hr-se-br-rs,
            var(--_ctm-tab-dn-ie-bn-hr-se-br-rs, var(--_ctm-dn-ie-bn-hr-se-br-rs))
          );
          --_sf-hr-at: var(
            --_ctm-mob-dn-ie-bn-hr-se-at,
            var(--_ctm-tab-dn-ie-bn-hr-se-at, var(--_ctm-dn-ie-bn-hr-se-at))
          );
          --_sf-hr-gp: var(
            --_ctm-mob-dn-ie-bn-hr-se-gp,
            var(--_ctm-tab-dn-ie-bn-hr-se-gp, var(--_ctm-dn-ie-bn-hr-se-gp))
          );

          // for shadow
          --_sf-hr-sw-ae: var(
            --_ctm-mob-dn-ie-bn-hr-se-sw-ae,
            var(--_ctm-tab-dn-ie-bn-hr-se-sw-ae, var(--_ctm-dn-ie-bn-hr-se-sw-ae))
          );
          --_sf-hr-sw-br: var(
            --_ctm-mob-dn-ie-bn-hr-se-sw-br,
            var(--_ctm-tab-dn-ie-bn-hr-se-sw-br, var(--_ctm-dn-ie-bn-hr-se-sw-br))
          );
          --_sf-hr-sw-hr: var(
            --_ctm-mob-dn-ie-bn-hr-se-sw-hr,
            var(--_ctm-tab-dn-ie-bn-hr-se-sw-hr, var(--_ctm-dn-ie-bn-hr-se-sw-hr))
          );
          --_sf-hr-sw-cr: var(
            --_ctm-mob-dn-ie-bn-hr-se-sw-cr,
            var(--_ctm-tab-dn-ie-bn-hr-se-sw-cr, var(--_ctm-dn-ie-bn-hr-se-sw-cr))
          );

          // for font

          --_sf-hr-cr: var(
            --_ctm-mob-dn-ie-bn-hr-se-cr,
            var(--_ctm-tab-dn-ie-bn-hr-se-cr, var(--_ctm-dn-ie-bn-hr-se-cr))
          );
          --_sf-hr-ft-fy: var(
            --_ctm-mob-dn-ie-bn-hr-se-ft-fy,
            var(--_ctm-tab-dn-ie-bn-hr-se-ft-fy, var(--_ctm-dn-ie-bn-hr-se-ft-fy))
          );
          --_sf-hr-tt-tm: var(
            --_ctm-mob-dn-ie-bn-hr-se-tt-tm,
            var(--_ctm-tab-dn-ie-bn-hr-se-tt-tm, var(--_ctm-dn-ie-bn-hr-se-tt-tm))
          );
          --_sf-hr-wd-wp: var(
            --_ctm-mob-dn-ie-bn-hr-se-wd-wp,
            var(--_ctm-tab-dn-ie-bn-hr-se-wd-wp, var(--_ctm-dn-ie-bn-hr-se-wd-wp))
          );
          --_sf-hr-wd-bk: var(
            --_ctm-mob-dn-ie-bn-hr-se-wd-bk,
            var(--_ctm-tab-dn-ie-bn-hr-se-wd-bk, var(--_ctm-dn-ie-bn-hr-se-wd-bk))
          );
          --_sf-hr-ft-se: var(
            --_ctm-mob-dn-ie-bn-hr-se-ft-se,
            var(--_ctm-tab-dn-ie-bn-hr-se-ft-se, var(--_ctm-dn-ie-bn-hr-se-ft-se))
          );
          --_sf-hr-ft-wt: var(
            --_ctm-mob-dn-ie-bn-hr-se-ft-wt,
            var(--_ctm-tab-dn-ie-bn-hr-se-ft-wt, var(--_ctm-dn-ie-bn-hr-se-ft-wt))
          );
          --_sf-hr-ft-se-ic: var(
            --_ctm-mob-dn-ie-bn-hr-se-ft-se-ic,
            var(--_ctm-tab-dn-ie-bn-hr-se-ft-se-ic, var(--_ctm-dn-ie-bn-hr-se-ft-se-ic))
          );
          --_sf-hr-tt-an: var(
            --_ctm-mob-dn-ie-bn-hr-se-tt-an,
            var(--_ctm-tab-dn-ie-bn-hr-se-tt-an, var(--_ctm-dn-ie-bn-hr-se-tt-an))
          );
          --_sf-hr-lr-sg: var(
            --_ctm-mob-dn-ie-bn-hr-se-lr-sg,
            var(--_ctm-tab-dn-ie-bn-hr-se-lr-sg, var(--_ctm-dn-ie-bn-hr-se-lr-sg))
          );
          --_sf-hr-le-ht: var(
            --_ctm-mob-dn-ie-bn-hr-se-le-ht,
            var(--_ctm-tab-dn-ie-bn-hr-se-le-ht, var(--_ctm-dn-ie-bn-hr-se-le-ht))
          );

          --_sf-hr-in-se: var(
            --_ctm-mob-dn-ie-bn-hr-se-in-se,
            var(--_ctm-tab-dn-ie-bn-hr-se-in-se, var(--_ctm-dn-ie-bn-hr-se-in-se))
          );
          --_sf-hr-in-se: var(
            --_ctm-mob-dn-ie-bn-hr-se-in-se,
            var(--_ctm-tab-dn-ie-bn-hr-se-in-se, var(--_ctm-dn-ie-bn-hr-se-in-se))
          );
          --_sf-hr-in-c1: var(
            --_ctm-mob-dn-ie-bn-hr-se-in-c1,
            var(--_ctm-tab-dn-ie-bn-hr-se-in-c1, var(--_ctm-dn-ie-bn-hr-se-in-c1))
          );
          --_sf-hr-ue: var(
            --_ctm-mob-dn-ie-bn-hr-se-ue,
            var(--_ctm-tab-dn-ie-bn-hr-se-ue, var(--_ctm-dn-ie-bn-hr-se-ue))
          );

          // for pading and width
          --_sf-hr-pg: var(
            --_ctm-mob-dn-ie-bn-hr-pg,
            var(--_ctm-tab-dn-ie-bn-hr-pg, var(--_ctm-dn-ie-bn-hr-pg))
          );
          --_sf-hr-wh: var(
            --_ctm-mob-dn-ie-bn-hr-wh,
            var(--_ctm-tab-dn-ie-bn-hr-wh, var(--_ctm-dn-ie-bn-hr-wh))
          );

          &[data-hover-show-shadow="false"] {
            --_hover-show-shadow: none;
          }
          &[data-hover-show-icon="false"] {
            --_hover-show-icon: none;
          }
        }
        background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-bd-cr));

        padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-pg));
        width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-wh));
        display: flex;
        flex-direction: var(--_sf-fd-bn);
        align-items: center;

        justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-at));
        gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-gp));

        border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-br-rs));

        box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-sw-ae))
          var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-sw-br))
          var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-sw-sd))
          var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-sw-cr));

        &[data-show-border="true"] {
          border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-br-cr));

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

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

        .txt {
          display: flex;

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

          font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-ft-fy));
          text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-tt-tm));
          word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-wd-wp));
          word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-ie-bn-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-ie-bn-dt-se-ft-se));

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

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

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

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

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

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

        .icon {
          display: var(--_hover-show-icon, var(--_show-icon, flex));
          svg {
            width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-in-se));
            height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-in-se));

            path {
              stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-in-c1));
              // Overrides the stroke-width presentation attribute baked into the icon markup.
              stroke-width: prepareMediaVariable(--_ctm-dn-ie-bn-dt-se-se-wh, 1.25);
            }
          }
        }
        [data-element-style="Text"] {
          display: inline-block;
          width: 100%;
        }

        .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;
        }
      }

      .btn__with__text[data-btn-name="decrease-button"] {
        &[data-show-shadow="false"] {
          --_show-shadow: none;
        }
        &[data-icon-position="left"] {
          --_sf-fd-bn: row;
        }
        &[data-icon-position="right"] {
          --_sf-fd-bn: row-reverse;
        }
        &[data-icon-position="center"] {
          --_sf-fd-bn: row;
        }
        &:disabled {
          opacity: 0.5;
          cursor: not-allowed;
        }
        &:hover {
          --_sf-hr-bd-cr: var(
            --_ctm-mob-dn-de-bn-hr-se-bd-cr,
            var(--_ctm-tab-dn-de-bn-hr-se-bd-cr, var(--_ctm-dn-de-bn-hr-se-bd-cr))
          );
          --_sf-hr-br-cr: var(
            --_ctm-mob-dn-de-bn-hr-se-br-cr,
            var(--_ctm-tab-dn-de-bn-hr-se-br-cr, var(--_ctm-dn-de-bn-hr-se-br-cr))
          );
          --_sf-hr-br-se: var(
            --_ctm-mob-dn-de-bn-hr-se-br-se,
            var(--_ctm-tab-dn-de-bn-hr-se-br-se, var(--_ctm-dn-de-bn-hr-se-br-se))
          );
          --_sf-hr-br-wh: var(
            --_ctm-mob-dn-de-bn-hr-se-br-wh,
            var(--_ctm-tab-dn-de-bn-hr-se-br-wh, var(--_ctm-dn-de-bn-hr-se-br-wh))
          );
          --_sf-hr-br-rs: var(
            --_ctm-mob-dn-de-bn-hr-se-br-rs,
            var(--_ctm-tab-dn-de-bn-hr-se-br-rs, var(--_ctm-dn-de-bn-hr-se-br-rs))
          );
          --_sf-hr-at: var(
            --_ctm-mob-dn-de-bn-hr-se-at,
            var(--_ctm-tab-dn-de-bn-hr-se-at, var(--_ctm-dn-de-bn-hr-se-at))
          );
          --_sf-hr-gp: var(
            --_ctm-mob-dn-de-bn-hr-se-gp,
            var(--_ctm-tab-dn-de-bn-hr-se-gp, var(--_ctm-dn-de-bn-hr-se-gp))
          );

          // for shadow
          --_sf-hr-sw-ae: var(
            --_ctm-mob-dn-de-bn-hr-se-sw-ae,
            var(--_ctm-tab-dn-de-bn-hr-se-sw-ae, var(--_ctm-dn-de-bn-hr-se-sw-ae))
          );
          --_sf-hr-sw-br: var(
            --_ctm-mob-dn-de-bn-hr-se-sw-br,
            var(--_ctm-tab-dn-de-bn-hr-se-sw-br, var(--_ctm-dn-de-bn-hr-se-sw-br))
          );
          --_sf-hr-sw-hr: var(
            --_ctm-mob-dn-de-bn-hr-se-sw-hr,
            var(--_ctm-tab-dn-de-bn-hr-se-sw-hr, var(--_ctm-dn-de-bn-hr-se-sw-hr))
          );
          --_sf-hr-sw-cr: var(
            --_ctm-mob-dn-de-bn-hr-se-sw-cr,
            var(--_ctm-tab-dn-de-bn-hr-se-sw-cr, var(--_ctm-dn-de-bn-hr-se-sw-cr))
          );

          // for font

          --_sf-hr-cr: var(
            --_ctm-mob-dn-de-bn-hr-se-cr,
            var(--_ctm-tab-dn-de-bn-hr-se-cr, var(--_ctm-dn-de-bn-hr-se-cr))
          );
          --_sf-hr-ft-fy: var(
            --_ctm-mob-dn-de-bn-hr-se-ft-fy,
            var(--_ctm-tab-dn-de-bn-hr-se-ft-fy, var(--_ctm-dn-de-bn-hr-se-ft-fy))
          );
          --_sf-hr-tt-tm: var(
            --_ctm-mob-dn-de-bn-hr-se-tt-tm,
            var(--_ctm-tab-dn-de-bn-hr-se-tt-tm, var(--_ctm-dn-de-bn-hr-se-tt-tm))
          );
          --_sf-hr-wd-wp: var(
            --_ctm-mob-dn-de-bn-hr-se-wd-wp,
            var(--_ctm-tab-dn-de-bn-hr-se-wd-wp, var(--_ctm-dn-de-bn-hr-se-wd-wp))
          );
          --_sf-hr-wd-bk: var(
            --_ctm-mob-dn-de-bn-hr-se-wd-bk,
            var(--_ctm-tab-dn-de-bn-hr-se-wd-bk, var(--_ctm-dn-de-bn-hr-se-wd-bk))
          );
          --_sf-hr-ft-se: var(
            --_ctm-mob-dn-de-bn-hr-se-ft-se,
            var(--_ctm-tab-dn-de-bn-hr-se-ft-se, var(--_ctm-dn-de-bn-hr-se-ft-se))
          );
          --_sf-hr-ft-wt: var(
            --_ctm-mob-dn-de-bn-hr-se-ft-wt,
            var(--_ctm-tab-dn-de-bn-hr-se-ft-wt, var(--_ctm-dn-de-bn-hr-se-ft-wt))
          );
          --_sf-hr-ft-se-ic: var(
            --_ctm-mob-dn-de-bn-hr-se-ft-se-ic,
            var(--_ctm-tab-dn-de-bn-hr-se-ft-se-ic, var(--_ctm-dn-de-bn-hr-se-ft-se-ic))
          );
          --_sf-hr-tt-an: var(
            --_ctm-mob-dn-de-bn-hr-se-tt-an,
            var(--_ctm-tab-dn-de-bn-hr-se-tt-an, var(--_ctm-dn-de-bn-hr-se-tt-an))
          );
          --_sf-hr-lr-sg: var(
            --_ctm-mob-dn-de-bn-hr-se-lr-sg,
            var(--_ctm-tab-dn-de-bn-hr-se-lr-sg, var(--_ctm-dn-de-bn-hr-se-lr-sg))
          );
          --_sf-hr-le-ht: var(
            --_ctm-mob-dn-de-bn-hr-se-le-ht,
            var(--_ctm-tab-dn-de-bn-hr-se-le-ht, var(--_ctm-dn-de-bn-hr-se-le-ht))
          );

          --_sf-hr-in-se: var(
            --_ctm-mob-dn-de-bn-hr-se-in-se,
            var(--_ctm-tab-dn-de-bn-hr-se-in-se, var(--_ctm-dn-de-bn-hr-se-in-se))
          );
          --_sf-hr-in-se: var(
            --_ctm-mob-dn-de-bn-hr-se-in-se,
            var(--_ctm-tab-dn-de-bn-hr-se-in-se, var(--_ctm-dn-de-bn-hr-se-in-se))
          );
          --_sf-hr-in-c1: var(
            --_ctm-mob-dn-de-bn-hr-se-in-c1,
            var(--_ctm-tab-dn-de-bn-hr-se-in-c1, var(--_ctm-dn-de-bn-hr-se-in-c1))
          );
          --_sf-hr-ue: var(
            --_ctm-mob-dn-de-bn-hr-se-ue,
            var(--_ctm-tab-dn-de-bn-hr-se-ue, var(--_ctm-dn-de-bn-hr-se-ue))
          );

          // for pading and width
          --_sf-hr-pg: var(
            --_ctm-mob-dn-de-bn-hr-pg,
            var(--_ctm-tab-dn-de-bn-hr-pg, var(--_ctm-dn-de-bn-hr-pg))
          );
          --_sf-hr-wh: var(
            --_ctm-mob-dn-de-bn-hr-wh,
            var(--_ctm-tab-dn-de-bn-hr-wh, var(--_ctm-dn-de-bn-hr-wh))
          );

          &[data-hover-show-shadow="false"] {
            --_hover-show-shadow: none;
          }
          &[data-hover-show-icon="false"] {
            --_hover-show-icon: none;
          }
        }
        background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-bd-cr));

        padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-pg));
        width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-wh));
        display: flex;
        flex-direction: var(--_sf-fd-bn);
        align-items: center;

        justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-at));
        gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-gp));

        border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-br-rs));

        box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-sw-ae))
          var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-sw-br))
          var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-sw-sd))
          var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-sw-cr));

        &[data-show-border="true"] {
          border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-br-cr));

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

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

        .txt {
          display: flex;

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

          font-family: var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-ft-fy));
          text-transform: var(--_sf-hr-tt-tm, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-tt-tm));
          word-wrap: var(--_sf-hr-wd-wp, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-wd-wp));
          word-break: var(--_sf-hr-wd-bk, prepareMediaVariable(--_ctm-dn-de-bn-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-de-bn-dt-se-ft-se));

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

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

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

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

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

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

        .icon {
          display: var(--_hover-show-icon, var(--_show-icon, flex));
          svg {
            width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-in-se));
            height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-in-se));

            path {
              stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-de-bn-dt-se-in-c1));
              // Overrides the stroke-width presentation attribute baked into the icon markup.
              stroke-width: prepareMediaVariable(--_ctm-dn-de-bn-dt-se-se-wh, 1.25);
            }
          }
        }
        [data-element-style="Text"] {
          display: inline-block;
          width: 100%;
        }

        .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;
        }
      }

      .minimum__order__qty {
        white-space: nowrap;

        height: 100%;
        width: 100%;
        text-wrap: auto;

        background-color: var(
          --_ctm-mob-dn-mm-or-qy-bd-cr,
          var(--_ctm-tab-dn-mm-or-qy-bd-cr, var(--_ctm-dn-mm-or-qy-bd-cr))
        );

        border-color: var(
          --_ctm-mob-dn-mm-or-qy-br-cr,
          var(--_ctm-tab-dn-mm-or-qy-br-cr, var(--_ctm-dn-mm-or-qy-br-cr))
        );

        border-style: var(
          --_ctm-mob-dn-mm-or-qy-br-se,
          var(--_ctm-tab-dn-mm-or-qy-br-se, var(--_ctm-dn-mm-or-qy-br-se))
        );

        border-width: var(
          --_ctm-mob-dn-mm-or-qy-br-wh,
          var(--_ctm-tab-dn-mm-or-qy-br-wh, var(--_ctm-dn-mm-or-qy-br-wh))
        );

        border-radius: var(
          --_ctm-mob-dn-mm-or-qy-br-rs,
          var(--_ctm-tab-dn-mm-or-qy-br-rs, var(--_ctm-dn-mm-or-qy-br-rs))
        );

        box-shadow: var(
          --_show-shadow,
          var(
              --_ctm-mob-dn-mm-or-qy-sw-ae,
              var(--_ctm-tab-dn-mm-or-qy-sw-ae, var(--_ctm-dn-mm-or-qy-sw-ae))
            )
            var(
              --_ctm-mob-dn-mm-or-qy-sw-br,
              var(--_ctm-tab-dn-mm-or-qy-sw-br, var(--_ctm-dn-mm-or-qy-sw-br))
            )
            var(
              --_ctm-mob-dn-mm-or-qy-sw-sd,
              var(--_ctm-tab-dn-mm-or-qy-sw-sd, var(--_ctm-dn-mm-or-qy-sw-sd))
            )
            var(
              --_ctm-mob-dn-mm-or-qy-sw-cr,
              var(--_ctm-tab-dn-mm-or-qy-sw-cr, var(--_ctm-dn-mm-or-qy-sw-cr))
            )
        );

        color: var(
          --_ctm-mob-dn-mm-or-qy-cr,
          var(--_ctm-tab-dn-mm-or-qy-cr, var(--_ctm-dn-mm-or-qy-cr))
        );
        font-family: var(
          --_ctm-mob-dn-mm-or-qy-ft-fy,
          var(--_ctm-tab-dn-mm-or-qy-ft-fy, var(--_ctm-dn-mm-or-qy-ft-fy))
        );
        text-transform: var(
          --_ctm-mob-dn-mm-or-qy-tt-tm,
          var(--_ctm-tab-dn-mm-or-qy-tt-tm, var(--_ctm-dn-mm-or-qy-tt-tm))
        );
        word-wrap: var(
          --_ctm-mob-dn-mm-or-qy-wd-wp,
          var(--_ctm-tab-dn-mm-or-qy-wd-wp, var(--_ctm-dn-mm-or-qy-wd-wp))
        );
        word-break: var(
          --_ctm-mob-dn-mm-or-qy-wd-bk,
          var(--_ctm-tab-dn-mm-or-qy-wd-bk, var(--_ctm-dn-mm-or-qy-wd-bk))
        );
        font-size: var(
          --_ctm-mob-dn-mm-or-qy-ft-se,
          var(--_ctm-tab-dn-mm-or-qy-ft-se, var(--_ctm-dn-mm-or-qy-ft-se))
        );
        font-weight: var(
          --_ctm-mob-dn-mm-or-qy-ft-wt,
          var(--_ctm-tab-dn-mm-or-qy-ft-wt, var(--_ctm-dn-mm-or-qy-ft-wt))
        );
        font-style: var(
          --_ctm-mob-dn-mm-or-qy-ft-se-ic,
          var(--_ctm-tab-dn-mm-or-qy-ft-se-ic, var(--_ctm-dn-mm-or-qy-ft-se-ic))
        );
        text-align: var(
          --_ctm-mob-dn-mm-or-qy-tt-an,
          var(--_ctm-tab-dn-mm-or-qy-tt-an, var(--_ctm-dn-mm-or-qy-tt-an))
        );
        letter-spacing: var(
          --_ctm-mob-dn-mm-or-qy-lr-sg,
          var(--_ctm-tab-dn-mm-or-qy-lr-sg, var(--_ctm-dn-mm-or-qy-lr-sg))
        );
        line-height: var(
          --_ctm-mob-dn-mm-or-qy-le-ht,
          var(--_ctm-tab-dn-mm-or-qy-le-ht, var(--_ctm-dn-mm-or-qy-le-ht-dc))
        );
        text-decoration: var(
          --_ctm-mob-dn-mm-or-qy-ue,
          var(--_ctm-tab-dn-mm-or-qy-ue, var(--_ctm-dn-mm-or-qy-ue))
        );
        padding: prepareMediaVariable(--_ctm-dn-mm-or-qy-pg);
      }
    }
  }
}