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

[data-div-type="element"] {
  &[data-element-type="itemStock"] {
    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)))
          )
      )
    );
    height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important;
    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
    // aspect-ratio: 1 / var(--_sf-aspect-ratio);
    position: relative;

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

    .item__stock__section {
      display: flex;
      align-items: center;
      cursor: pointer;
      gap: 8px;
      .item__stock__heading {
        position: relative;
        .item__stock__text {
          font-family: prepareMediaVariable(--_ctm-dn-im-sk-tt-ft-fy);
          text-transform: prepareMediaVariable(--_ctm-dn-im-sk-tt-tt-tm);
          word-wrap: prepareMediaVariable(--_ctm-dn-im-sk-tt-wd-wp);
          word-break: prepareMediaVariable(--_ctm-dn-im-sk-tt-wd-bk);
          font-size: prepareMediaVariable(--_ctm-dn-im-sk-tt-ft-se);
          color: prepareMediaVariable(--_ctm-dn-im-sk-tt-cr);
          font-weight: prepareMediaVariable(--_ctm-dn-im-sk-tt-ft-wt);
          font-style: prepareMediaVariable(--_ctm-dn-im-sk-tt-ft-se-ic);
          text-decoration: prepareMediaVariable(--_ctm-dn-im-sk-tt-ue);
          text-align: prepareMediaVariable(--_ctm-dn-im-sk-tt-tt-an);
          letter-spacing: prepareMediaVariable(--_ctm-dn-im-sk-tt-lr-sg);
          line-height: prepareMediaVariable(--_ctm-dn-im-sk-tt-le-ht);
        }
        .stock_message_conatainer {
          display: flex;
          padding: 2px 8px 2px 6px;
          align-items: center;
          gap: 4px;
          mix-blend-mode: multiply;
          background-color: prepareMediaVariable(--_ctm-dn-im-sk-tt-bd-cr);
          border-width: prepareMediaVariable(--_ctm-dn-im-sk-tt-br-wh);
          border-color: prepareMediaVariable(--_ctm-dn-im-sk-tt-br-cr);
          border-style: prepareMediaVariable(--_ctm-dn-im-sk-tt-br-se);
          border-radius: prepareMediaVariable(--_ctm-dn-im-sk-tt-br-rs);
          box-shadow: prepareMediaVariable(--_ctm-dn-im-sk-tt-sw-ae)
            prepareMediaVariable(--_ctm-dn-im-sk-tt-sw-br)
            prepareMediaVariable(--_ctm-dn-im-sk-tt-sw-sd)
            prepareMediaVariable(--_ctm-dn-im-sk-tt-sw-cr);

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

    &[data-widget-shadow="false"] {
      --_show-shadow: none;
    }

    &[data-show-shadow="false"] {
      --_show-shadow: none;
    }
  }
}