@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="stockStatus"] {
    // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
    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)))
      )
    );

    margin: var(--_ctm-lt-mn, --_tst-lt-mn);

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

    .stock__status__text {
      background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));

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

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

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

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

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

      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));

      .title {
        color: var(--_ctm-mob-dn-cr, var(--_ctm-tab-dn-cr, var(--_ctm-dn-cr)));
        font-family: var(--_ctm-mob-dn-ft-fy, var(--_ctm-tab-dn-ft-fy, var(--_ctm-dn-ft-fy)));
        text-transform: var(--_ctm-mob-dn-tt-tm, var(--_ctm-tab-dn-tt-tm, var(--_ctm-dn-tt-tm)));
        word-wrap: var(--_ctm-mob-dn-wd-wp, var(--_ctm-tab-dn-wd-wp, var(--_ctm-dn-wd-wp)));
        word-break: var(--_ctm-mob-dn-wd-bk, var(--_ctm-tab-dn-wd-bk, var(--_ctm-dn-wd-bk)));
        font-size: var(--_ctm-mob-dn-ft-se, var(--_ctm-tab-dn-ft-se, var(--_ctm-dn-ft-se)));
        font-weight: var(--_ctm-mob-dn-ft-wt, var(--_ctm-tab-dn-ft-wt, var(--_ctm-dn-ft-wt)));
        font-style: var(
          --_ctm-mob-dn-ft-se-ic,
          var(--_ctm-tab-dn-ft-se-ic, var(--_ctm-dn-ft-se-ic))
        );
        text-align: var(--_ctm-mob-dn-tt-an, var(--_ctm-tab-dn-tt-an, var(--_ctm-dn-tt-an)));
        letter-spacing: var(--_ctm-mob-dn-lr-sg, var(--_ctm-tab-dn-lr-sg, var(--_ctm-dn-lr-sg)));
        line-height: var(--_ctm-mob-dn-le-ht, var(--_ctm-tab-dn-le-ht, var(--_ctm-dn-le-ht)));
        text-decoration: var(--_ctm-mob-dn-ue, var(--_ctm-tab-dn-ue, var(--_ctm-dn-ue)));
        padding: prepareMediaVariable(--_ctm-dn-pg);
      }
      .next-available-date {
        white-space: nowrap;
      }
      // text css
    }
  }
}