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

[data-div-type="element"] {
  &[data-element-type="social"] {
    // 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)))
          )
      )
    );

    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%;
      // background-color: var(--_ctm-dn-fl-ad-bd-bd-cr, var(--_tst-dn-fl-ad-bd-bd-cr));
      // gap: var(--_ctm-lt-im-sg, var(--_tst-lt-im-sg));
      // justify-content: var(--_justify-center);
      // align-items: var(--_align-center);
    }

    &[data-social-alignment="horizontal"] {
      .social__container {
        flex-direction: row;
      }
    }

    &[data-social-alignment="vertical"] {
      .social__container {
        flex-direction: column;
      }
    }
    &[data-icon-style="Icon"] {
      .social__container {
        align-items: center;
      }
      &[data-item-alignment="left"] {
        .social__container {
          justify-content: flex-start;
          align-items: center;
        }
      }
      &[data-item-alignment="center"] {
        .social__container {
          justify-content: center;
          align-items: center;
        }
      }
      &[data-item-alignment="right"] {
        .social__container {
          justify-content: flex-end;
          align-items: center;
        }
      }
    }
    &[data-icon-position="left"] {
      .social__item {
        flex-direction: row;
      }
    }
    &[data-icon-position="right"] {
      .social__item {
        flex-direction: row-reverse;
      }
    }
    &[data-icon-position="top"] {
      .social__item {
        flex-direction: column;
      }
    }
    &[data-icon-position="bottom"] {
      .social__item {
        flex-direction: column-reverse;
      }
    }
    &[data-item-alignment="left"] {
      .social__item {
        align-items: flex-start;
      }
    }
    &[data-item-alignment="center"] {
      .social__item {
        align-items: center;
      }
    }
    &[data-item-alignment="right"] {
      .social__item {
        align-items: flex-end;
      }
    }

    &[data-widget-border="true"] {
      .social__container {
        border-color: var(
          --_ctm-mob-dn-sl-wt-br-cr,
          var(--_ctm-tab-dn-sl-wt-br-cr, var(--_ctm-dn-sl-wt-br-cr))
        );
        border-style: var(
          --_ctm-mob-dn-sl-wt-br-se,
          var(--_ctm-tab-dn-sl-wt-br-se, var(--_ctm-dn-sl-wt-br-se))
        );
        border-width: var(
          --_ctm-mob-dn-sl-wt-br-wh,
          var(--_ctm-tab-dn-sl-wt-br-wh, var(--_ctm-dn-sl-wt-br-wh))
        );
      }
    }
    &[data-item-show-icon-color="true"] {
      .social__container {
        & svg {
          path {
            stroke: var(--_ctm-dn-im-se-in-c1, var(--_tst-dn-im-se-in-c1));
            // Overrides the stroke-width presentation attribute baked into the icon markup.
            stroke-width: prepareMediaVariable(--_ctm-dn-im-se-se-wh, 1.25);
          }
        }
      }
    }
    &[data-widget-shadow="true"] {
      .social__container {
        box-shadow: var(
          --_show-shadow,
          var(--_ctm-mob-dn-sl-wt-sw-ae, var(--_ctm-tab-dn-sl-wt-sw-ae, var(--_ctm-dn-sl-wt-sw-ae)))
            var(
              --_ctm-mob-dn-sl-wt-sw-br,
              var(--_ctm-tab-dn-sl-wt-sw-br, var(--_ctm-dn-sl-wt-sw-br))
            )
            var(
              --_ctm-mob-dn-sl-wt-sw-sd,
              var(--_ctm-tab-dn-sl-wt-sw-sd, var(--_ctm-dn-sl-wt-sw-sd))
            )
            var(
              --_ctm-mob-dn-sl-wt-sw-cr,
              var(--_ctm-tab-dn-sl-wt-sw-cr, var(--_ctm-dn-sl-wt-sw-cr))
            )
        );
      }
    }
    &[data-item-border="true"] {
      .social__item {
        padding: var(--_ctm-mob-dn-im-se-pg, var(--_ctm-tab-dn-im-se-pg, var(--_ctm-dn-im-se-pg)));
        border-color: var(
          --_ctm-mob-dn-im-se-br-cr,
          var(--_ctm-tab-dn-im-se-br-cr, var(--_ctm-dn-im-se-br-cr))
        );
        border-style: var(
          --_ctm-mob-dn-im-se-br-se,
          var(--_ctm-tab-dn-im-se-br-se, var(--_ctm-dn-im-se-br-se))
        );
        border-width: var(
          --_ctm-mob-dn-im-se-br-wh,
          var(--_ctm-tab-dn-im-se-br-wh, var(--_ctm-dn-im-se-br-wh))
        );
      }
    }
    &[data-item-shadow="true"] {
      .social__item {
        box-shadow: var(
          --_show-shadow,
          var(--_ctm-mob-dn-im-se-sw-ae, var(--_ctm-tab-dn-im-se-sw-ae, var(--_ctm-dn-im-se-sw-ae)))
            var(
              --_ctm-mob-dn-im-se-sw-br,
              var(--_ctm-tab-dn-im-se-sw-br, var(--_ctm-dn-im-se-sw-br))
            )
            var(
              --_ctm-mob-dn-im-se-sw-sd,
              var(--_ctm-tab-dn-im-se-sw-sd, var(--_ctm-dn-im-se-sw-sd))
            )
            var(
              --_ctm-mob-dn-im-se-sw-cr,
              var(--_ctm-tab-dn-im-se-sw-cr, var(--_ctm-dn-im-se-sw-cr))
            )
        );
      }
    }
    .social__container {
      display: flex;
      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
      width: 100%;
      height: 100%;
      gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
      background-color: var(
        --_ctm-mob-dn-sl-wt-bd-cr,
        var(--_ctm-tab-dn-sl-wt-bd-cr, var(--_ctm-dn-sl-wt-bd-cr))
      );
      border-radius: var(
        --_ctm-mob-dn-sl-wt-br-rs,
        var(--_ctm-tab-dn-sl-wt-br-rs, var(--_ctm-dn-sl-wt-br-rs))
      );

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

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

      .social__item {
        width: 100%;
        height: 100%;
        flex-wrap: wrap;
        display: flex;
        gap: var(--_ctm-mob-lt-gp, var(--_ctm-tab-lt-gp, var(--_ctm-lt-gp)));
        background-color: var(
          --_ctm-mob-dn-im-se-bd-cr,
          var(--_ctm-tab-dn-im-se-bd-cr, var(--_ctm-dn-im-se-bd-cr))
        );
        border-radius: var(
          --_ctm-mob-dn-im-se-br-rs,
          var(--_ctm-tab-dn-im-se-br-rs, var(--_ctm-dn-im-se-br-rs))
        );
      }

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