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

[data-div-type="element"] {
  &[data-element-type="cartAttributes"] {
    // width: var(
    //   --_ctm-mob-ele-nw-wh-st-mx,
    //   var(
    //     --_ctm-tab-ele-nw-wh-st-mx,
    //     var(--_sf-el-wh-st-mx, calc(1% * 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)));

    height: max-content;
    min-width: 240px;

    // aspect-ratio: var(
    //   --_ctm-mob-aspect-ratio,
    //   var(--_ctm-tab-aspect-ratio, var(--_sf-aspect-ratio))
    // );

    & > .wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 100%;
      max-width: 100%;
      height: auto;
    }

    .cart__section {
      display: flex;
      align-items: center;
      cursor: pointer;
      gap: 8px;
    }
    .cart-attribute-container {
      width: 100%;
      display: flex;
      flex-direction: column;
      background-color: var(
        --_ctm-mob-dn-as-wt-bd-cr,
        var(--_ctm-tab-dn-as-wt-bd-cr, var(--_ctm-dn-as-wt-bd-cr))
      );
      padding: var(--_ctm-mob-dn-as-wt-pg, var(--_ctm-tab-dn-as-wt-pg, var(--_ctm-dn-as-wt-pg)));
      border-color: var(
        --_ctm-mob-dn-as-wt-br-cr,
        var(--_ctm-tab-dn-as-wt-br-cr, var(--_ctm-dn-as-wt-br-cr))
      );
      border-style: var(
        --_ctm-mob-dn-as-wt-br-se,
        var(--_ctm-tab-dn-as-wt-br-se, var(--_ctm-dn-as-wt-br-se))
      );
      border-width: var(
        --_ctm-mob-dn-as-wt-br-wh,
        var(--_ctm-tab-dn-as-wt-br-wh, var(--_ctm-dn-as-wt-br-wh))
      );
      border-radius: var(
        --_ctm-mob-dn-as-wt-br-rs,
        var(--_ctm-tab-dn-as-wt-br-rs, var(--_ctm-dn-as-wt-br-rs))
      );
      box-shadow: var(
          --_ctm-mob-dn-as-wt-sw-ae,
          var(--_ctm-tab-dn-as-wt-sw-ae, var(--_ctm-dn-as-wt-sw-ae))
        )
        var(
          --_ctm-mob-dn--as-wt-sw-br,
          var(--_ctm-tab-dn--as-wt-sw-br, var(--_ctm-dn--as-wt-sw-br))
        )
        var(--_ctm-mob-dn-as-wt-sw-sd, var(--_ctm-tab-dn-as-wt-sw-sd, var(--_ctm-dn-as-wt-sw-sd)))
        var(--_ctm-mob-dn-as-wt-sw-cr, var(--_ctm-tab-dn-as-wt-sw-cr, var(--_ctm-dn-as-wt-sw-cr)));
    }
    .cart-attribute-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: var(
        --_ctm-mob-dn-as-hr-bd-cr,
        var(--_ctm-tab-dn-as-hr-bd-cr, var(--_ctm-dn-as-hr-bd-cr))
      );
      padding: var(--_ctm-mob-dn-as-hr-pg, var(--_ctm-tab-dn-as-hr-pg, var(--_ctm-dn-as-hr-pg)));
      border-color: var(
        --_ctm-mob-dn-as-hr-br-cr,
        var(--_ctm-tab-dn-as-hr-br-cr, var(--_ctm-dn-as-hr-br-cr))
      );
      border-style: var(
        --_ctm-mob-dn-as-hr-br-se,
        var(--_ctm-tab-dn-as-hr-br-se, var(--_ctm-dn-as-hr-br-se))
      );
      border-width: var(
        --_ctm-mob-dn-as-hr-br-wh,
        var(--_ctm-tab-dn-as-hr-br-wh, var(--_ctm-dn-as-hr-br-wh))
      );
      border-radius: var(
        --_ctm-mob-dn-as-hr-br-rs,
        var(--_ctm-tab-dn-as-hr-br-rs, var(--_ctm-dn-as-hr-br-rs))
      );
      .cart_attribute_title {
        font-family: var(
          --_ctm-mob-dn-as-hr-ft-fy,
          var(--_ctm-tab-dn-as-hr-ft-fy, var(--_ctm-dn-as-hr-ft-fy))
        );
        text-transform: var(
          --_ctm-mob-dn-as-hr-tt-tm,
          var(--_ctm-tab-dn-as-hr-tt-tm, var(--_ctm-dn-as-hr-tt-tm))
        );
        word-wrap: var(
          --_ctm-mob-dn-as-hr-wd-wp,
          var(--_ctm-tab-dn-as-hr-wd-wp, var(--_ctm-dn-as-hr-wd-wp))
        );
        word-break: var(
          --_ctm-mob-dn-as-hr-wd-bk,
          var(--_ctm-tab-dn-as-hr-wd-bk, var(--_ctm-dn-as-hr-wd-bk))
        );
        color: var(--_ctm-mob-dn-as-hr-cr, var(--_ctm-tab-dn-as-hr-cr, var(--_ctm-dn-as-hr-cr)));
        font-weight: var(
          --_ctm-mob-dn-as-hr-ft-wt,
          var(--_ctm-tab-dn-as-hr-ft-wt, var(--_ctm-dn-as-hr-ft-wt))
        );
        font-size: var(
          --_ctm-mob-dn-as-hr-ft-se,
          var(--_ctm-tab-dn-as-hr-ft-se, var(--_ctm-dn-as-hr-ft-se))
        );
        text-decoration: var(
          --_ctm-mob-dn-as-hr-ue,
          var(--_ctm-tab-dn-as-hr-ue, var(--_ctm-dn-as-hr-ue))
        );
        letter-spacing: var(
          --_ctm-mob-dn-as-hr-lr-sg,
          var(--_ctm-tab-dn-as-hr-lr-sg, var(--_ctm-dn-as-hr-lr-sg))
        );
        line-height: var(
          --_ctm-mob-dn-as-hr-le-ht,
          var(--_ctm-tab-dn-as-hr-le-ht, var(--_ctm-dn-as-hr-le-ht))
        );
        font-style: var(
          --_ctm-mob-dn-as-hr-ft-se-ic,
          var(--_ctm-tab-dn-as-hr-ft-se-ic, var(--_ctm-dn-as-hr-ft-se-ic))
        );
        text-align: var(
          --_ctm-mob-dn-as-hr-tt-an,
          var(--_ctm-tab-dn-as-hr-tt-an, var(--_ctm-dn-as-hr-tt-an))
        );
      }
      .icon svg {
        path {
          stroke: var(
            --_ctm-mob-dn-an-as-im-in-c1,
            var(--_ctm-tab-dn-an-as-im-in-c1, var(--_ctm-dn-an-as-im-in-c1))
          );
          // Overrides the stroke-width presentation attribute baked into the icon markup.
          stroke-width: prepareMediaVariable(--_ctm-dn-an-as-im-se-wh, 1.25);
        }
        width: var(
          --_ctm-mob-dn-an-as-im-in-se,
          var(--_ctm-tab-dn-an-as-im-in-se, var(--_ctm-dn-an-as-im-in-se))
        );
        height: var(
          --_ctm-mob-dn-an-as-im-in-se,
          var(--_ctm-tab-dn-an-as-im-in-se, var(--_ctm-dn-an-as-im-in-se))
        );
      }

      .iconDesc svg {
        path {
          stroke: var(
            --_ctm-mob-dn-an-as-im-in-c1-dc,
            var(--_ctm-tab-dn-an-as-im-in-c1-dc, var(--_ctm-dn-an-as-im-in-c1-dc))
          );
          // Overrides the stroke-width presentation attribute baked into the icon markup.
          stroke-width: prepareMediaVariable(--_ctm-dn-an-as-im-se-wh, 1.25);
        }
        width: var(
          --_ctm-mob-dn-an-as-im-in-se-dc,
          var(--_ctm-tab-dn-an-as-im-in-se-dc, var(--_ctm-dn-an-as-im-in-se-dc))
        );
        height: var(
          --_ctm-mob-dn-an-as-im-in-se-dc,
          var(--_ctm-tab-dn-an-as-im-in-se-dc, var(--_ctm-dn-an-as-im-in-se-dc))
        );
      }
    }
    .attributes-section-body {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      overflow-y: auto;
      background-color: var(
        --_ctm-mob-dn-as-cr-ae-is-wr-bd-cr,
        var(--_ctm-tab-dn-as-cr-ae-is-wr-bd-cr, var(--_ctm-dn-as-cr-ae-is-wr-bd-cr))
      );
      padding: var(
        --_ctm-mob-dn-as-cr-ae-is-wr-pg,
        var(--_ctm-tab-dn-as-cr-ae-is-wr-pg, var(--_ctm-dn-as-cr-ae-is-wr-pg))
      );
      gap: var(
        --_ctm-mob-dn-as-cr-ae-is-wr-im-gp,
        var(--_ctm-tab-dn-as-cr-ae-is-wr-im-gp, var(--_ctm-dn-as-cr-ae-is-wr-im-gp))
      );
      border-color: var(
        --_ctm-mob-dn-as-cr-ae-is-wr-br-cr,
        var(--_ctm-tab-dn-as-cr-ae-is-wr-br-cr, var(--_ctm-dn-as-cr-ae-is-wr-br-cr))
      );
      border-style: var(
        --_ctm-mob-dn-as-cr-ae-is-wr-br-se,
        var(--_ctm-tab-dn-as-cr-ae-is-wr-br-se, var(--_ctm-dn-as-cr-ae-is-wr-br-se))
      );
      border-width: var(
        --_ctm-mob-dn-as-cr-ae-is-wr-br-wh,
        var(--_ctm-tab-dn-as-cr-ae-is-wr-br-wh, var(--_ctm-dn-as-cr-ae-is-wr-br-wh))
      );
      border-radius: var(
        --_ctm-mob-dn-as-cr-ae-is-wr-br-rs,
        var(--_ctm-tab-dn-as-cr-ae-is-wr-br-rs, var(--_ctm-dn-as-cr-ae-is-wr-br-rs))
      );
      .attriTitle {
        // font-weight: 600;
        // font-size: 14px;
        // line-height: 20px;
        // color: #101828;
        // padding-bottom: 6px;
        font-family: prepareMediaVariable(--_ctm-dn-as-cr-as-te-ft-fy);
        text-transform: prepareMediaVariable(--_ctm-dn-as-cr-as-te-tt-tm);
        word-wrap: prepareMediaVariable(--_ctm-dn-as-cr-as-te-wd-wp);
        word-break: prepareMediaVariable(--_ctm-dn-as-cr-as-te-wd-bk);
        color: prepareMediaVariable(--_ctm-dn-as-cr-as-te-cr);
        font-weight: prepareMediaVariable(--_ctm-dn-as-cr-as-te-ft-wt);
        font-size: prepareMediaVariable(--_ctm-dn-as-cr-as-te-ft-se);
        text-decoration: prepareMediaVariable(--_ctm-dn-as-cr-as-te-ue);
        letter-spacing: prepareMediaVariable(--_ctm-dn-as-cr-as-te-lr-sg);
        line-height: prepareMediaVariable(--_ctm-dn-as-cr-as-te-le-ht);
        font-style: prepareMediaVariable(--_ctm-dn-as-cr-as-te-ft-se-ic);
        text-align: prepareMediaVariable(--_ctm-dn-as-cr-as-te-tt-an);
        padding: prepareMediaVariable(--_ctm-dn-as-cr-as-te-pg);
      }
      .attriDes {
        // font-weight: 400;
        // font-size: 14px;
        // line-height: 20px;
        font-family: prepareMediaVariable(--_ctm-dn-as-cr-as-in-ft-fy);
        text-transform: prepareMediaVariable(--_ctm-dn-as-cr-as-in-tt-tm);
        word-wrap: prepareMediaVariable(--_ctm-dn-as-cr-as-in-wd-wp);
        word-break: prepareMediaVariable(--_ctm-dn-as-cr-as-in-wd-bk);
        color: prepareMediaVariable(--_ctm-dn-as-cr-as-in-cr);
        font-weight: prepareMediaVariable(--_ctm-dn-as-cr-as-in-ft-wt);
        font-size: prepareMediaVariable(--_ctm-dn-as-cr-as-in-ft-se);
        text-decoration: prepareMediaVariable(--_ctm-dn-as-cr-as-in-ue);
        letter-spacing: prepareMediaVariable(--_ctm-dn-as-cr-as-in-lr-sg);
        line-height: prepareMediaVariable(--_ctm-dn-as-cr-as-in-le-ht);
        font-style: prepareMediaVariable(--_ctm-dn-as-cr-as-in-ft-se-ic);
        text-align: prepareMediaVariable(--_ctm-dn-as-cr-as-in-tt-an);
        padding: prepareMediaVariable(--_ctm-dn-as-cr-as-in-pg);
      }
      .attribute {
        width: 100%;
        display: flex;
        flex-direction: column;
        padding: var(
          --_ctm-mob-dn-as-cr-as-fs-pg,
          var(--_ctm-tab-dn-as-cr-as-fs-pg, var(--_ctm-dn-as-cr-as-fs-pg))
        );
        gap: var(
          --_ctm-mob-dn-as-cr-as-fs-im-gp,
          var(--_ctm-tab-dn-as-cr-as-fs-im-gp, var(--_ctm-dn-as-cr-as-fs-im-gp))
        );
        .label {
          display: block;
          padding: var(
            --_ctm-mob-dn-as-cr-as-ls-pg,
            var(--_ctm-tab-dn-as-cr-as-ls-pg, var(--_ctm-dn-as-cr-as-ls-pg))
          );
          font-family: var(
            --_ctm-mob-dn-as-cr-as-ls-ft-fy,
            var(--_ctm-tab-dn-as-cr-as-ls-ft-fy, var(--_ctm-dn-as-cr-as-ls-ft-fy))
          );
          text-transform: var(
            --_ctm-mob-dn-as-cr-as-ls-tt-tm,
            var(--_ctm-tab-dn-as-cr-as-ls-tt-tm, var(--_ctm-dn-as-cr-as-ls-tt-tm))
          );
          word-wrap: var(
            --_ctm-mob-dn-as-cr-as-ls-wd-wp,
            var(--_ctm-tab-dn-as-cr-as-ls-wd-wp, var(--_ctm-dn-as-cr-as-ls-wd-wp))
          );
          word-break: var(
            --_ctm-mob-dn-as-cr-as-ls-wd-bk,
            var(--_ctm-tab-dn-as-cr-as-ls-wd-bk, var(--_ctm-dn-as-cr-as-ls-wd-bk))
          );
          &.flex__overflow {
            white-space: normal;
            @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
          }
          color: var(
            --_ctm-mob-dn-as-cr-as-ls-cr,
            var(--_ctm-tab-dn-as-cr-as-ls-cr, var(--_ctm-dn-as-cr-as-ls-cr))
          );
          font-weight: var(
            --_ctm-mob-dn-as-cr-as-ls-ft-wt,
            var(--_ctm-tab-dn-as-cr-as-ls-ft-wt, var(--_ctm-dn-as-cr-as-ls-ft-wt))
          );
          font-size: var(
            --_ctm-mob-dn-as-cr-as-ls-ft-se,
            var(--_ctm-tab-dn-as-cr-as-ls-ft-se, var(--_ctm-dn-as-cr-as-ls-ft-se))
          );
          text-decoration: var(
            --_ctm-mob-dn-as-cr-as-ls-ue,
            var(--_ctm-tab-dn-as-cr-as-ls-ue, var(--_ctm-dn-as-cr-as-ls-ue))
          );
          letter-spacing: var(
            --_ctm-mob-dn-as-cr-as-ls-lr-sg,
            var(--_ctm-tab-dn-as-cr-as-ls-lr-sg, var(--_ctm-dn-as-cr-as-ls-lr-sg))
          );
          line-height: var(
            --_ctm-mob-dn-as-cr-as-ls-le-ht,
            var(--_ctm-tab-dn-as-cr-as-ls-le-ht, var(--_ctm-dn-as-cr-as-ls-le-ht))
          );
          font-style: var(
            --_ctm-mob-dn-as-cr-as-ls-ft-se-ic,
            var(--_ctm-tab-dn-as-cr-as-ls-ft-se-ic, var(--_ctm-dn-as-cr-as-ls-ft-se-ic))
          );
          text-align: var(
            --_ctm-mob-dn-as-cr-as-ls-tt-an,
            var(--_ctm-tab-dn-as-cr-as-ls-tt-an, var(--_ctm-dn-as-cr-as-ls-tt-an))
          );
          &.required::after {
            content: " *";
            color: var(--_error-500);
          }
        }
        .attribute_field {
          width: 100% !important;
          input {
            background-color: var(
              --_ctm-mob-dn-as-cr-as-is-bd-cr,
              var(--_ctm-tab-dn-as-cr-as-is-bd-cr, var(--_ctm-dn-as-cr-as-is-bd-cr))
            );
            padding: var(
              --_ctm-mob-dn-as-cr-as-is-pg,
              var(--_ctm-tab-dn-as-cr-as-is-pg, var(--_ctm-dn-as-cr-as-is-pg))
            );
            gap: var(
              --_ctm-mob-dn-as-cr-as-is-im-gp,
              var(--_ctm-tab-dn-as-cr-as-is-im-gp, var(--_ctm-dn-as-cr-as-is-im-gp))
            );
            border-color: var(
              --_ctm-mob-dn-as-cr-as-is-br-cr,
              var(--_ctm-tab-dn-as-cr-as-is-br-cr, var(--_ctm-dn-as-cr-as-is-br-cr))
            );
            border-style: var(
              --_ctm-mob-dn-as-cr-as-is-br-se,
              var(--_ctm-tab-dn-as-cr-as-is-br-se, var(--_ctm-dn-as-cr-as-is-br-se))
            );
            border-width: var(
              --_ctm-mob-dn-as-cr-as-is-br-wh,
              var(--_ctm-tab-dn-as-cr-as-is-br-wh, var(--_ctm-dn-as-cr-as-is-br-wh))
            );
            border-radius: var(
              --_ctm-mob-dn-as-cr-as-is-br-rs,
              var(--_ctm-tab-dn-as-cr-as-is-br-rs, var(--_ctm-dn-as-cr-as-is-br-rs))
            );
            &::placeholder {
              font-family: var(
                --_ctm-mob-dn-as-cr-as-is-ft-fy,
                var(--_ctm-tab-dn-as-cr-as-is-ft-fy, var(--_ctm-dn-as-cr-as-is-ft-fy))
              );
              text-transform: var(
                --_ctm-mob-dn-as-cr-as-is-tt-tm,
                var(--_ctm-tab-dn-as-cr-as-is-tt-tm, var(--_ctm-dn-as-cr-as-is-tt-tm))
              );
              word-wrap: var(
                --_ctm-mob-dn-as-cr-as-is-wd-wp,
                var(--_ctm-tab-dn-as-cr-as-is-wd-wp, var(--_ctm-dn-as-cr-as-is-wd-wp))
              );
              word-break: var(
                --_ctm-mob-dn-as-cr-as-is-wd-bk,
                var(--_ctm-tab-dn-as-cr-as-is-wd-bk, var(--_ctm-dn-as-cr-as-is-wd-bk))
              );
              color: var(--_thm-cs-be-se-1);
              font-weight: var(
                --_ctm-mob-dn-as-cr-as-is-ft-wt,
                var(--_ctm-tab-dn-as-cr-as-is-ft-wt, var(--_ctm-dn-as-cr-as-is-ft-wt))
              );
              font-size: var(
                --_ctm-mob-dn-as-cr-as-is-ft-se,
                var(--_ctm-tab-dn-as-cr-as-is-ft-se, var(--_ctm-dn-as-cr-as-is-ft-se))
              );
              text-decoration: var(
                --_ctm-mob-dn-as-cr-as-is-ue,
                var(--_ctm-tab-dn-as-cr-as-is-ue, var(--_ctm-dn-as-cr-as-is-ue))
              );
              letter-spacing: var(
                --_ctm-mob-dn-as-cr-as-is-lr-sg,
                var(--_ctm-tab-dn-as-cr-as-is-lr-sg, var(--_ctm-dn-as-cr-as-is-lr-sg))
              );
              line-height: var(
                --_ctm-mob-dn-as-cr-as-is-le-ht,
                var(--_ctm-tab-dn-as-cr-as-is-le-ht, var(--_ctm-dn-as-cr-as-is-le-ht))
              );
              font-style: var(
                --_ctm-mob-dn-as-cr-as-is-ft-se-ic,
                var(--_ctm-tab-dn-as-cr-as-is-ft-se-ic, var(--_ctm-dn-as-cr-as-is-ft-se-ic))
              );
              text-align: var(
                --_ctm-mob-dn-as-cr-as-is-tt-an,
                var(--_ctm-tab-dn-as-cr-as-is-tt-an, var(--_ctm-dn-as-cr-as-is-tt-an))
              );
            }
          }
          .attribute_form_field {
            font-family: var(
              --_ctm-mob-dn-as-cr-as-is-ft-fy,
              var(--_ctm-tab-dn-as-cr-as-is-ft-fy, var(--_ctm-dn-as-cr-as-is-ft-fy))
            );
            text-transform: var(
              --_ctm-mob-dn-as-cr-as-is-tt-tm,
              var(--_ctm-tab-dn-as-cr-as-is-tt-tm, var(--_ctm-dn-as-cr-as-is-tt-tm))
            );
            word-wrap: var(
              --_ctm-mob-dn-as-cr-as-is-wd-wp,
              var(--_ctm-tab-dn-as-cr-as-is-wd-wp, var(--_ctm-dn-as-cr-as-is-wd-wp))
            );
            word-break: var(
              --_ctm-mob-dn-as-cr-as-is-wd-bk,
              var(--_ctm-tab-dn-as-cr-as-is-wd-bk, var(--_ctm-dn-as-cr-as-is-wd-bk))
            );
            color: var(
              --_ctm-mob-dn-as-cr-as-is-cr,
              var(--_ctm-tab-dn-as-cr-as-is-cr, var(--_ctm-dn-as-cr-as-is-cr))
            );
            font-weight: var(
              --_ctm-mob-dn-as-cr-as-is-ft-wt,
              var(--_ctm-tab-dn-as-cr-as-is-ft-wt, var(--_ctm-dn-as-cr-as-is-ft-wt))
            );
            font-size: var(
              --_ctm-mob-dn-as-cr-as-is-ft-se,
              var(--_ctm-tab-dn-as-cr-as-is-ft-se, var(--_ctm-dn-as-cr-as-is-ft-se))
            );
            text-decoration: var(
              --_ctm-mob-dn-as-cr-as-is-ue,
              var(--_ctm-tab-dn-as-cr-as-is-ue, var(--_ctm-dn-as-cr-as-is-ue))
            );
            letter-spacing: var(
              --_ctm-mob-dn-as-cr-as-is-lr-sg,
              var(--_ctm-tab-dn-as-cr-as-is-lr-sg, var(--_ctm-dn-as-cr-as-is-lr-sg))
            );
            line-height: var(
              --_ctm-mob-dn-as-cr-as-is-le-ht,
              var(--_ctm-tab-dn-as-cr-as-is-le-ht, var(--_ctm-dn-as-cr-as-is-le-ht))
            );
            font-style: var(
              --_ctm-mob-dn-as-cr-as-is-ft-se-ic,
              var(--_ctm-tab-dn-as-cr-as-is-ft-se-ic, var(--_ctm-dn-as-cr-as-is-ft-se-ic))
            );
            text-align: var(
              --_ctm-mob-dn-as-cr-as-is-tt-an,
              var(--_ctm-tab-dn-as-cr-as-is-tt-an, var(--_ctm-dn-as-cr-as-is-tt-an))
            );
            transition:
              background-color 0.2s,
              color 0.2s,
              border-color 0.2s,
              box-shadow 0.2s;
            &:focus {
              box-shadow:
                0px 1px 2px rgba(16, 24, 40, 0.05),
                0px 0px 0px 2px var(--primary-100);
              border: 1px solid var(--primary-300);
            }
          }
          .dropdown-input-section {
            height: auto !important;
            background-color: var(
              --_ctm-mob-dn-as-cr-as-is-bd-cr,
              var(--_ctm-tab-dn-as-cr-as-is-bd-cr, var(--_ctm-dn-as-cr-as-is-bd-cr))
            );
            padding: var(
              --_ctm-mob-dn-as-cr-as-is-pg,
              var(--_ctm-tab-dn-as-cr-as-is-pg, var(--_ctm-dn-as-cr-as-is-pg))
            );
            border-color: var(
              --_ctm-mob-dn-as-cr-as-is-br-cr,
              var(--_ctm-tab-dn-as-cr-as-is-br-cr, var(--_ctm-dn-as-cr-as-is-br-cr))
            );
            border-style: var(
              --_ctm-mob-dn-as-cr-as-is-br-se,
              var(--_ctm-tab-dn-as-cr-as-is-br-se, var(--_ctm-dn-as-cr-as-is-br-se))
            );
            border-width: var(
              --_ctm-mob-dn-as-cr-as-is-br-wh,
              var(--_ctm-tab-dn-as-cr-as-is-br-wh, var(--_ctm-dn-as-cr-as-is-br-wh))
            );
            border-radius: var(
              --_ctm-mob-dn-as-cr-as-is-br-rs,
              var(--_ctm-tab-dn-as-cr-as-is-br-rs, var(--_ctm-dn-as-cr-as-is-br-rs))
            );
            font-family: var(
              --_ctm-mob-dn-as-cr-as-dn-ft-fy,
              var(--_ctm-tab-dn-as-cr-as-dn-ft-fy, var(--_ctm-dn-as-cr-as-dn-ft-fy))
            );
            text-transform: var(
              --_ctm-mob-dn-as-cr-as-dn-tt-tm,
              var(--_ctm-tab-dn-as-cr-as-dn-tt-tm, var(--_ctm-dn-as-cr-as-dn-tt-tm))
            );
            word-wrap: var(
              --_ctm-mob-dn-as-cr-as-dn-wd-wp,
              var(--_ctm-tab-dn-as-cr-as-dn-wd-wp, var(--_ctm-dn-as-cr-as-dn-wd-wp))
            );
            word-break: var(
              --_ctm-mob-dn-as-cr-as-dn-wd-bk,
              var(--_ctm-tab-dn-as-cr-as-dn-wd-bk, var(--_ctm-dn-as-cr-as-dn-wd-bk))
            );
            color: var(
              --_ctm-mob-dn-as-cr-as-dn-cr,
              var(--_ctm-tab-dn-as-cr-as-dn-cr, var(--_ctm-dn-as-cr-as-dn-cr))
            );
            font-weight: var(
              --_ctm-mob-dn-as-cr-as-dn-ft-wt,
              var(--_ctm-tab-dn-as-cr-as-dn-ft-wt, var(--_ctm-dn-as-cr-as-dn-ft-wt))
            );
            font-size: var(
              --_ctm-mob-dn-as-cr-as-dn-ft-se,
              var(--_ctm-tab-dn-as-cr-as-dn-ft-se, var(--_ctm-dn-as-cr-as-dn-ft-se))
            );
            text-decoration: var(
              --_ctm-mob-dn-as-cr-as-dn-ue,
              var(--_ctm-tab-dn-as-cr-as-dn-ue, var(--_ctm-dn-as-cr-as-dn-ue))
            );
            letter-spacing: var(
              --_ctm-mob-dn-as-cr-as-dn-lr-sg,
              var(--_ctm-tab-dn-as-cr-as-dn-lr-sg, var(--_ctm-dn-as-cr-as-dn-lr-sg))
            );
            line-height: var(
              --_ctm-mob-dn-as-cr-as-dn-le-ht,
              var(--_ctm-tab-dn-as-cr-as-dn-le-ht, var(--_ctm-dn-as-cr-as-dn-le-ht))
            );
            font-style: var(
              --_ctm-mob-dn-as-cr-as-dn-ft-se-ic,
              var(--_ctm-tab-dn-as-cr-as-dn-ft-se-ic, var(--_ctm-dn-as-cr-as-dn-ft-se-ic))
            );
            text-align: var(
              --_ctm-mob-dn-as-cr-as-dn-tt-an,
              var(--_ctm-tab-dn-as-cr-as-dn-tt-an, var(--_ctm-dn-as-cr-as-dn-tt-an))
            );
            .selected-display {
              .selected-item {
                display: flex;
                align-items: center;
                .color-swatch {
                  position: relative;
                  // top: 1px;
                }
                .svg_icon svg {
                  width: 16px;
                  height: 16px;
                }
              }
            }
          }
          &:focus {
            border-color: var(--_primary-400);
            outline: 2px solid var(--_primary-200);
          }
          &.error {
            border-color: #dc2626;
            background-color: #fef2f2;
          }
          .react-datepicker-wrapper {
            width: 100%;
            .react-datepicker__close-icon::after {
              background-color: transparent;
              font-size: 25px;
              color: var(--_gray-500);
            }
          }
          .custom-upload {
            display: flex;
            flex-direction: column;
            align-items: center;
            align-self: stretch;

            background-color: var(
              --_ctm-mob-dn-as-cr-us-bd-cr,
              var(--_ctm-tab-dn-as-cr-us-bd-cr, var(--_ctm-dn-as-cr-us-bd-cr))
            );
            padding: var(
              --_ctm-mob-dn-as-cr-us-pg,
              var(--_ctm-tab-dn-as-cr-us-pg, var(--_ctm-dn-as-cr-us-pg))
            );
            gap: var(
              --_ctm-mob-dn-as-cr-us-im-gp,
              var(--_ctm-tab-dn-as-cr-us-im-gp, var(--_ctm-dn-as-cr-us-im-gp))
            );
            border-color: var(
              --_ctm-mob-dn-as-cr-us-br-cr,
              var(--_ctm-tab-dn-as-cr-us-br-cr, var(--_ctm-dn-as-cr-us-br-cr))
            );
            border-style: var(
              --_ctm-mob-dn-as-cr-us-br-se,
              var(--_ctm-tab-dn-as-cr-us-br-se, var(--_ctm-dn-as-cr-us-br-se))
            );
            border-width: var(
              --_ctm-mob-dn-as-cr-us-br-wh,
              var(--_ctm-tab-dn-as-cr-us-br-wh, var(--_ctm-dn-as-cr-us-br-wh))
            );
            border-radius: var(
              --_ctm-mob-dn-as-cr-us-br-rs,
              var(--_ctm-tab-dn-as-cr-us-br-rs, var(--_ctm-dn-as-cr-us-br-rs))
            );
            .file_upload_text {
              text-align: center;
              display: flex;
              flex-direction: column;
              gap: 6px;
              p {
                strong {
                  font-family: var(
                    --_ctm-mob-dn-as-cr-us-ft-fy,
                    var(--_ctm-tab-dn-as-cr-us-ft-fy, var(--_ctm-dn-as-cr-us-ft-fy))
                  );
                  text-transform: var(
                    --_ctm-mob-dn-as-cr-us-tt-tm,
                    var(--_ctm-tab-dn-as-cr-us-tt-tm, var(--_ctm-dn-as-cr-us-tt-tm))
                  );
                  word-wrap: var(
                    --_ctm-mob-dn-as-cr-us-wd-wp,
                    var(--_ctm-tab-dn-as-cr-us-wd-wp, var(--_ctm-dn-as-cr-us-wd-wp))
                  );
                  word-break: var(
                    --_ctm-mob-dn-as-cr-us-wd-bk,
                    var(--_ctm-tab-dn-as-cr-us-wd-bk, var(--_ctm-dn-as-cr-us-wd-bk))
                  );
                  // color: var(
                  //   --_ctm-mob-dn-as-cr-us-cr,
                  //   var(--_ctm-tab-dn-as-cr-us-cr, var(--_ctm-dn-as-cr-us-cr))
                  // );
                  color: var(--_thm-cs-tt-ls-as);
                  font-weight: var(
                    --_ctm-mob-dn-as-cr-us-ft-wt,
                    var(--_ctm-tab-dn-as-cr-us-ft-wt, var(--_ctm-dn-as-cr-us-ft-wt))
                  );
                  font-size: var(
                    --_ctm-mob-dn-as-cr-us-ft-se,
                    var(--_ctm-tab-dn-as-cr-us-ft-se, var(--_ctm-dn-as-cr-us-ft-se))
                  );
                  text-decoration: var(
                    --_ctm-mob-dn-as-cr-us-ue,
                    var(--_ctm-tab-dn-as-cr-us-ue, var(--_ctm-dn-as-cr-us-ue))
                  );
                  letter-spacing: var(
                    --_ctm-mob-dn-as-cr-us-lr-sg,
                    var(--_ctm-tab-dn-as-cr-us-lr-sg, var(--_ctm-dn-as-cr-us-lr-sg))
                  );
                  line-height: var(
                    --_ctm-mob-dn-as-cr-us-le-ht,
                    var(--_ctm-tab-dn-as-cr-us-le-ht, var(--_ctm-dn-as-cr-us-le-ht))
                  );
                  font-style: var(
                    --_ctm-mob-dn-as-cr-us-ft-se-ic,
                    var(--_ctm-tab-dn-as-cr-us-ft-se-ic, var(--_ctm-dn-as-cr-us-ft-se-ic))
                  );
                  text-align: var(
                    --_ctm-mob-dn-as-cr-us-tt-an,
                    var(--_ctm-tab-dn-as-cr-us-tt-an, var(--_ctm-dn-as-cr-us-tt-an))
                  );
                }
              }
              span {
                font-family: var(
                  --_ctm-mob-dn-as-cr-us-ft-fy-dc,
                  var(--_ctm-tab-dn-as-cr-us-ft-fy-dc, var(--_ctm-dn-as-cr-us-ft-fy-dc))
                );
                text-transform: var(
                  --_ctm-mob-dn-as-cr-us-tt-tm-dc,
                  var(--_ctm-tab-dn-as-cr-us-tt-tm-dc, var(--_ctm-dn-as-cr-us-tt-tm-dc))
                );
                word-wrap: var(
                  --_ctm-mob-dn-as-cr-us-wd-wp-dc,
                  var(--_ctm-tab-dn-as-cr-us-wd-wp-dc, var(--_ctm-dn-as-cr-us-wd-wp-dc))
                );
                word-break: var(
                  --_ctm-mob-dn-as-cr-us-wd-bk-dc,
                  var(--_ctm-tab-dn-as-cr-us-wd-bk-dc, var(--_ctm-dn-as-cr-us-wd-bk-dc))
                );
                color: var(
                  --_ctm-mob-dn-as-cr-us-cr-dc,
                  var(--_ctm-tab-dn-as-cr-us-cr-dc, var(--_ctm-dn-as-cr-us-cr-dc))
                );
                font-weight: var(
                  --_ctm-mob-dn-as-cr-us-ft-wt-dc,
                  var(--_ctm-tab-dn-as-cr-us-ft-wt-dc, var(--_ctm-dn-as-cr-us-ft-wt-dc))
                );
                font-size: var(
                  --_ctm-mob-dn-as-cr-us-ft-se-dc,
                  var(--_ctm-tab-dn-as-cr-us-ft-se-dc, var(--_ctm-dn-as-cr-us-ft-se-dc))
                );
                text-decoration: var(
                  --_ctm-mob-dn-as-cr-us-ue-dc,
                  var(--_ctm-tab-dn-as-cr-us-ue-dc, var(--_ctm-dn-as-cr-us-ue-dc))
                );
                letter-spacing: var(
                  --_ctm-mob-dn-as-cr-us-lr-sg-dc,
                  var(--_ctm-tab-dn-as-cr-us-lr-sg-dc, var(--_ctm-dn-as-cr-us-lr-sg-dc))
                );
                line-height: var(
                  --_ctm-mob-dn-as-cr-us-le-ht-dc,
                  var(--_ctm-tab-dn-as-cr-us-le-ht-dc, var(--_ctm-dn-as-cr-us-le-ht-dc))
                );
                font-style: var(
                  --_ctm-mob-dn-as-cr-us-ft-se-ic-dc,
                  var(--_ctm-tab-dn-as-cr-us-ft-se-ic-dc, var(--_ctm-dn-as-cr-us-ft-se-ic-dc))
                );
                text-align: var(
                  --_ctm-mob-dn-as-cr-us-tt-an-dc,
                  var(--_ctm-tab-dn-as-cr-us-tt-an-dc, var(--_ctm-dn-as-cr-us-tt-an-dc))
                );
              }
            }
            .uploadicon {
              // padding: 10px;
              // background: #f2f4f7;
              display: inline-block;
              // border-radius: 50%;
              // color: var(--_gray-600);
            }
          }
        }
      }
      .error-text {
        font-size: 12px;
        color: var(--_error-500);
      }
      .text_area_attribute {
        width: 100%;
        .input_textarea_a {
          width: 100%;
        }
      }
      .cart_item_attr_disabled {
        pointer-events: none;

        opacity: 0.5;
        cursor: auto;
      }
    }
  }
}

// toggle styles
.input_toggle_switch_container {
  display: flex;
  background-color: var(
    --_ctm-mob-dn-as-cr-as-bs-bd-cr,
    var(--_ctm-tab-dn-as-cr-as-bs-bd-cr, var(--_ctm-dn-as-cr-as-bs-bd-cr))
  );
  border-color: var(
    --_ctm-mob-dn-as-cr-as-bs-br-cr,
    var(--_ctm-tab-dn-as-cr-as-bs-br-cr, var(--_ctm-dn-as-cr-as-bs-br-cr))
  );
  border-style: var(
    --_ctm-mob-dn-as-cr-as-bs-br-se,
    var(--_ctm-tab-dn-as-cr-as-bs-br-se, var(--_ctm-dn-as-cr-as-bs-br-se))
  );
  border-width: var(
    --_ctm-mob-dn-as-cr-as-bs-br-wh,
    var(--_ctm-tab-dn-as-cr-as-bs-br-wh, var(--_ctm-dn-as-cr-as-bs-br-wh))
  );
  border-radius: var(
    --_ctm-mob-dn-as-cr-as-bs-br-rs,
    var(--_ctm-tab-dn-as-cr-as-bs-br-rs, var(--_ctm-dn-as-cr-as-bs-br-rs))
  );
  padding: var(
    --_ctm-mob-dn-as-cr-as-bs-pg,
    var(--_ctm-tab-dn-as-cr-as-bs-pg, var(--_ctm-dn-as-cr-as-bs-pg))
  );
  gap: var(
    --_ctm-mob-dn-as-cr-as-bs-im-gp,
    var(--_ctm-tab-dn-as-cr-as-bs-im-gp, var(--_ctm-dn-as-cr-as-bs-im-gp))
  );
  .input_toggle_switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;

    input[type="checkbox"] {
      opacity: 0;
      width: 0;
      height: 0;

      &:checked + .slider {
        background-color: #4caf50;

        &::before {
          transform: translateX(22px);
        }
      }
    }

    .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ccc;
      transition: 0.4s;
      border-radius: 28px;

      &::before {
        position: absolute;
        content: "";
        height: 22px;
        width: 22px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        border-radius: 50%;
        transition: 0.4s;
      }
    }
  }
  .input_toggle_switch_text {
    gap: 4px;
    display: flex;
    flex-direction: column;
    .checkbox_title {
      font-family: var(
        --_ctm-mob-dn-as-cr-as-bs-ft-fy,
        var(--_ctm-tab-dn-as-cr-as-bs-ft-fy, var(--_ctm-dn-as-cr-as-bs-ft-fy))
      );
      text-transform: var(
        --_ctm-mob-dn-as-cr-as-bs-tt-tm,
        var(--_ctm-tab-dn-as-cr-as-bs-tt-tm, var(--_ctm-dn-as-cr-as-bs-tt-tm))
      );
      word-wrap: var(
        --_ctm-mob-dn-as-cr-as-bs-wd-wp,
        var(--_ctm-tab-dn-as-cr-as-bs-wd-wp, var(--_ctm-dn-as-cr-as-bs-wd-wp))
      );
      word-break: var(
        --_ctm-mob-dn-as-cr-as-bs-wd-bk,
        var(--_ctm-tab-dn-as-cr-as-bs-wd-bk, var(--_ctm-dn-as-cr-as-bs-wd-bk))
      );
      color: var(
        --_ctm-mob-dn-as-cr-as-bs-cr,
        var(--_ctm-tab-dn-as-cr-as-bs-cr, var(--_ctm-dn-as-cr-as-bs-cr))
      );
      font-weight: var(
        --_ctm-mob-dn-as-cr-as-bs-ft-wt,
        var(--_ctm-tab-dn-as-cr-as-bs-ft-wt, var(--_ctm-dn-as-cr-as-bs-ft-wt))
      );
      font-size: var(
        --_ctm-mob-dn-as-cr-as-bs-ft-se,
        var(--_ctm-tab-dn-as-cr-as-bs-ft-se, var(--_ctm-dn-as-cr-as-bs-ft-se))
      );
      text-decoration: var(
        --_ctm-mob-dn-as-cr-as-bs-ue,
        var(--_ctm-tab-dn-as-cr-as-bs-ue, var(--_ctm-dn-as-cr-as-bs-ue))
      );
      letter-spacing: var(
        --_ctm-mob-dn-as-cr-as-bs-lr-sg,
        var(--_ctm-tab-dn-as-cr-as-bs-lr-sg, var(--_ctm-dn-as-cr-as-bs-lr-sg))
      );
      line-height: var(
        --_ctm-mob-dn-as-cr-as-bs-le-ht,
        var(--_ctm-tab-dn-as-cr-as-bs-le-ht, var(--_ctm-dn-as-cr-as-bs-le-ht))
      );
      font-style: var(
        --_ctm-mob-dn-as-cr-as-bs-ft-se-ic,
        var(--_ctm-tab-dn-as-cr-as-bs-ft-se-ic, var(--_ctm-dn-as-cr-as-bs-ft-se-ic))
      );
      text-align: var(
        --_ctm-mob-dn-as-cr-as-bs-tt-an,
        var(--_ctm-tab-dn-as-cr-as-bs-tt-an, var(--_ctm-dn-as-cr-as-bs-tt-an))
      );
    }
    .checkbox_des {
      font-family: var(
        --_ctm-mob-dn-as-cr-as-bs-ft-fy-dc,
        var(--_ctm-tab-dn-as-cr-as-bs-ft-fy-dc, var(--_ctm-dn-as-cr-as-bs-ft-fy-dc))
      );
      text-transform: var(
        --_ctm-mob-dn-as-cr-as-bs-tt-tm-dc,
        var(--_ctm-tab-dn-as-cr-as-bs-tt-tm-dc, var(--_ctm-dn-as-cr-as-bs-tt-tm-dc))
      );
      word-wrap: var(
        --_ctm-mob-dn-as-cr-as-bs-wd-wp-dc,
        var(--_ctm-tab-dn-as-cr-as-bs-wd-wp-dc, var(--_ctm-dn-as-cr-as-bs-wd-wp-dc))
      );
      word-break: var(
        --_ctm-mob-dn-as-cr-as-bs-wd-bk-dc,
        var(--_ctm-tab-dn-as-cr-as-bs-wd-bk-dc, var(--_ctm-dn-as-cr-as-bs-wd-bk-dc))
      );
      color: var(
        --_ctm-mob-dn-as-cr-as-bs-cr-dc,
        var(--_ctm-tab-dn-as-cr-as-bs-cr-dc, var(--_ctm-dn-as-cr-as-bs-cr-dc))
      );
      font-weight: var(
        --_ctm-mob-dn-as-cr-as-bs-ft-wt-dc,
        var(--_ctm-tab-dn-as-cr-as-bs-ft-wt-dc, var(--_ctm-dn-as-cr-as-bs-ft-wt-dc))
      );
      font-size: var(
        --_ctm-mob-dn-as-cr-as-bs-ft-se-dc,
        var(--_ctm-tab-dn-as-cr-as-bs-ft-se-dc, var(--_ctm-dn-as-cr-as-bs-ft-se-dc))
      );
      text-decoration: var(
        --_ctm-mob-dn-as-cr-as-bs-ue-dc,
        var(--_ctm-tab-dn-as-cr-as-bs-ue-dc, var(--_ctm-dn-as-cr-as-bs-ue-dc))
      );
      letter-spacing: var(
        --_ctm-mob-dn-as-cr-as-bs-lr-sg-dc,
        var(--_ctm-tab-dn-as-cr-as-bs-lr-sg-dc, var(--_ctm-dn-as-cr-as-bs-lr-sg-dc))
      );
      line-height: var(
        --_ctm-mob-dn-as-cr-as-bs-le-ht-dc,
        var(--_ctm-tab-dn-as-cr-as-bs-le-ht-dc, var(--_ctm-dn-as-cr-as-bs-le-ht-dc))
      );
      font-style: var(
        --_ctm-mob-dn-as-cr-as-bs-ft-se-ic-dc,
        var(--_ctm-tab-dn-as-cr-as-bs-ft-se-ic-dc, var(--_ctm-dn-as-cr-as-bs-ft-se-ic-dc))
      );
      text-align: var(
        --_ctm-mob-dn-as-cr-as-bs-tt-an-dc,
        var(--_ctm-tab-dn-as-cr-as-bs-tt-an-dc, var(--_ctm-dn-as-cr-as-bs-tt-an-dc))
      );
    }
  }
}

// input radio styles
.input_radio_a {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  height: 20px;
  width: 20px;

  input[type="radio"] {
    opacity: 0;
    width: 0;
    height: 0;

    &:checked + .custom_radio::after {
      display: block;
    }
  }

  .custom_radio {
    height: 18px;
    width: 18px;
    border-radius: 50%;
    background-color: var(--_base-white);
    border: 2px solid var(--_gray-600);
    position: relative;
    transition: border-color 0.3s ease;

    &::after {
      content: "";
      position: absolute;
      top: 3px;
      left: 3px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: var(--_primary-400);
      display: none;
    }
  }

  input[type="radio"]:checked + .custom_radio {
    border-color: var(--_primary-400);
  }

  &.disabled {
    opacity: 0.5;
    pointer-events: none;
  }
}

// .custom-upload {
//   // text-align: center;
//   // border: 1px solid var(--_gray-200);
//   // border-radius: 6px;
//   // padding: 16px;
//   border-radius: 6px;
//   border: 1px solid var(--Gray-200, #eaecf0);
//   background: var(--Base-White, #fff);
//   display: flex;
//   padding: 16px 24px;
//   flex-direction: column;
//   align-items: center;
//   gap: 4px;
//   align-self: stretch;
//   &:hover {
//     cursor: pointer;
//     border: 1px solid var(--_primary-200);
//     background: var(--_primary-25);
//   }
//   .uploadicon {
//     padding: 10px;
//     background: #f2f4f7;
//     display: inline-block;
//     border-radius: 50%;
//     margin-bottom: 12px;
//     color: var(--_gray-600);
//   }
//   p {
//     padding-bottom: 4px;
//     color: var(--_gray-600);
//     font-size: 14px;
//     strong {
//       // color: var(--_primary-400);
//       // font-weight: 600;
//       color: var(--Primary-400, #243dc6);
//       font-size: 14px;
//       font-weight: 600;
//       // line-height: 20px;
//     }
//   }
//   span {
//     color: var(--Gray-600, #475467);
//     font-size: 14px;
//     font-weight: 400;
//     // line-height: 20px;
//   }
// }

.input_color_picker_a {
  width: 100% !important;
  height: 48px;
  border-radius: 4px;
  border: 1px solid var(--Gray-300, #d0d5dd);
  background: var(--Base-White, #fff);
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  outline: none;
  transition: border-color 0.2s ease-in-out;
  font-size: 14px;
  cursor: pointer;
}
.attribute_currency_field {
  position: relative;
  input {
    padding: 12px 12px 12px 32px !important;
  }
  svg {
    position: absolute;
    left: 8px;
    top: 10px;
    background: #fff;
  }
}