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

$resizerId: "[data-cms-tool='cms-element-resizer']";
$resizeActive: '[data-cms-element-resizer="true"]';
[data-div-type="element"] {
  &[data-element-type="productCustomizations"] {
    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)));

    & > div {
      &.wrapper {
        width: 100%;
      }
    }

    .product_customization_wrapper {
      display: flex;
      align-items: flex-start;
      padding: var(--_ctm-lt-pg);
      flex-direction: column;

      .customization_button_wrapper {
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        height: 32px;
        cursor: pointer;

        .customize_text {
          font-weight: 600;
          font-size: 16px;
          line-height: 150%;
          color: #333333;
          white-space: nowrap;
        }
      }

      .customization_detail_wrapper {
        display: flex;
        flex-direction: column;
        gap: var(--_ctm-lt-sg-bn-is);
        align-items: flex-start;
        height: auto;
        width: 100%;

        .customization_item_wrapper {
          display: flex;
          flex-direction: column;
          gap: var(--_ctm-lt-im-gp);
          align-items: flex-start;
          width: 100%;
          height: auto;

          .customization_item_label {
            background-color: var(--_ctm-dn-ll-dn-bd-cr);
            border-color: var(--_ctm-dn-ll-dn-br-cr);
            border-radius: var(--_ctm-dn-ll-dn-br-rs);
            border-style: var(--_ctm-dn-ll-dn-br-se);
            border-width: var(--_ctm-dn-ll-dn-br-wh);
            color: var(--_ctm-dn-ll-dn-cr);
            font-family: var(--_ctm-dn-ll-dn-ft-fy);
            text-transform: var(--_ctm-dn-ll-dn-tt-tm);
            word-wrap: var(--_ctm-dn-ll-dn-wd-wp);
            word-break: var(--_ctm-dn-ll-dn-wd-bk);
            font-size: var(--_ctm-dn-ll-dn-ft-se);
            font-style: var(--_ctm-dn-ll-dn-ft-se-ic);
            font-weight: var(--_ctm-dn-ll-dn-ft-wt);
            line-height: var(--_ctm-dn-ll-dn-le-ht);
            letter-spacing: var(--_ctm-dn-ll-dn-lr-sg);
            box-shadow: var(--_ctm-dn-ll-dn-sw-ae) var(--_ctm-dn-ll-dn-sw-br)
              var(--_ctm-dn-ll-dn-sw-sd) var(--_ctm-dn-ll-dn-sw-cr);
            text-align: var(--_ctm-dn-ll-dn-tt-an);
            width: 100%;
            text-decoration: var(--_ctm-dn-ll-dn-ue);
          }

          .est__dropdown__button {
            width: 100%;
            min-height: 48px;
            display: flex;
            align-items: center;
            background-color: var(--_ctm-dn-dn-dn-bd-cr);
            border-color: var(--_ctm-dn-dn-dn-br-cr);
            border-radius: var(--_ctm-dn-dn-dn-br-rs);
            border-style: var(--_ctm-dn-dn-dn-br-se);
            border-width: var(--_ctm-dn-dn-dn-br-wh);
            box-shadow: var(--_ctm-dn-dn-dn-sw-ae) var(--_ctm-dn-dn-dn-sw-br)
              var(--_ctm-dn-dn-dn-sw-sd) var(--_ctm-dn-dn-dn-sw-cr);

            .value__selected {
              border: none;
              flex: 1 0 0;
              color: var(--_ctm-dn-dn-dn-cr);
              font-family: var(--_ctm-dn-dn-dn-ft-fy);
              text-transform: var(--_ctm-dn-dn-dn-tt-tm);
              word-wrap: var(--_ctm-dn-dn-dn-wd-wp);
              word-break: var(--_ctm-dn-dn-dn-wd-bk);
              font-size: var(--_ctm-dn-dn-dn-ft-se);
              font-style: var(--_ctm-dn-dn-dn-ft-se-ic);
              font-weight: var(--_ctm-dn-dn-dn-ft-wt);
              line-height: var(--_ctm-dn-dn-dn-le-ht);
              letter-spacing: var(--_ctm-dn-dn-dn-lr-sg);
              text-align: var(--_ctm-dn-dn-dn-tt-an);
              text-decoration: var(--_ctm-dn-dn-dn-ue);
            }
          }
        }

        .customization_preview_wrapper {
          display: flex;
          flex-direction: column;
          min-height: 148px;
          width: 100%;
          border-radius: 4px;
          border: 1px solid black;
          gap: 16px;
          background-color: #fff;
          position: relative;
          justify-content: center;
          align-items: center;

          .preview_text {
            position: absolute;
            top: 10px;
            left: 10px;
          }
        }

        .customization_note_wrapper {
          display: flex;
          align-items: center;
          border-radius: 2px;
          padding: 2px;
          background-color: #f5f5f5;
          font-weight: 400;
          font-size: 14px;
          line-height: 125%;
          letter-spacing: -2%;
          color: #333333;
        }
      }
    }
  }
}