@use "sass:map";
@use "sass:list";

[data-div-type="element"] {
  &[data-element-type="tabs"] {
    // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
    width: var(
      --_sf-el-wh-st-mx,
      calc(
        1% *
          var(
            --_ctm-mob-tabs-ele-nw-wh-vl,
            var(--_ctm-tab-tabs-ele-nw-wh-vl, var(--_ctm-tabs-ele-nw-wh-vl, var(--_sf-nw-wh)))
          )
      )
    );
    // margin: var(--_ctm-lt-mn, --_tst-lt-mn);
    // width: calc(1% * var(--_ctm-tab-lt-wh, auto));
    // width: 100%;
    // height: var(--_ctm-pro-lt-ht) !important;
    // width: 100%;
    height: auto;
    margin: var(--_ctm-mob-tabs-lt-mn, var(--_ctm-tab-lt-mn, --_ctm-lt-mn));
    background: var(
      --_ctm-mob-tabs-dn-bd-cr,
      var(--_ctm-tab-tabs-dn-bd-cr, var(--_ctm-tabs-dn-bd-cr))
    );
    // aspect-ratio: 1 / var(--_sf-aspect-ratio);
    // --_aspect-ratio: calc(
    //   1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
    // );

    & > .wrapper {
      width: 100%;
    }
    .tabs__main {
      background-color: var(
        --_ctm-mob-tabs-dn-tb-cr-bd-cr,
        var(--_ctm-tab-tabs-dn-tb-cr-bd-cr, var(--_ctm-tabs-dn-tb-cr-bd-cr))
      );
      border-color: var(
        --_ctm-mob-tabs-dn-tb-cr-br-cr,
        var(--_ctm-tab-tabs-dn-tb-cr-br-cr, var(--_ctm-tabs-dn-tb-cr-br-cr))
      );
      border-style: var(
        --_ctm-mob-tabs-dn-tb-cr-br-se,
        var(--_ctm-tab-tabs-dn-tb-cr-br-se, var(--_ctm-tabs-dn-tb-cr-br-se))
      );
      border-width: var(
        --_ctm-mob-tabs-dn-tb-cr-br-wh,
        var(--_ctm-tab-tabs-dn-tb-cr-br-wh, var(--_ctm-tabs-dn-tb-cr-br-wh))
      );
      border-radius: var(
        --_ctm-mob-tabs-dn-tb-cr-br-rs,
        var(--_ctm-tab-tabs-dn-tb-cr-br-rs, var(--_ctm-tabs-dn-tb-cr-br-rs))
      );
      box-shadow: var
        (
          --_show-shadow,
          var(
              --_ctm-mob-tabs-dn-tb-cr-sw-ae,
              var(--_ctm-tab-tabs-dn-tb-cr-sw-ae, var(--_ctm-tabs-dn-tb-cr-sw-ae))
            )
            var(
              --_ctm-mob-tabs-dn-tb-cr-sw-br,
              var(--_ctm-tab-tabs-dn-tb-cr-sw-br, var(--_ctm-tabs-dn-tb-cr-sw-br))
            )
            var(
              --_ctm-mob-tabs-dn-tb-cr-sw-sd,
              var(--_ctm-tab-tabs-dn-tb-cr-sw-sd, var(--_ctm-tabs-dn-tb-cr-sw-sd))
            )
            var(
              --_ctm-mob-tabs-dn-tb-cr-sw-cr,
              var(--_ctm-tab-tabs-dn-tb-cr-sw-cr, var(--_ctm-tabs-dn-tb-cr-sw-cr))
            )
        );
      padding: var(--_ctm-tabs-lt-pg);
      &.tabs__vertical {
        .tabs {
          .tabs__container {
            flex-direction: column;
            width: 120px;
          }
        }
      }
      &.tabs__hr {
        .tabs {
          flex-direction: column;
          .tabs__container {
            width: 100%;
          }
        }
      }
      .tabs {
        display: flex;
        gap: var(
          --_ctm-mob-tabs-lt-tb-cr,
          var(--_ctm-tab-tabs-lt-tb-cr, var(--_ctm-tabs-lt-tb-cr))
        );

        .tabs__container {
          display: flex;
          justify-content: var(
            --_ctm-mob-tabs-lt-tb-at,
            var(--_ctm-tab-tabs-lt-tb-at, var(--_ctm-tabs-lt-tb-at))
          );
          align-items: center;
          background-color: var(--_gray-100);
          // gap: var(--_ctm-tabs-lt-tb-sg);
          .tab {
            cursor: pointer;
            text-align: left;
            padding: var(
                --_ctm-mob-tabs-lt-hl-pg,
                var(--_ctm-tab-tabs-lt-hl-pg, var(--_ctm-tabs-lt-hl-pg))
              )
              var(
                --_ctm-mob-tabs-lt-vl-pg,
                var(--_ctm-tab-tabs-lt-vl-pg, var(--_ctm-tabs-lt-vl-pg))
              );
            background-color: var(
              --_ctm-mob-tabs-dn-ts-dt-se-bd-cr,
              var(--_ctm-tab-tabs-dn-ts-dt-se-bd-cr, var(--_ctm-tabs-dn-ts-dt-se-bd-cr))
            );
            border-color: var(
              --_ctm-mob-tabs-dn-ts-dt-se-br-cr,
              var(--_ctm-tab-tabs-dn-ts-dt-se-br-cr, var(--_ctm-tabs-dn-ts-dt-se-br-cr))
            );
            border-style: var(
              --_ctm-mob-tabs-dn-ts-dt-se-br-se,
              var(--_ctm-tab-tabs-dn-ts-dt-se-br-se, var(--_ctm-tabs-dn-ts-dt-se-br-se))
            );
            border-width: var(
              --_ctm-mob-tabs-dn-ts-dt-se-br-wh,
              var(--_ctm-tab-tabs-dn-ts-dt-se-br-wh, var(--_ctm-tabs-dn-ts-dt-se-br-wh))
            );
            border-radius: var(
              --_ctm-mob-tabs-dn-ts-dt-se-br-rs,
              var(--_ctm-tab-tabs-dn-ts-dt-se-br-rs, var(--_ctm-tabs-dn-ts-dt-se-br-rs))
            );
            box-shadow: var(
                --_ctm-mob-tabs-dn-ts-dt-se-sw-ae,
                var(--_ctm-tab-tabs-dn-ts-dt-se-sw-ae, var(--_ctm-tabs-dn-ts-dt-se-sw-ae))
              )
              var(
                --_ctm-mob-tabs-dn-ts-dt-se-sw-br,
                var(--_ctm-tab-tabs-dn-ts-dt-se-sw-br, var(--_ctm-tabs-dn-ts-dt-se-sw-br))
              )
              var(
                --_ctm-mob-tabs-dn-ts-dt-se-sw-sd,
                var(--_ctm-tab-tabs-dn-ts-dt-se-sw-sd, var(--_ctm-tabs-dn-ts-dt-se-sw-sd))
              )
              var(
                --_ctm-mob-tabs-dn-ts-dt-se-sw-cr,
                var(--_ctm-tab-tabs-dn-ts-dt-se-sw-cr, var(--_ctm-tabs-dn-ts-dt-se-sw-cr))
              );
            color: var(
              --_ctm-mob-tabs-dn-ts-dt-se-cr,
              var(--_ctm-tab-tabs-dn-ts-dt-se-cr, var(--_ctm-tabs-dn-ts-dt-se-cr))
            );
            font-family: var(
              --_sf-hr-ff,
              var(
                --_ctm-mob-tabs-dn-ts-dt-se-ft-fy,
                var(--_ctm-tab-tabs-dn-ts-dt-se-ft-fy, var(--_ctm-tabs-dn-ts-dt-se-ft-fy))
              )
            );
            text-transform: var(
              --_sf-hr-tt-tm,
              var(
                --_ctm-mob-tabs-dn-ts-dt-se-tt-tm,
                var(--_ctm-tab-tabs-dn-ts-dt-se-tt-tm, var(--_ctm-tabs-dn-ts-dt-se-tt-tm))
              )
            );
            word-wrap: var(
              --_sf-hr-wd-wp,
              var(
                --_ctm-mob-tabs-dn-ts-dt-se-wd-wp,
                var(--_ctm-tab-tabs-dn-ts-dt-se-wd-wp, var(--_ctm-tabs-dn-ts-dt-se-wd-wp))
              )
            );
            word-break: var(
              --_sf-hr-wd-bk,
              var(
                --_ctm-mob-tabs-dn-ts-dt-se-wd-bk,
                var(--_ctm-tab-tabs-dn-ts-dt-se-wd-bk, var(--_ctm-tabs-dn-ts-dt-se-wd-bk))
              )
            );
            font-size: var(
              --_ctm-mob-tabs-dn-ts-dt-se-ft-se,
              var(--_ctm-tab-tabs-dn-ts-dt-se-ft-se, var(--_ctm-tabs-dn-ts-dt-se-ft-se))
            );
            font-weight: var(
              --_ctm-mob-tabs-dn-ts-dt-se-ft-wt,
              var(--_ctm-tab-tabs-dn-ts-dt-se-ft-wt, var(--_ctm-tabs-dn-ts-dt-se-ft-wt))
            );
            font-style: var(
              --_ctm-mob-tabs-dn-ts-dt-se-ft-se-ic,
              var(--_ctm-tab-tabs-dn-ts-dt-se-ft-se-ic, var(--_ctm-tabs-dn-ts-dt-se-ft-se-ic))
            );
            text-align: var(
              --_ctm-mob-tabs-dn-ts-dt-se-tt-an,
              var(--_ctm-tab-tabs-dn-ts-dt-se-tt-an, var(--_ctm-tabs-dn-ts-dt-se-tt-an))
            );
            letter-spacing: var(
              --_ctm-mob-tabs-dn-ts-dt-se-lr-sg,
              var(--_ctm-tab-tabs-dn-ts-dt-se-lr-sg, var(--_ctm-tabs-dn-ts-dt-se-lr-sg))
            );
            line-height: var(
              --_ctm-mob-tabs-dn-ts-dt-se-le-ht,
              var(--_ctm-tab-tabs-dn-ts-dt-se-le-ht, var(--_ctm-tabs-dn-ts-dt-se-le-ht))
            );
            text-decoration: var(
              --_ctm-mob-tabs-dn-ts-dt-se-ue,
              var(--_ctm-tab-tabs-dn-ts-dt-se-ue, var(--_ctm-tabs-dn-ts-dt-se-ue))
            );

            &:hover {
              background-color: var(
                --_ctm-mob-tabs-dn-ts-hr-se-bd-cr,
                var(--_ctm-tab-tabs-dn-ts-hr-se-bd-cr, var(--_ctm-tabs-dn-ts-hr-se-bd-cr))
              );
              border-color: var(
                --_ctm-mob-tabs-dn-ts-hr-se-br-cr,
                var(--_ctm-tab-tabs-dn-ts-hr-se-br-cr, var(--_ctm-tabs-dn-ts-hr-se-br-cr))
              );
              border-style: var(
                --_ctm-mob-tabs-dn-ts-hr-se-br-se,
                var(--_ctm-tab-tabs-dn-ts-hr-se-br-se, var(--_ctm-tabs-dn-ts-hr-se-br-se))
              );
              border-width: var(
                --_ctm-mob-tabs-dn-ts-hr-se-br-wh,
                var(--_ctm-tab-tabs-dn-ts-hr-se-br-wh, var(--_ctm-tabs-dn-ts-hr-se-br-wh))
              );
              border-radius: var(
                --_ctm-mob-tabs-dn-ts-hr-se-br-rs,
                var(--_ctm-tab-tabs-dn-ts-hr-se-br-rs, var(--_ctm-tabs-dn-ts-hr-se-br-rs))
              );
              box-shadow: var(
                  --_ctm-mob-tabs-dn-ts-hr-se-sw-ae,
                  var(--_ctm-tab-tabs-dn-ts-hr-se-sw-ae, var(--_ctm-tabs-dn-ts-hr-se-sw-ae))
                )
                var(
                  --_ctm-mob-tabs-dn-ts-hr-se-sw-br,
                  var(--_ctm-tab-tabs-dn-ts-hr-se-sw-br, var(--_ctm-tabs-dn-ts-hr-se-sw-br))
                )
                var(
                  --_ctm-mob-tabs-dn-ts-hr-se-sw-sd,
                  var(--_ctm-tab-tabs-dn-ts-hr-se-sw-sd, var(--_ctm-tabs-dn-ts-hr-se-sw-sd))
                )
                var(
                  --_ctm-mob-tabs-dn-ts-hr-se-sw-cr,
                  var(--_ctm-tab-tabs-dn-ts-hr-se-sw-cr, var(--_ctm-tabs-dn-ts-hr-se-sw-cr))
                );
              color: var(
                --_ctm-mob-tabs-dn-ts-hr-se-cr,
                var(--_ctm-tab-tabs-dn-ts-hr-se-cr, var(--_ctm-tabs-dn-ts-hr-se-cr))
              );
              font-family: var(
                --_ctm-mob-tabs-dn-ts-hr-se-ft-fy,
                var(--_ctm-tab-tabs-dn-ts-hr-se-ft-fy, var(--_ctm-tabs-dn-ts-hr-se-ft-fy))
              );
              text-transform: var(
                --_ctm-mob-tabs-dn-ts-hr-se-tt-tm,
                var(--_ctm-tab-tabs-dn-ts-hr-se-tt-tm, var(--_ctm-tabs-dn-ts-hr-se-tt-tm))
              );
              word-wrap: var(
                --_ctm-mob-tabs-dn-ts-hr-se-wd-wp,
                var(--_ctm-tab-tabs-dn-ts-hr-se-wd-wp, var(--_ctm-tabs-dn-ts-hr-se-wd-wp))
              );
              word-break: var(
                --_ctm-mob-tabs-dn-ts-hr-se-wd-bk,
                var(--_ctm-tab-tabs-dn-ts-hr-se-wd-bk, var(--_ctm-tabs-dn-ts-hr-se-wd-bk))
              );
              font-size: var(
                --_ctm-mob-tabs-dn-ts-hr-se-ft-se,
                var(--_ctm-tab-tabs-dn-ts-hr-se-ft-se, var(--_ctm-tabs-dn-ts-hr-se-ft-se))
              );
              font-weight: var(
                --_ctm-mob-tabs-dn-ts-hr-se-ft-wt,
                var(--_ctm-tab-tabs-dn-ts-hr-se-ft-wt, var(--_ctm-tabs-dn-ts-hr-se-ft-wt))
              );
              font-style: var(
                --_ctm-mob-tabs-dn-ts-hr-se-ft-se-ic,
                var(--_ctm-tab-tabs-dn-ts-hr-se-ft-se-ic, var(--_ctm-tabs-dn-ts-hr-se-ft-se-ic))
              );
              text-align: var(
                --_ctm-mob-tabs-dn-ts-hr-se-tt-an,
                var(--_ctm-tab-tabs-dn-ts-hr-se-tt-an, var(--_ctm-tabs-dn-ts-hr-se-tt-an))
              );
              letter-spacing: var(
                --_ctm-mob-tabs-dn-ts-hr-se-lr-sg,
                var(--_ctm-tab-tabs-dn-ts-hr-se-lr-sg, var(--_ctm-tabs-dn-ts-hr-se-lr-sg))
              );
              line-height: var(
                --_ctm-mob-tabs-dn-ts-hr-se-le-ht,
                var(--_ctm-tab-tabs-dn-ts-hr-se-le-ht, var(--_ctm-tabs-dn-ts-hr-se-le-ht))
              );
              text-decoration: var(
                --_ctm-mob-tabs-dn-ts-hr-se-ue,
                var(--_ctm-tab-tabs-dn-ts-hr-se-ue, var(--_ctm-tabs-dn-ts-hr-se-ue))
              );
            }

            &.active {
              background-color: var(
                --_ctm-mob-tabs-dn-ts-sd-se-bd-cr,
                var(--_ctm-tab-tabs-dn-ts-sd-se-bd-cr, var(--_ctm-tabs-dn-ts-sd-se-bd-cr))
              );
              border-color: var(
                --_ctm-mob-tabs-dn-ts-sd-se-br-cr,
                var(--_ctm-tab-tabs-dn-ts-sd-se-br-cr, var(--_ctm-tabs-dn-ts-sd-se-br-cr))
              );
              border-style: var(
                --_ctm-mob-tabs-dn-ts-sd-se-br-se,
                var(--_ctm-tab-tabs-dn-ts-sd-se-br-se, var(--_ctm-tabs-dn-ts-sd-se-br-se))
              );
              border-width: var(
                --_ctm-mob-tabs-dn-ts-sd-se-br-wh,
                var(--_ctm-tab-tabs-dn-ts-sd-se-br-wh, var(--_ctm-tabs-dn-ts-sd-se-br-wh))
              );
              border-radius: var(
                --_ctm-mob-tabs-dn-ts-sd-se-br-rs,
                var(--_ctm-tab-tabs-dn-ts-sd-se-br-rs, var(--_ctm-tabs-dn-ts-sd-se-br-rs))
              );
              box-shadow: var(
                  --_ctm-mob-tabs-dn-ts-sd-se-sw-ae,
                  var(--_ctm-tab-tabs-dn-ts-sd-se-sw-ae, var(--_ctm-tabs-dn-ts-sd-se-sw-ae))
                )
                var(
                  --_ctm-mob-tabs-dn-ts-sd-se-sw-br,
                  var(--_ctm-tab-tabs-dn-ts-sd-se-sw-br, var(--_ctm-tabs-dn-ts-sd-se-sw-br))
                )
                var(
                  --_ctm-mob-tabs-dn-ts-sd-se-sw-sd,
                  var(--_ctm-tab-tabs-dn-ts-sd-se-sw-sd, var(--_ctm-tabs-dn-ts-sd-se-sw-sd))
                )
                var(
                  --_ctm-mob-tabs-dn-ts-sd-se-sw-cr,
                  var(--_ctm-tab-tabs-dn-ts-sd-se-sw-cr, var(--_ctm-tabs-dn-ts-sd-se-sw-cr))
                );
              color: var(
                --_ctm-mob-tabs-dn-ts-sd-se-cr,
                var(--_ctm-tab-tabs-dn-ts-sd-se-cr, var(--_ctm-tabs-dn-ts-sd-se-cr))
              );
              font-family: var(
                --_ctm-mob-tabs-dn-ts-sd-se-ft-fy,
                var(--_ctm-tab-tabs-dn-ts-sd-se-ft-fy, var(--_ctm-tabs-dn-ts-sd-se-ft-fy))
              );
              text-transform: var(
                --_ctm-mob-tabs-dn-ts-sd-se-tt-tm,
                var(--_ctm-tab-tabs-dn-ts-sd-se-tt-tm, var(--_ctm-tabs-dn-ts-sd-se-tt-tm))
              );
              word-wrap: var(
                --_ctm-mob-tabs-dn-ts-sd-se-wd-wp,
                var(--_ctm-tab-tabs-dn-ts-sd-se-wd-wp, var(--_ctm-tabs-dn-ts-sd-se-wd-wp))
              );
              word-break: var(
                --_ctm-mob-tabs-dn-ts-sd-se-wd-bk,
                var(--_ctm-tab-tabs-dn-ts-sd-se-wd-bk, var(--_ctm-tabs-dn-ts-sd-se-wd-bk))
              );
              font-size: var(
                --_ctm-mob-tabs-dn-ts-sd-se-ft-se,
                var(--_ctm-tab-tabs-dn-ts-sd-se-ft-se, var(--_ctm-tabs-dn-ts-sd-se-ft-se))
              );
              font-weight: var(
                --_ctm-mob-tabs-dn-ts-sd-se-ft-wt,
                var(--_ctm-tab-tabs-dn-ts-sd-se-ft-wt, var(--_ctm-tabs-dn-ts-sd-se-ft-wt))
              );
              font-style: var(
                --_ctm-mob-tabs-dn-ts-sd-se-ft-se-ic,
                var(--_ctm-tab-tabs-dn-ts-sd-se-ft-se-ic, var(--_ctm-tabs-dn-ts-sd-se-ft-se-ic))
              );
              text-align: var(
                --_ctm-mob-tabs-dn-ts-sd-se-tt-an,
                var(--_ctm-tab-tabs-dn-ts-sd-se-tt-an, var(--_ctm-tabs-dn-ts-sd-se-tt-an))
              );
              letter-spacing: var(
                --_ctm-mob-tabs-dn-ts-sd-se-lr-sg,
                var(--_ctm-tab-tabs-dn-ts-sd-se-lr-sg, var(--_ctm-tabs-dn-ts-sd-se-lr-sg))
              );
              line-height: var(
                --_ctm-mob-tabs-dn-ts-sd-se-le-ht,
                var(--_ctm-tab-tabs-dn-ts-sd-se-le-ht, var(--_ctm-tabs-dn-ts-sd-se-le-ht))
              );
              text-decoration: var(
                --_ctm-mob-tabs-dn-ts-sd-se-ue,
                var(--_ctm-tab-tabs-dn-ts-sd-se-ue, var(--_ctm-tabs-dn-ts-sd-se-ue))
              );
            }
          }

          .tab__content {
            background-color: var(
              --_ctm-mob-tabs-dn-tb-ct-cr-bd-cr,
              var(--_ctm-tab-tabs-dn-tb-ct-cr-bd-cr, var(--_ctm-tabs-dn-tb-ct-cr-bd-cr))
            );

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

            border-style: var(
              --_ctm-mob-tabs-dn-tb-ct-cr-br-se,
              var(--_ctm-tab-tabs-dn-tb-ct-cr-br-se, var(--_ctm-tabs-dn-tb-ct-cr-br-se))
            );

            border-width: var(
              --_ctm-mob-tabs-dn-tb-ct-cr-br-wh,
              var(--_ctm-tab-tabs-dn-tb-ct-cr-br-wh, var(--_ctm-tabs-dn-tb-ct-cr-br-wh))
            );

            border-radius: var(
              --_ctm-mob-tabs-dn-tb-ct-cr-br-rs,
              var(--_ctm-tab-tabs-dn-tb-ct-cr-br-rs, var(--_ctm-tabs-dn-tb-ct-cr-br-rs))
            );

            box-shadow: var(
                --_ctm-mob-tabs-dn-tb-ct-cr-sw-ae,
                var(--_ctm-tab-tabs-dn-tb-ct-cr-sw-ae, var(--_ctm-tabs-dn-tb-ct-cr-sw-ae))
              )
              var(
                --_ctm-mob-tabs-dn-tb-ct-cr-sw-br,
                var(--_ctm-tab-tabs-dn-tb-ct-cr-sw-br, var(--_ctm-tabs-dn-tb-ct-cr-sw-br))
              )
              var(
                --_ctm-mob-tabs-dn-tb-ct-cr-sw-sd,
                var(--_ctm-tab-tabs-dn-tb-ct-cr-sw-sd, var(--_ctm-tabs-dn-tb-ct-cr-sw-sd))
              )
              var(
                --_ctm-mob-tabs-dn-tb-ct-cr-sw-cr,
                var(--_ctm-tab-tabs-dn-tb-ct-cr-sw-cr, var(--_ctm-tabs-dn-tb-ct-cr-sw-cr))
              );
          }
        }
      }
    }
  }
}