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

$resizerId: "[data-cms-tool='cms-element-resizer']";
$resizeActive: '[data-cms-element-resizer="true"]';
[data-div-type="element"] {
  &[data-element-type="badge"] {
    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
    padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
    min-width: 100px;
    &.vtl {
      min-height: 100px !important;
      min-width: 30px;
      height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important;
      width: auto;
      .badge__wrapper {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: fit-content;

        .status_badge {
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 26px;
          padding: 0px 24px 24px;
          &[data-styletag="style1"] {
            border-radius: 12px;
            font-weight: bold;
            white-space: nowrap;
            border: 2px solid #fff;
            text-transform: uppercase;
          }
          &[data-styletag="style2"] {
            text-transform: uppercase;
            //clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
            clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 90%, 0% 100%);
          }

          &[data-styletag="style3"] {
            clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 90%, 0% 100%);
          }
          &[data-styletag="style4"] {
            clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
          }
          &[data-styletag="style5"] {
            clip-path: polygon(0% 10%, 50% 0%, 100% 10%, 100% 90%, 50% 100%, 0% 90%);
          }

          .product_tag {
            //writing-mode: vertical-rl;
            //transform: rotate(180deg); // top-to-bottom vertical text
          }

          .icon {
            margin-bottom: 4px;
          }
        }
      }
    }
    &.hrz {
      min-height: 30px !important;
      min-width: 100px !important;
      height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important;
      .badge__wrapper {
        flex-direction: row;
        justify-content: center;
        align-items: center;

        .status_badge {
          flex-direction: row;
          align-items: center;
          justify-content: center;
          padding: 8px 12px;
          &[data-styletag="style1"] {
            border-radius: 12px;
            font-weight: bold;
            white-space: nowrap;
            border: 2px solid #fff;
            text-transform: uppercase;
          }
          &[data-styletag="style2"] {
            text-transform: uppercase;
            white-space: nowrap;
            clip-path: polygon(0 0, 80% 0, 80% 100%, 0% 100%, 10% 50%);
          }

          &[data-styletag="style3"] {
            clip-path: polygon(20% 0, 100% 0, 90% 50%, 100% 100%, 20% 100%);
          }

          &[data-styletag="style4"] {
            clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%);
          }
          &[data-styletag="style5"] {
            clip-path: polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%);
          }

          .product_tag {
            white-space: nowrap;
            text-align: center;
          }

          .icon {
            margin-right: 6px;
          }
        }
      }
    }
    & > div {
      &.wrapper {
        //width: 100%;
        height: 100%;
      }
    }
    .badge__wrapper {
      display: flex;
      align-items: center;
      align-self: stretch;
      justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-be-ct-dt-se-at));
      gap: prepareMediaVariable(--_ctm-lt-im-gp);
      // width: 100%;
      // height: 100%;

      .status_badge {
        display: flex;
        align-items: center;
        gap: prepareMediaVariable(--_ctm-lt-sg-bn-is);
        width: 100%;
        height: 100%;
        mix-blend-mode: multiply;

        // &[data-styletag="style7"] {
        //   clip-path: polygon(0 0, 80% 0, 85% 50%, 80% 100%, 0 100%, 5% 50%);
        //   display: flex;
        //   justify-content: space-evenly;
        //   align-items: center;
        // }
        // &[data-styletag="style6"] {
        //   clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
        //   line-height: 1.3;
        // }

        &[data-producttag="New"] {
          background-color: prepareMediaVariable(--_ctm-dn-be-nw-se-bd-cr);
          border-width: prepareMediaVariable(--_ctm-dn-be-nw-se-br-wh);
          border-color: prepareMediaVariable(--_ctm-dn-be-nw-se-br-cr);
          border-style: prepareMediaVariable(--_ctm-dn-be-nw-se-br-se);
          border-radius: prepareMediaVariable(--_ctm-dn-be-nw-se-br-rs);
          box-shadow: prepareMediaVariable(--_ctm-dn-be-nw-se-sw-ae)
            prepareMediaVariable(--_ctm-dn-be-nw-se-sw-br)
            prepareMediaVariable(--_ctm-dn-be-nw-se-sw-sd)
            prepareMediaVariable(--_ctm-dn-be-nw-se-sw-cr);
          .icon {
            display: var(--_hover-show-icon, var(--_show-icon, flex));
            svg {
              width: prepareMediaVariable(--_ctm-dn-be-nw-se-in-se);
              height: prepareMediaVariable(--_ctm-dn-be-nw-se-in-se);
              path {
                stroke: prepareMediaVariable(--_ctm-dn-be-nw-se-in-c1);
                // Overrides the stroke-width presentation attribute baked into the icon markup.
                stroke-width: prepareMediaVariable(--_ctm-dn-be-nw-se-se-wh, 1.25);
              }
            }
          }
        }
        &[data-producttag="Bestseller"] {
          //background-color: #f57c00;
          background-color: prepareMediaVariable(--_ctm-dn-be-br-se-bd-cr);
          border-width: prepareMediaVariable(--_ctm-dn-be-br-se-br-wh);
          border-color: prepareMediaVariable(--_ctm-dn-be-br-se-br-cr);
          border-style: prepareMediaVariable(--_ctm-dn-be-br-se-br-se);
          border-radius: prepareMediaVariable(--_ctm-dn-be-br-se-br-rs);
          box-shadow: prepareMediaVariable(--_ctm-dn-be-br-se-sw-ae)
            prepareMediaVariable(--_ctm-dn-be-br-se-sw-br)
            prepareMediaVariable(--_ctm-dn-be-br-se-sw-sd)
            prepareMediaVariable(--_ctm-dn-be-br-se-sw-cr);
          .icon {
            display: var(--_hover-show-icon, var(--_show-icon, flex));
            svg {
              width: prepareMediaVariable(--_ctm-dn-be-br-se-in-se);
              height: prepareMediaVariable(--_ctm-dn-be-br-se-in-se);

              path {
                stroke: prepareMediaVariable(--_ctm-dn-be-br-se-in-c1);
                // Overrides the stroke-width presentation attribute baked into the icon markup.
                stroke-width: prepareMediaVariable(--_ctm-dn-be-br-se-se-wh, 1.25);
              }
            }
          }
        }
        &[data-producttag="Limited"] {
          //background-color: #6a1b9a;
          background-color: prepareMediaVariable(--_ctm-dn-be-ld-se-bd-cr);
          border-width: prepareMediaVariable(--_ctm-dn-be-ld-se-br-wh);
          border-color: prepareMediaVariable(--_ctm-dn-be-ld-se-br-cr);
          border-style: prepareMediaVariable(--_ctm-dn-be-ld-se-br-se);
          border-radius: prepareMediaVariable(--_ctm-dn-be-ld-se-br-rs);
          box-shadow: prepareMediaVariable(--_ctm-dn-be-ld-se-sw-ae)
            prepareMediaVariable(--_ctm-dn-be-ld-se-sw-br)
            prepareMediaVariable(--_ctm-dn-be-ld-se-sw-sd)
            prepareMediaVariable(--_ctm-dn-be-ld-se-sw-cr);
          .icon {
            display: var(--_hover-show-icon, var(--_show-icon, flex));
            svg {
              width: prepareMediaVariable(--_ctm-dn-be-ld-se-in-se);
              height: prepareMediaVariable(--_ctm-dn-be-ld-se-in-se);

              path {
                stroke: prepareMediaVariable(--_ctm-dn-be-ld-se-in-c1);
                // Overrides the stroke-width presentation attribute baked into the icon markup.
                stroke-width: prepareMediaVariable(--_ctm-dn-be-ld-se-se-wh, 1.25);
              }
            }
          }
        }
        &[data-producttag="Exclusive"] {
          //background-color: #1976d2;
          background-color: prepareMediaVariable(--_ctm-dn-be-ee-se-bd-cr);
          border-width: prepareMediaVariable(--_ctm-dn-be-ee-se-br-wh);
          border-color: prepareMediaVariable(--_ctm-dn-be-ee-se-br-cr);
          border-style: prepareMediaVariable(--_ctm-dn-be-ee-se-br-se);
          border-radius: prepareMediaVariable(--_ctm-dn-be-ee-se-br-rs);
          box-shadow: prepareMediaVariable(--_ctm-dn-be-ee-se-sw-ae)
            prepareMediaVariable(--_ctm-dn-be-ee-se-sw-br)
            prepareMediaVariable(--_ctm-dn-be-ee-se-sw-sd)
            prepareMediaVariable(--_ctm-dn-be-ee-se-sw-cr);
          .icon {
            display: var(--_hover-show-icon, var(--_show-icon, flex));
            svg {
              width: prepareMediaVariable(--_ctm-dn-be-ee-se-in-se);
              height: prepareMediaVariable(--_ctm-dn-be-ee-se-in-se);

              path {
                stroke: prepareMediaVariable(--_ctm-dn-be-ee-se-in-c1);
                // Overrides the stroke-width presentation attribute baked into the icon markup.
                stroke-width: prepareMediaVariable(--_ctm-dn-be-ee-se-se-wh, 1.25);
              }
            }
          }
        }

        .product_tag {
          &[data-producttag="New"] {
            font-family: prepareMediaVariable(--_ctm-dn-be-nw-se-ft-fy);
            text-transform: prepareMediaVariable(--_ctm-dn-be-nw-se-tt-tm);
            word-wrap: prepareMediaVariable(--_ctm-dn-be-nw-se-wd-wp);
            word-break: prepareMediaVariable(--_ctm-dn-be-nw-se-wd-bk);
            font-size: prepareMediaVariable(--_ctm-dn-be-nw-se-ft-se);
            color: prepareMediaVariable(--_ctm-dn-be-nw-se-cr);
            font-weight: prepareMediaVariable(--_ctm-dn-be-nw-se-ft-wt);
            font-style: prepareMediaVariable(--_ctm-dn-be-nw-se-ft-se-ic);
            text-decoration: prepareMediaVariable(--_ctm-dn-be-nw-se-ue);
            text-align: prepareMediaVariable(--_ctm-dn-be-nw-se-tt-an);
            letter-spacing: prepareMediaVariable(--_ctm-dn-be-nw-se-lr-sg);
            line-height: prepareMediaVariable(--_ctm-dn-be-nw-se-le-ht);
          }
          &[data-producttag="Bestseller"] {
            font-family: prepareMediaVariable(--_ctm-dn-be-br-se-ft-fy);
            text-transform: prepareMediaVariable(--_ctm-dn-be-br-se-tt-tm);
            word-wrap: prepareMediaVariable(--_ctm-dn-be-br-se-wd-wp);
            word-break: prepareMediaVariable(--_ctm-dn-be-br-se-wd-bk);
            font-size: prepareMediaVariable(--_ctm-dn-be-br-se-ft-se);
            color: prepareMediaVariable(--_ctm-dn-be-br-se-cr);
            font-weight: prepareMediaVariable(--_ctm-dn-be-br-se-ft-wt);
            font-style: prepareMediaVariable(--_ctm-dn-be-br-se-ft-se-ic);
            text-decoration: prepareMediaVariable(--_ctm-dn-be-br-se-ue);
            text-align: prepareMediaVariable(--_ctm-dn-be-br-se-tt-an);
            letter-spacing: prepareMediaVariable(--_ctm-dn-be-br-se-lr-sg);
            line-height: prepareMediaVariable(--_ctm-dn-be-br-se-le-ht);
          }
          &[data-producttag="Limited"] {
            font-family: prepareMediaVariable(--_ctm-dn-be-ld-se-ft-fy);
            text-transform: prepareMediaVariable(--_ctm-dn-be-ld-se-tt-tm);
            word-wrap: prepareMediaVariable(--_ctm-dn-be-ld-se-wd-wp);
            word-break: prepareMediaVariable(--_ctm-dn-be-ld-se-wd-bk);
            font-size: prepareMediaVariable(--_ctm-dn-be-ld-se-ft-se);
            color: prepareMediaVariable(--_ctm-dn-be-ld-se-cr);
            font-weight: prepareMediaVariable(--_ctm-dn-be-ld-se-ft-wt);
            font-style: prepareMediaVariable(--_ctm-dn-be-ld-se-ft-se-ic);
            text-decoration: prepareMediaVariable(--_ctm-dn-be-ld-se-ue);
            text-align: prepareMediaVariable(--_ctm-dn-be-ld-se-tt-an);
            letter-spacing: prepareMediaVariable(--_ctm-dn-be-ld-se-lr-sg);
            line-height: prepareMediaVariable(--_ctm-dn-be-ld-se-le-ht);
          }
          &[data-producttag="Exclusive"] {
            font-family: prepareMediaVariable(--_ctm-dn-be-ee-se-ft-fy);
            text-transform: prepareMediaVariable(--_ctm-dn-be-ee-se-tt-tm);
            word-wrap: prepareMediaVariable(--_ctm-dn-be-ee-se-wd-wp);
            word-break: prepareMediaVariable(--_ctm-dn-be-ee-se-wd-bk);
            font-size: prepareMediaVariable(--_ctm-dn-be-ee-se-ft-se);
            color: prepareMediaVariable(--_ctm-dn-be-ee-se-cr);
            font-weight: prepareMediaVariable(--_ctm-dn-be-ee-se-ft-wt);
            font-style: prepareMediaVariable(--_ctm-dn-be-ee-se-ft-se-ic);
            text-decoration: prepareMediaVariable(--_ctm-dn-be-ee-se-ue);
            text-align: prepareMediaVariable(--_ctm-dn-be-ee-se-tt-an);
            letter-spacing: prepareMediaVariable(--_ctm-dn-be-ee-se-lr-sg);
            line-height: prepareMediaVariable(--_ctm-dn-be-ee-se-le-ht);
          }
        }
      }
      .badge_vertical_pill {
        background-color: #4caf50;
        color: #fff;
        padding: 10px 8px;
        border-radius: 12px;
        font-weight: bold;
        writing-mode: vertical-rl;
        text-align: center;
        font-size: 16px;
        white-space: nowrap;
        border: 2px solid #fff;
      }
      .badge_big_sale {
        background-color: #ffa726;
        color: #fff;
        display: flex;
        align-items: center;
        font-weight: bold;
        font-size: 14px;
        text-transform: uppercase;
        padding: 6px 12px;
        white-space: nowrap;
        clip-path: polygon(0 0, 80% 0, 80% 100%, 0% 100%, 10% 50%);
        gap: 8px;

        .left {
          font-size: 16px;
        }

        .right {
          font-size: 12px;
          font-weight: normal;
        }
      }
      .badge_bogo {
        background-color: #d5a373;
        color: #fff;
        padding: 6px 16px;
        clip-path: polygon(0 0, 85% 0, 100% 50%, 85% 100%, 0 100%);
        font-weight: bold;
        font-size: 14px;
        display: inline-block;
        text-transform: uppercase;
        white-space: nowrap;
        border: 2px dashed #fff;
      }
      .badgerightarrow {
        background-color: #c49b6c;
        color: white;
        padding: 6px 12px;
        clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%);
        font-weight: bold;
        font-size: 14px;
      }
      .badgebigsale {
        background-color: #ff9800;
        color: white;
        padding: 6px 14px;
        clip-path: polygon(0 0, 80% 0, 85% 50%, 80% 100%, 0 100%, 5% 50%);
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: bold;

        .label {
          font-size: 16px;
        }

        .offer {
          font-size: 12px;
        }
      }
      .badge_verticalpill {
        writing-mode: vertical-rl;
        text-align: center;
        background-color: #4caf50;
        color: white;
        padding: 12px 4px;
        border-radius: 10px;
        font-weight: bold;
        font-size: 14px;
      }
      .badge_tail_down {
        background-color: #8bc34a;
        color: white;
        padding: 10px 8px;
        clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
        text-align: center;
        font-weight: bold;
        font-size: 14px;
        line-height: 1.3;
      }
      .badge_ribbon {
        background-color: #d2b48c;
        color: white;
        font-weight: bold;
        font-size: 14px;
        padding: 6px 12px;
        clip-path: polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%);
        transform: rotate(-5deg);
        text-align: center;
      }
    }
  }
}