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

[data-div-type="element"] {
  &[data-element-type="video"] {
    // width: var(--_sf-nw-wh, var(--_tst-lt-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, var(--_sf-nw-wh))))));
    height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht)));
    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
    // aspect-ratio: 1 / var(--_sf-aspect-ratio);
    --_aspect-ratio: calc(1 * (var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) / var(--_ctm-mob-lt-wh, var(--_ctm-tab-lt-wh, var(--_ctm-lt-wh)))));

    &>.wrapper {
      // width: 100%;
      // height: 100%;
      position: relative;
    }

    &[data-text-position="top"] {
      .video__container {
        flex-direction: column;
      }
    }

    &[data-text-position="bottom"] {
      .video__container {
        flex-direction: column-reverse;
      }
    }

    &[data-text-position="left"] {
      .video__container {
        flex-direction: row;
      }

      &[data-widget-alignment="top"] {
        .video__container {
          align-items: flex-start;
        }
      }

      &[data-widget-alignment="center"] {
        .video__container {
          align-items: center;
        }
      }

      &[data-widget-alignment="bottom"] {
        .video__container {
          align-items: flex-end;
        }
      }
    }

    &[data-text-position="right"] {
      .video__container {
        flex-direction: row-reverse;
      }

      &[data-widget-alignment="top"] {
        .video__container {
          align-items: flex-start;
        }
      }

      &[data-widget-alignment="center"] {
        .video__container {
          align-items: center;
        }
      }

      &[data-widget-alignment="bottom"] {
        .video__container {
          align-items: flex-end;
        }
      }
    }

    &[data-show-video-border="true"] {
      .video__container {
        .video__thumbnail {
          .placeholder__img {
            border-color: var(--_ctm-mob-dn-vo-pr-br-cr,
                var(--_ctm-tab-dn-vo-pr-br-cr, var(--_ctm-dn-vo-pr-br-cr)));
            border-style: var(--_ctm-mob-dn-vo-pr-br-se,
                var(--_ctm-tab-dn-vo-pr-br-se, var(--_ctm-dn-vo-pr-br-se)));
            border-width: var(--_ctm-mob-dn-vo-pr-br-wh,
                var(--_ctm-tab-dn-vo-pr-br-wh, var(--_ctm-dn-vo-pr-br-wh)));
          }
        }

        .video__data {
          video {
            border-color: var(--_ctm-mob-dn-vo-pr-br-cr,
                var(--_ctm-tab-dn-vo-pr-br-cr, var(--_ctm-dn-vo-pr-br-cr)));
            border-style: var(--_ctm-mob-dn-vo-pr-br-se,
                var(--_ctm-tab-dn-vo-pr-br-se, var(--_ctm-dn-vo-pr-br-se)));
            border-width: var(--_ctm-mob-dn-vo-pr-br-wh,
                var(--_ctm-tab-dn-vo-pr-br-wh, var(--_ctm-dn-vo-pr-br-wh)));
          }
        }
      }
    }

    &[data-show-video-shadow="true"] {
      .video__container {
        .video__thumbnail {
          .placeholder__img {
            box-shadow: var(--_ctm-mob-dn-vo-pr-sw-ae,
                var(--_ctm-tab-dn-vo-pr-sw-ae, var(--_ctm-dn-vo-pr-sw-ae))) var(--_ctm-mob-dn-vo-pr-sw-br,
                var(--_ctm-tab-dn-vo-pr-sw-br, var(--_ctm-dn-vo-pr-sw-br))) var(--_ctm-mob-dn-vo-pr-sw-sd,
                var(--_ctm-tab-dn-vo-pr-sw-sd, var(--_ctm-dn-vo-pr-sw-sd))) var(--_ctm-mob-dn-vo-pr-sw-cr,
                var(--_ctm-tab-dn-vo-pr-sw-cr, var(--_ctm-dn-vo-pr-sw-cr)));
          }
        }

        .video__data {
          video {
            box-shadow: var(--_ctm-mob-dn-vo-pr-sw-ae,
                var(--_ctm-tab-dn-vo-pr-sw-ae, var(--_ctm-dn-vo-pr-sw-ae))) var(--_ctm-mob-dn-vo-pr-sw-br,
                var(--_ctm-tab-dn-vo-pr-sw-br, var(--_ctm-dn-vo-pr-sw-br))) var(--_ctm-mob-dn-vo-pr-sw-sd,
                var(--_ctm-tab-dn-vo-pr-sw-sd, var(--_ctm-dn-vo-pr-sw-sd))) var(--_ctm-mob-dn-vo-pr-sw-cr,
                var(--_ctm-tab-dn-vo-pr-sw-cr, var(--_ctm-dn-vo-pr-sw-cr)));
          }
        }
      }
    }

    &[data-widget-border="true"] {
      .video__container {
        border-color: var(--_ctm-mob-dn-vo-wt-dn-br-cr,
            var(--_ctm-tab-dn-vo-wt-dn-br-cr, var(--_ctm-dn-vo-wt-dn-br-cr)));
        border-style: var(--_ctm-mob-dn-vo-wt-dn-br-se,
            var(--_ctm-tab-dn-vo-wt-dn-br-se, var(--_ctm-dn-vo-wt-dn-br-se)));
        border-width: var(--_ctm-mob-dn-vo-wt-dn-br-wh,
            var(--_ctm-tab-dn-vo-wt-dn-br-wh, var(--_ctm-dn-vo-wt-dn-br-wh)));
      }
    }

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

    &[data-content-border="true"] {
      .video__content {
        border-color: var(--_ctm-mob-dn-vo-tt-cr-dn-br-cr,
            var(--_ctm-tab-dn-vo-tt-cr-dn-br-cr, var(--_ctm-dn-vo-tt-cr-dn-br-cr)));

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

        border-width: var(--_ctm-mob-dn-vo-tt-cr-dn-br-wh,
            var(--_ctm-tab-dn-vo-tt-cr-dn-br-wh, var(--_ctm-dn-vo-tt-cr-dn-br-wh)));
      }
    }

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

    &[data-icon-background-shape="circle"] {
      .video__icon {
        border-radius: 50%;
      }
    }

    &[data-icon-background-shape="rectange"] {
      .video__icon {
        border-radius: 6px;
      }
    }

    &[data-icon-border="true"] {
      .video__icon {
        border-color: var(--_ctm-mob-dn-py-pe-br-cr,
            var(--_ctm-tab-dn-py-pe-br-cr, var(--_ctm-dn-py-pe-br-cr)));
        border-style: var(--_ctm-mob-dn-py-pe-br-se,
            var(--_ctm-tab-dn-py-pe-br-se, var(--_ctm-dn-py-pe-br-se)));
        border-width: var(--_ctm-mob-dn-py-pe-br-wh,
            var(--_ctm-tab-dn-py-pe-br-wh, var(--_ctm-dn-py-pe-br-wh)));
      }
    }

    .video__icon {
      box-shadow: var(--_ctm-mob-dn-py-pe-sw-ae,
          var(--_ctm-tab-dn-py-pe-sw-ae, var(--_ctm-dn-py-pe-sw-ae))) var(--_ctm-mob-dn-py-pe-sw-br,
          var(--_ctm-tab-dn-py-pe-sw-br, var(--_ctm-dn-py-pe-sw-br))) var(--_ctm-mob-dn-py-pe-sw-sd,
          var(--_ctm-tab-dn-py-pe-sw-sd, var(--_ctm-dn-py-pe-sw-sd))) var(--_ctm-mob-dn-py-pe-sw-cr,
          var(--_ctm-tab-dn-py-pe-sw-cr, var(--_ctm-dn-py-pe-sw-cr)));
    }

    .video__container {
      display: flex;
      gap: var(--_ctm-mob-dn-vo-wt-lt-wt-tt-ad-im-sg,
          var(--_ctm-tab-dn-vo-wt-lt-wt-tt-ad-im-sg, var(--_ctm-dn-vo-wt-lt-wt-tt-ad-im-sg)));
      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
      background-color: var(--_ctm-mob-dn-vo-wt-dn-bd-cr,
          var(--_ctm-tab-dn-vo-wt-dn-bd-cr, var(--_ctm-dn-vo-wt-dn-bd-cr)));
      flex-direction: var(--_sf-fd-bn);
      align-items: center;
      justify-content: var(--_sf-jc, center);
      box-shadow: var(--_show-shadow,
          var(--_ctm-mob-dn-vo-wt-dn-sw-ae,
            var(--_ctm-tab-dn-vo-wt-dn-sw-ae, var(--_ctm-dn-vo-wt-dn-sw-ae))) var(--_ctm-mob-dn-vo-wt-dn-sw-br,
            var(--_ctm-tab-dn-vo-wt-dn-sw-br, var(--_ctm-dn-vo-wt-dn-sw-br))) var(--_ctm-mob-dn-vo-wt-dn-sw-sd,
            var(--_ctm-tab-dn-vo-wt-dn-sw-sd, var(--_ctm-dn-vo-wt-dn-sw-sd))) var(--_ctm-mob-dn-vo-wt-dn-sw-cr,
            var(--_ctm-tab-dn-vo-wt-dn-sw-cr, var(--_ctm-dn-vo-wt-dn-sw-cr))));
      width: 100%;
      height: auto;
      border-radius: var(--_ctm-mob-dn-vo-wt-dn-br-rs,
          var(--_ctm-tab-dn-vo-wt-dn-br-rs, var(--_ctm-dn-vo-wt-dn-br-rs)));

      .video__content {
        display: flex;
        flex-direction: column;
        padding: var(--_ctm-mob-dn-vo-tt-lt-tt-vl-pg,
            var(--_ctm-tab-dn-vo-tt-lt-tt-vl-pg, var(--_ctm-dn-vo-tt-lt-tt-vl-pg))) var(--_ctm-mob-dn-vo-tt-lt-tt-hl-pg,
            var(--_ctm-tab-dn-vo-tt-lt-tt-hl-pg, var(--_ctm-dn-vo-tt-lt-tt-hl-pg)));
        gap: var(--_ctm-mob-dn-vo-tt-lt-te-ad-dn-sg,
            var(--_ctm-tab-dn-vo-tt-lt-te-ad-dn-sg, var(--_ctm-dn-vo-tt-lt-te-ad-dn-sg)));

        background-color: var(--_ctm-dn-vo-tt-cr-dn-bd-cr, var(--_tst-dn-vo-tt-cr-dn-bd-cr));
        background-color: var(--_ctm-mob-dn-vo-tt-cr-dn-bd-cr,
            var(--_ctm-tab-dn-vo-tt-cr-dn-bd-cr, var(--_ctm-dn-vo-tt-cr-dn-bd-cr)));
        border-radius: var(--_ctm-mob-dn-vo-tt-cr-dn-br-rs,
            var(--_ctm-tab-dn-vo-tt-cr-dn-br-rs, var(--_ctm-dn-vo-tt-cr-dn-br-rs)));
        box-shadow: var(--_show-text-content-shadow,
            var(--_ctm-mob-dn-vo-tt-cr-dn-sw-ae,
              var(--_ctm-tab-dn-vo-tt-cr-dn-sw-ae, var(--_ctm-dn-vo-tt-cr-dn-sw-ae))) var(--_ctm-mob-dn-vo-tt-cr-dn-sw-br,
              var(--_ctm-tab-dn-vo-tt-cr-dn-sw-br, var(--_ctm-dn-vo-tt-cr-dn-sw-br))) var(--_ctm-mob-dn-vo-tt-cr-dn-sw-sd,
              var(--_ctm-tab-dn-vo-tt-cr-dn-sw-sd, var(--_ctm-dn-vo-tt-cr-dn-sw-sd))) var(--_ctm-mob-dn-vo-tt-cr-dn-sw-cr,
              var(--_ctm-tab-dn-vo-tt-cr-dn-sw-cr, var(--_ctm-dn-vo-tt-cr-dn-sw-cr))));

        h3 {
          color: var(--_ctm-mob-dn-vo-wt-dn-cr,
              var(--_ctm-tab-dn-vo-wt-dn-cr, var(--_ctm-dn-vo-wt-dn-cr)));
          font-family: var(--_sf-hr-ff,
              var(--_ctm-mob-dn-vo-wt-dn-ft-fy,
                var(--_ctm-tab-dn-vo-wt-dn-ft-fy, var(--_ctm-dn-vo-wt-dn-ft-fy))));
          font-size: var(--_ctm-mob-dn-vo-wt-dn-ft-se,
              var(--_ctm-tab-dn-vo-wt-dn-ft-se, var(--_ctm-dn-vo-wt-dn-ft-se)));
          font-weight: var(--_ctm-mob-dn-vo-wt-dn-ft-wt,
              var(--_ctm-tab-dn-vo-wt-dn-ft-wt, var(--_ctm-dn-vo-wt-dn-ft-wt)));
          font-style: var(--_ctm-mob-dn-vo-wt-dn-ft-se-ic,
              var(--_ctm-tab-dn-vo-wt-dn-ft-se-ic, var(--_ctm-dn-vo-wt-dn-ft-se-ic)));
          text-align: var(--_ctm-mob-dn-vo-wt-dn-tt-an,
              var(--_ctm-tab-dn-vo-wt-dn-tt-an, var(--_ctm-dn-vo-wt-dn-tt-an)));
          letter-spacing: var(--_ctm-mob-dn-vo-wt-dn-lr-sg,
              var(--_ctm-tab-dn-vo-wt-dn-lr-sg, var(--_ctm-dn-vo-wt-dn-lr-sg)));
          line-height: var(--_ctm-mob-dn-vo-wt-dn-le-ht,
              var(--_ctm-tab-dn-vo-wt-dn-le-ht, var(--_ctm-dn-vo-wt-dn-le-ht)));
          text-decoration: var(--_ctm-mob-dn-vo-wt-dn-ue,
              var(--_ctm-tab-dn-vo-wt-dn-ue, var(--_ctm-dn-vo-wt-dn-ue)));
          text-transform: var(--_ctm-mob-dn-vo-wt-dn-tt-tm,
              var(--_ctm-tab-dn-vo-wt-dn-tt-tm, var(--_ctm-dn-vo-wt-dn-tt-tm, none)));
          word-wrap: var(--_ctm-mob-dn-vo-wt-dn-wd-wp,
              var(--_ctm-tab-dn-vo-wt-dn-wd-wp, var(--_ctm-dn-vo-wt-dn-wd-wp, normal)));
          word-break: var(--_ctm-mob-dn-vo-wt-dn-wd-bk,
              var(--_ctm-tab-dn-vo-wt-dn-wd-bk, var(--_ctm-dn-vo-wt-dn-wd-bk, normal)));
        }

        p {
          color: var(--_ctm-mob-dn-vo-wt-dn-cr-dc,
              var(--_ctm-tab-dn-vo-wt-dn-cr-dc, var(--_ctm-dn-vo-wt-dn-cr-dc)));
          font-family: var(--_sf-hr-ff,
              var(--_ctm-mob-dn-vo-wt-dn-ft-fy-dc,
                var(--_ctm-tab-dn-vo-wt-dn-ft-fy-dc, var(--_ctm-dn-vo-wt-dn-ft-fy-dc))));
          font-size: var(--_ctm-mob-dn-vo-wt-dn-ft-se-dc,
              var(--_ctm-tab-dn-vo-wt-dn-ft-se-dc, var(--_ctm-dn-vo-wt-dn-ft-se-dc)));
          font-weight: var(--_ctm-mob-dn-vo-wt-dn-ft-wt-dc,
              var(--_ctm-tab-dn-vo-wt-dn-ft-wt-dc, var(--_ctm-dn-vo-wt-dn-ft-wt-dc)));
          font-style: var(--_ctm-mob-dn-vo-wt-dn-ft-se-ic-dc,
              var(--_ctm-tab-dn-vo-wt-dn-ft-se-ic-dc, var(--_ctm-dn-vo-wt-dn-ft-se-ic-dc)));
          text-align: var(--_ctm-mob-dn-vo-wt-dn-tt-an-dc,
              var(--_ctm-tab-dn-vo-wt-dn-tt-an-dc, var(--_ctm-dn-vo-wt-dn-tt-an-dc)));
          letter-spacing: var(--_ctm-mob-dn-vo-wt-dn-lr-sg-dc,
              var(--_ctm-tab-dn-vo-wt-dn-lr-sg-dc, var(--_ctm-dn-vo-wt-dn-lr-sg-dc)));
          line-height: var(--_ctm-mob-dn-vo-wt-dn-le-ht-dc,
              var(--_ctm-tab-dn-vo-wt-dn-le-ht-dc, var(--_ctm-dn-vo-wt-dn-le-ht-dc)));
          text-decoration: var(--_ctm-mob-dn-vo-wt-dn-ue-dc,
              var(--_ctm-tab-dn-vo-wt-dn-ue-dc, var(--_ctm-dn-vo-wt-dn-ue-dc)));
          text-transform: var(--_ctm-mob-dn-vo-wt-dn-tt-tm-dc,
              var(--_ctm-tab-dn-vo-wt-dn-tt-tm-dc, var(--_ctm-dn-vo-wt-dn-tt-tm-dc, none)));
          word-wrap: var(--_ctm-mob-dn-vo-wt-dn-wd-wp-dc,
              var(--_ctm-tab-dn-vo-wt-dn-wd-wp-dc, var(--_ctm-dn-vo-wt-dn-wd-wp-dc, normal)));
          word-break: var(--_ctm-mob-dn-vo-wt-dn-wd-bk-dc,
              var(--_ctm-tab-dn-vo-wt-dn-wd-bk-dc, var(--_ctm-dn-vo-wt-dn-wd-bk-dc, normal)));
        }
      }

      .video__data {
        video {
          // max-width: 100%;
          width: prepareMediaVariable(--_ctm-lt-vo-wh, 100%);
          height: prepareMediaVariable(--_ctm-lt-vo-ht, 100%);
          // border-radius: var(
          //   --_ctm-mob-dn-vo-wt-dn-br-rs,
          //   var(--_ctm-tab-dn-vo-wt-dn-br-rs, var(--_ctm-dn-vo-wt-dn-br-rs))
          // );
          background-color: var(--_ctm-mob-dn-vo-pr-bd-cr,
              var(--_ctm-tab-dn-vo-pr-bd-cr, var(--_ctm-dn-vo-pr-bd-cr)));
          border-radius: var(--_ctm-mob-dn-vo-pr-br-rs,
              var(--_ctm-tab-dn-vo-pr-br-rs, var(--_ctm-dn-vo-pr-br-rs)));
        }
      }

      .video__thumbnail {
        position: relative;
        // width: 100%;
        width: prepareMediaVariable(--_ctm-lt-vo-wh, 100%);
        height: prepareMediaVariable(--_ctm-lt-vo-ht, auto);

        .placeholder__img {
          // width: 100%;
          width: prepareMediaVariable(--_ctm-lt-vo-wh, 100%);
          height: prepareMediaVariable(--_ctm-lt-vo-ht, 100%);

          background-color: var(--_ctm-mob-dn-vo-pr-bd-cr,
              var(--_ctm-tab-dn-vo-pr-bd-cr, var(--_ctm-dn-vo-pr-bd-cr)));
          border-radius: var(--_ctm-mob-dn-vo-pr-br-rs,
              var(--_ctm-tab-dn-vo-pr-br-rs, var(--_ctm-dn-vo-pr-br-rs)));

          // position: absolute;
          // left: 0;
          // top: 0;
        }

        .video__icon {
          display: var(--_d-flex);
          align-items: center;
          justify-content: center;
          cursor: pointer;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          background-color: var(--_ctm-mob-dn-py-pe-bd-cr,
              var(--_ctm-tab-dn-py-pe-bd-cr, var(--_ctm-dn-py-pe-bd-cr)));
          padding: #{prepareMediaVariable(--_ctm-dn-py-pe-pg)};
          box-sizing: border-box;

          // width: calc(
          //   var(--_ctm-mob-dn-py-pe-se, var(--_ctm-tab-dn-py-pe-se, var(--_ctm-dn-py-pe-se))) + 40px
          // );
          // height: calc(
          //   var(--_ctm-mob-dn-py-pe-se, var(--_ctm-tab-dn-py-pe-se, var(--_ctm-dn-py-pe-se))) + 40px
          // );
          --_perc: 2.5;
          width: calc(var(--_perc) * #{prepareMediaVariable(--_ctm-dn-py-pe-se)});
          height: calc(var(--_perc) * #{prepareMediaVariable(--_ctm-dn-py-pe-se)});

          svg {
            width: var(--_ctm-mob-dn-py-pe-se,
                var(--_ctm-tab-dn-py-pe-se, var(--_ctm-dn-py-pe-se)));
            height: var(--_ctm-mob-dn-py-pe-se,
                var(--_ctm-tab-dn-py-pe-se, var(--_ctm-dn-py-pe-se)));

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