@use "sass:map";
@use "sass:list";
@use "./functions.scss" as *;
$activeElementSelector: "[data-has-clicked='true']";
$overflowSelector: ".flex__overflow";
$root: "flex__tbs";
$sfKey: "--_flex-tbs-";
$tabHeader: "#{$root}__header";
$tabHeaderWrapper: "#{$tabHeader}__wrapper";
$tabBody: "#{$root}__body";
$tabBodyWrapper: #{$tabBody}__wrapper;

[data-div-type="element"] {
  &[data-element-type="tbs-v2"] {
    width: calc(1% * var(--_ctm-mob-tbs-ele-nw-wh-vl,
          var(--_ctm-tab-tbs-ele-nw-wh-vl, var(--_ctm-tbs-ele-nw-wh-vl, auto))));
    margin: var(--_ctm-mob-tbs-lt-mn,
        var(--_ctm-tab-tbs-lt-mn, var(--_ctm-tbs-lt-mn, var(--_ctm-lt-mn))));

    &[data-hs-br-tc="false"] {
      --_hide-tbs-own-border: none;
    }

    &[data-hs-bs-tc="false"] {
      --_hide-tbs-own-shadow: none;
    }

    &>div {
      &.wrapper {
        width: 100%;
        padding: var(--_ctm-mob-tbs-lt-pg, var(--_ctm-tab-tbs-lt-pg, var(--_ctm-tbs-lt-pg)));

        background-color: var(--_ctm-mob-tbs-dn-tb-cr-bd-cr,
            var(--_ctm-tab-tbs-dn-tb-cr-bd-cr, var(--_ctm-tbs-dn-tb-cr-bd-cr)));
        // background-image: var(
        //   --_ctm-mob-tbs-dn-bd-ie,
        //   var(--_ctm-tab-tbs-dn-bd-ie, var(--_ctm-tbs-dn-bd-ie))
        // );
        // background-attachment: var(
        //   --_ctm-mob-tbs-dn-bd-at,
        //   var(--_ctm-tab-tbs-dn-bd-at, var(--_ctm-tbs-dn-bd-at))
        // );
        // background-position: var(
        //   --_ctm-mob-tbs-dn-bd-pn,
        //   var(--_ctm-tab-tbs-dn-bd-pn, var(--_ctm-tbs-dn-bd-pn))
        // );
        // background-repeat: var(
        //   --_ctm-mob-tbs-dn-bd-rt,
        //   var(--_ctm-tab-tbs-dn-bd-rt, var(--_ctm-tbs-dn-bd-rt))
        // );
        // background-size: var(
        //   --_ctm-mob-tbs-dn-bd-se,
        //   var(--_ctm-tab-tbs-dn-bd-se, var(--_ctm-tbs-dn-bd-se))
        // );

        border-radius: var(--_ctm-mob-tbs-dn-tb-cr-br-rs,
            var(--_ctm-tab-tbs-dn-tb-cr-br-rs, var(--_ctm-tbs-dn-tb-cr-br-rs)));
        border-color: var(--_hide-tbs-own-border,
            var(--_ctm-mob-tbs-dn-tb-cr-br-cr,
              var(--_ctm-tab-tbs-dn-tb-cr-br-cr, var(--_ctm-tbs-dn-tb-cr-br-cr))));
        border-style: var(--_hide-tbs-own-border,
            var(--_ctm-mob-tbs-dn-tb-cr-br-se,
              var(--_ctm-tab-tbs-dn-tb-cr-br-se, var(--_ctm-tbs-dn-tb-cr-br-se))));
        border-width: var(--_hide-tbs-own-border,
            var(--_ctm-mob-tbs-dn-tb-cr-br-wh,
              var(--_ctm-tab-tbs-dn-tb-cr-br-wh, var(--_ctm-tbs-dn-tb-cr-br-wh))));
        box-shadow: var(--_hide-tbs-own-shadow,
            var(--_ctm-mob-tbs-dn-tb-cr-sw-ae,
              var(--_ctm-tab-tbs-dn-tb-cr-sw-ae, var(--_ctm-tbs-dn-tb-cr-sw-ae))) var(--_ctm-mob-tbs-dn-tb-cr-sw-br,
              var(--_ctm-tab-tbs-dn-tb-cr-sw-br, var(--_ctm-tbs-dn-tb-cr-sw-br))) var(--_ctm-mob-tbs-dn-tb-cr-sw-sd,
              var(--_ctm-tab-tbs-dn-tb-cr-sw-sd, var(--_ctm-tbs-dn-tb-cr-sw-sd))) var(--_ctm-mob-tbs-dn-tb-cr-sw-cr,
              var(--_ctm-tab-tbs-dn-tb-cr-sw-cr, var(--_ctm-tbs-dn-tb-cr-sw-cr))));

        display: var(--_d-flex) !important;
        min-height: var(--_ctm-mob-tbs-lt-ht,
            var(--_ctm-tab-tbs-lt-ht, var(--_ctm-tbs-lt-ht))) !important;
        flex-direction: var(#{$sfKey}fd, column);

        &.hrz {
          #{$sfKey}fd: column;
          #{$sfKey}fd-header: row;
          #{$sfKey}fd-jst: var(--_ctm-mob-tbs-lt-jy-ct,
              var(--_ctm-tab-tbs-lt-jy-ct, var(--_ctm-tbs-lt-jy-ct)));
        }

        &.vtl {
          #{$sfKey}fd: row;
          #{$sfKey}fd-header: column;
          #{$sfKey}fd-algn: var(--_ctm-mob-tbs-lt-an-is,
              var(--_ctm-tab-tbs-lt-an-is, var(--_ctm-tbs-lt-an-is)));
        }

        &>div {
          &.#{$tabHeader} {
            display: var(--_d-flex);

            &[data-hs-br="false"] {
              --_hide-btn-border: none;
            }

            &[data-hs-bs="false"] {
              --_hide-btn-shadow: none;
            }

            &[data-hs-br-hr="false"] {
              --_hide-btn-border-hr: none;
            }

            &[data-hs-bs-hr="false"] {
              --_hide-btn-shadow-hr: none;
            }

            &[data-hs-br-sd="false"] {
              --_hide-btn-border-sd: none;
            }

            &[data-hs-bs-sd="false"] {
              --_hide-btn-shadow-sd: none;
            }

            &[data-hs-in="false"] {
              --_hide-tbs-icon: none;
            }

            &[data-dp-md="textOnly"] {
              &>.#{$tabHeaderWrapper}>button>span.icon {
                display: none;
              }
            }

            &[data-dp-md="iconOnly"] {
              &>.#{$tabHeaderWrapper}>button>span:not(.icon) {
                display: none;
              }
            }

            &[data-tl-vl="stretched"] {
              --_sf-tl-vl-al: space-between;
            }

            &[data-layout-alignment="horizontal"] {
              &>.#{$tabHeaderWrapper}>button {
                flex-direction: row;
              }
            }

            &[data-layout-alignment="vertical"] {
              &>.#{$tabHeaderWrapper}>button {
                flex-direction: column;
              }
            }

            &>.#{$tabHeaderWrapper} {
              --_sf-gap-vl: var(--_ctm-mob-tbs-lt-tb-sg,
                  var(--_ctm-tab-tbs-lt-tb-sg, var(--_ctm-tbs-lt-tb-sg)));
              // width: 100%;
              width: prepareMediaVariable(--_ctm-tbs-dn-tb-cr-cr-wh, 100%);
              min-height: prepareMediaVariable(--_ctm-tbs-dn-tb-cr-cr-mn-ht, auto);
              padding: prepareMediaVariable(--_ctm-tbs-dn-tb-cr-pg, 0px);
              display: var(--_d-flex);
              flex-direction: var(#{$sfKey}fd-header, row);

              &:is(.vtl *) {
                justify-content: var(--_sf-tl-vl-al, var(#{$sfKey}fd-algn));
                row-gap: var(--_sf-gap-vl);
              }

              &:is(.hrz *) {
                justify-content: var(--_sf-tl-vl-al, var(#{$sfKey}fd-jst));
                column-gap: var(--_sf-gap-vl);

                &[data-ovf-vl="wrap"] {
                  flex-wrap: wrap;
                }

                &[data-ovf-vl="no wrap"] {
                  overflow-x: auto;
                  scrollbar-width: none;

                  &>button {
                    flex-shrink: 0;
                  }
                }
              }

              &>button {
                display: flex;
                padding-inline: var(--_ctm-mob-tbs-lt-hl-pg,
                    var(--_ctm-tab-tbs-lt-hl-pg, var(--_ctm-tbs-lt-hl-pg)));
                padding-block: var(--_ctm-mob-tbs-lt-vl-pg,
                    var(--_ctm-tab-tbs-lt-vl-pg, var(--_ctm-tbs-lt-vl-pg)));
                gap: var(--_sf-tbs-sd-in-gp,
                    var(--_sf-tbs-hr-in-gp,
                      var(--_ctm-mob-tbs-dn-ts-dt-se-in-gp,
                        var(--_ctm-tab-tbs-dn-ts-dt-se-in-gp, var(--_ctm-tbs-dn-ts-dt-se-in-gp)))));
                background-color: var(--_sf-tbs-sd-bg-cr,
                    var(--_sf-tbs-hr-bg-cr,
                      var(--_ctm-mob-tbs-dn-ts-dt-se-bd-cr,
                        var(--_ctm-tab-tbs-dn-ts-dt-se-bd-cr, var(--_ctm-tbs-dn-ts-dt-se-bd-cr)))));

                border-color: var(--_sf-tbs-sd-br-cr,
                    var(--_sf-tbs-hr-br-cr,
                      var(--_hide-btn-border,
                        var(--_ctm-mob-tbs-dn-ts-dt-se-br-cr,
                          var(--_ctm-tab-tbs-dn-ts-dt-se-br-cr, var(--_ctm-tbs-dn-ts-dt-se-br-cr))))));
                border-style: var(--_sf-tbs-sd-br-sty,
                    var(--_sf-tbs-hr-br-sty,
                      var(--_hide-btn-border,
                        var(--_ctm-mob-tbs-dn-ts-dt-se-br-se,
                          var(--_ctm-tab-tbs-dn-ts-dt-se-br-se, var(--_ctm-tbs-dn-ts-dt-se-br-se))))));
                border-width: var(--_sf-tbs-sd-br-wt,
                    var(--_sf-tbs-hr-br-wt,
                      var(--_hide-btn-border,
                        var(--_ctm-mob-tbs-dn-ts-dt-se-br-wh,
                          var(--_ctm-tab-tbs-dn-ts-dt-se-br-wh, var(--_ctm-tbs-dn-ts-dt-se-br-wh))))));
                border-radius: var(--_sf-tbs-sd-br-rs,
                    var(--_sf-tbs-hr-br-rs,
                      var(--_ctm-mob-tbs-dn-ts-dt-se-br-rs,
                        var(--_ctm-tab-tbs-dn-ts-dt-se-br-rs, var(--_ctm-tbs-dn-ts-dt-se-br-rs)))));

                box-shadow: var(--_sf-tbs-sd-bx-sw,
                    var(--_sf-tbs-hr-bx-sw,
                      var(--_hide-btn-shadow,
                        prepareMediaVariable(--_ctm-tbs-dn-ts-dt-se-sw-ae, 0 0) prepareMediaVariable(--_ctm-tbs-dn-ts-dt-se-sw-br, 0) prepareMediaVariable(--_ctm-tbs-dn-ts-dt-se-sw-sd, 0) prepareMediaVariable(--_ctm-tbs-dn-ts-dt-se-sw-cr, transparent))));

                &.active {
                  --_sf-tbs-sd-bg-cr: var(--_ctm-mob-tbs-dn-ts-sd-se-bd-cr,
                      var(--_ctm-tab-tbs-dn-ts-sd-se-bd-cr, var(--_ctm-tbs-dn-ts-sd-se-bd-cr)));

                  --_sf-tbs-sd-br-cr: var(--_hide-btn-border-sd,
                      var(--_ctm-mob-tbs-dn-ts-sd-se-br-cr,
                        var(--_ctm-tab-tbs-dn-ts-sd-se-br-cr, var(--_ctm-tbs-dn-ts-sd-se-br-cr))));
                  --_sf-tbs-sd-br-wt: var(--_hide-btn-border-sd,
                      var(--_ctm-mob-tbs-dn-ts-sd-se-br-wh,
                        var(--_ctm-tab-tbs-dn-ts-sd-se-br-wh, var(--_ctm-tbs-dn-ts-sd-se-br-wh))));
                  --_sf-tbs-sd-br-sty: var(--_hide-btn-border-sd,
                      var(--_ctm-mob-tbs-dn-ts-sd-se-br-se,
                        var(--_ctm-tab-tbs-dn-ts-sd-se-br-se, var(--_ctm-tbs-dn-ts-sd-se-br-se))));
                  --_sf-tbs-sd-br-rs: var(--_ctm-mob-tbs-dn-ts-sd-se-br-rs,
                      var(--_ctm-tab-tbs-dn-ts-sd-se-br-rs, var(--_ctm-tbs-dn-ts-sd-se-br-rs)));
                  --_sf-tbs-sd-sw-ae: var(--_ctm-mob-tbs-dn-ts-sd-se-sw-ae,
                      var(--_ctm-tab-tbs-dn-ts-sd-se-sw-ae, var(--_ctm-tbs-dn-ts-sd-se-sw-ae)));
                  --_sf-tbs-sd-sw-cr: var(--_ctm-mob-tbs-dn-ts-sd-se-sw-cr,
                      var(--_ctm-tab-tbs-dn-ts-sd-se-sw-cr, var(--_ctm-tbs-dn-ts-sd-se-sw-cr)));
                  --_sf-tbs-sd-sw-sd: var(--_ctm-mob-tbs-dn-ts-sd-se-sw-sd,
                      var(--_ctm-tab-tbs-dn-ts-sd-se-sw-sd, var(--_ctm-tbs-dn-ts-sd-se-sw-sd)));
                  --_sf-tbs-sd-sw-br: var(--_ctm-mob-tbs-dn-ts-sd-se-sw-br,
                      var(--_ctm-tab-tbs-dn-ts-sd-se-sw-br, var(--_ctm-tbs-dn-ts-sd-se-sw-br)));
                  --_sf-tbs-sd-bx-sw: var(--_hide-btn-shadow-sd,
                      var(--_sf-tbs-sd-sw-ae) var(--_sf-tbs-sd-sw-br) var(--_sf-tbs-sd-sw-sd) var(--_sf-tbs-sd-sw-cr));

                  --_sf-tbs-sd-ft-fy: var(--_ctm-mob-tbs-dn-ts-sd-se-ft-fy,
                      var(--_ctm-tab-tbs-dn-ts-sd-se-ft-fy, var(--_ctm-tbs-dn-ts-sd-se-ft-fy)));
                  --_sf-tbs-sd-tt-tm: var(--_ctm-mob-tbs-dn-ts-sd-se-tt-tm,
                      var(--_ctm-tab-tbs-dn-ts-sd-se-tt-tm, var(--_ctm-tbs-dn-ts-sd-se-tt-tm)));
                  --_sf-tbs-sd-wd-wp: var(--_ctm-mob-tbs-dn-ts-sd-se-wd-wp,
                      var(--_ctm-tab-tbs-dn-ts-sd-se-wd-wp, var(--_ctm-tbs-dn-ts-sd-se-wd-wp)));
                  --_sf-tbs-sd-wd-bk: var(--_ctm-mob-tbs-dn-ts-sd-se-wd-bk,
                      var(--_ctm-tab-tbs-dn-ts-sd-se-wd-bk, var(--_ctm-tbs-dn-ts-sd-se-wd-bk)));
                  --_sf-tbs-sd-ft-sz: var(--_ctm-mob-tbs-dn-ts-sd-se-ft-se,
                      var(--_ctm-tab-tbs-dn-ts-sd-se-ft-se, var(--_ctm-tbs-dn-ts-sd-se-ft-se)));
                  --_sf-tbs-sd-ft-cr: var(--_ctm-mob-tbs-dn-ts-sd-se-cr,
                      var(--_ctm-tab-tbs-dn-ts-sd-se-cr, var(--_ctm-tbs-dn-ts-sd-se-cr)));
                  --_sf-tbs-sd-ft-wt: var(--_ctm-mob-tbs-dn-ts-sd-se-ft-wt,
                      var(--_ctm-tab-tbs-dn-ts-sd-se-ft-wt, var(--_ctm-tbs-dn-ts-sd-se-ft-wt)));
                  --_sf-tbs-sd-ft-sty: var(--_ctm-mob-tbs-dn-ts-sd-se-ft-se-ic,
                      var(--_ctm-tab-tbs-dn-ts-sd-se-ft-se-ic, var(--_ctm-tbs-dn-ts-sd-se-ft-se-ic)));
                  --_sf-tbs-sd-ft-tdc: var(--_ctm-mob-tbs-dn-ts-sd-se-ue,
                      var(--_ctm-tab-tbs-dn-ts-sd-se-ue, var(--_ctm-tbs-dn-ts-sd-se-ue)));
                  --_sf-tbs-sd-ft-tln: var(--_ctm-mob-tbs-dn-ts-sd-se-tt-an,
                      var(--_ctm-tab-tbs-dn-ts-sd-se-tt-an, var(--_ctm-tbs-dn-ts-sd-se-tt-an)));
                  --_sf-tbs-sd-ft-lts: var(--_ctm-mob-tbs-dn-ts-sd-se-lr-sg,
                      var(--_ctm-tab-tbs-dn-ts-sd-se-lr-sg, var(--_ctm-tbs-dn-ts-sd-se-lr-sg)));
                  --_sf-tbs-sd-ft-lht: var(--_ctm-mob-tbs-dn-ts-sd-se-le-ht,
                      var(--_ctm-tab-tbs-dn-ts-sd-se-le-ht, var(--_ctm-tbs-dn-ts-sd-se-le-ht)));
                  --_sf-tbs-sd-ft-ttm: var(--_ctm-mob-tbs-dn-ts-sd-se-tt-tm,
                      var(--_ctm-tab-tbs-dn-ts-sd-se-tt-tm, var(--_ctm-tbs-dn-ts-sd-se-tt-tm)));
                  --_sf-tbs-sd-ft-wwr: var(--_ctm-mob-tbs-dn-ts-sd-se-wd-wr,
                      var(--_ctm-tab-tbs-dn-ts-sd-se-wd-wr, var(--_ctm-tbs-dn-ts-sd-se-wd-wr)));
                  --_sf-tbs-sd-ft-wbk: var(--_ctm-mob-tbs-dn-ts-sd-se-wd-bk,
                      var(--_ctm-tab-tbs-dn-ts-sd-se-wd-bk, var(--_ctm-tbs-dn-ts-sd-se-wd-bk)));

                  --_sf-tbs-sd-in-gp: var(--_ctm-mob-tbs-dn-ts-sd-se-in-gp,
                      var(--_ctm-tab-tbs-dn-ts-sd-se-in-gp, var(--_ctm-tbs-dn-ts-sd-se-in-gp)));
                  --_sf-tbs-sd-in-sz: var(--_ctm-mob-tbs-dn-ts-sd-se-in-se,
                      var(--_ctm-tab-tbs-dn-ts-sd-se-in-se, var(--_ctm-tbs-dn-ts-sd-se-in-se)));
                  --_sf-tbs-sd-in-cr: var(--_ctm-mob-tbs-dn-ts-sd-se-in-cr,
                      var(--_ctm-tab-tbs-dn-ts-sd-se-in-cr, var(--_ctm-tbs-dn-ts-sd-se-in-cr)));
                  --_sf-tbs-sd-in-al: var(--_ctm-mob-tbs-dn-ts-sd-se-vl-at,
                      var(--_ctm-tab-tbs-dn-ts-sd-se-vl-at, var(--_ctm-tbs-dn-ts-sd-se-vl-at)));
                }

                &:not(.active) {
                  &:hover {
                    --_sf-tbs-hr-bg-cr: var(--_ctm-mob-tbs-dn-ts-hr-se-bd-cr,
                        var(--_ctm-tab-tbs-dn-ts-hr-se-bd-cr, var(--_ctm-tbs-dn-ts-hr-se-bd-cr)));

                    --_sf-tbs-hr-br-cr: var(--_hide-btn-border-hr,
                        var(--_ctm-mob-tbs-dn-ts-hr-se-br-cr,
                          var(--_ctm-tab-tbs-dn-ts-hr-se-br-cr, var(--_ctm-tbs-dn-ts-hr-se-br-cr))));
                    --_sf-tbs-hr-br-wt: var(--_hide-btn-border-hr,
                        var(--_ctm-mob-tbs-dn-ts-hr-se-br-wh,
                          var(--_ctm-tab-tbs-dn-ts-hr-se-br-wh, var(--_ctm-tbs-dn-ts-hr-se-br-wh))));
                    --_sf-tbs-hr-br-sty: var(--_hide-btn-border-hr,
                        var(--_ctm-mob-tbs-dn-ts-hr-se-br-se,
                          var(--_ctm-tab-tbs-dn-ts-hr-se-br-se, var(--_ctm-tbs-dn-ts-hr-se-br-se))));
                    --_sf-tbs-hr-br-rs: var(--_ctm-mob-tbs-dn-ts-hr-se-br-rs,
                        var(--_ctm-tab-tbs-dn-ts-hr-se-br-rs, var(--_ctm-tbs-dn-ts-hr-se-br-rs)));
                    --_sf-tbs-hr-sw-ae: var(--_ctm-mob-tbs-dn-ts-hr-se-sw-ae,
                        var(--_ctm-tab-tbs-dn-ts-hr-se-sw-ae, var(--_ctm-tbs-dn-ts-hr-se-sw-ae)));
                    --_sf-tbs-hr-sw-cr: var(--_ctm-mob-tbs-dn-ts-hr-se-sw-cr,
                        var(--_ctm-tab-tbs-dn-ts-hr-se-sw-cr, var(--_ctm-tbs-dn-ts-hr-se-sw-cr)));
                    --_sf-tbs-hr-sw-sd: var(--_ctm-mob-tbs-dn-ts-hr-se-sw-sd,
                        var(--_ctm-tab-tbs-dn-ts-hr-se-sw-sd, var(--_ctm-tbs-dn-ts-hr-se-sw-sd)));
                    --_sf-tbs-hr-sw-br: var(--_ctm-mob-tbs-dn-ts-hr-se-sw-br,
                        var(--_ctm-tab-tbs-dn-ts-hr-se-sw-br, var(--_ctm-tbs-dn-ts-hr-se-sw-br)));
                    --_sf-tbs-hr-bx-sw: var(--_hide-btn-shadow-hr,
                        var(--_sf-tbs-hr-sw-ae) var(--_sf-tbs-hr-sw-br) var(--_sf-tbs-hr-sw-sd) var(--_sf-tbs-hr-sw-cr));

                    --_sf-tbs-hr-ft-fy: var(--_ctm-mob-tbs-dn-ts-hr-se-ft-fy,
                        var(--_ctm-tab-tbs-dn-ts-hr-se-ft-fy, var(--_ctm-tbs-dn-ts-hr-se-ft-fy)));
                    --_sf-tbs-hr-tt-tm: var(--_ctm-mob-tbs-dn-ts-hr-se-tt-tm,
                        var(--_ctm-tab-tbs-dn-ts-hr-se-tt-tm, var(--_ctm-tbs-dn-ts-hr-se-tt-tm)));
                    --_sf-tbs-hr-wd-wp: var(--_ctm-mob-tbs-dn-ts-hr-se-wd-wp,
                        var(--_ctm-tab-tbs-dn-ts-hr-se-wd-wp, var(--_ctm-tbs-dn-ts-hr-se-wd-wp)));
                    --_sf-tbs-hr-wd-bk: var(--_ctm-mob-tbs-dn-ts-hr-se-wd-bk,
                        var(--_ctm-tab-tbs-dn-ts-hr-se-wd-bk, var(--_ctm-tbs-dn-ts-hr-se-wd-bk)));
                    --_sf-tbs-hr-ft-sz: var(--_ctm-mob-tbs-dn-ts-hr-se-ft-se,
                        var(--_ctm-tab-tbs-dn-ts-hr-se-ft-se, var(--_ctm-tbs-dn-ts-hr-se-ft-se)));
                    --_sf-tbs-hr-ft-cr: var(--_ctm-mob-tbs-dn-ts-hr-se-cr,
                        var(--_ctm-tab-tbs-dn-ts-hr-se-cr, var(--_ctm-tbs-dn-ts-hr-se-cr)));
                    --_sf-tbs-hr-ft-wt: var(--_ctm-mob-tbs-dn-ts-hr-se-ft-wt,
                        var(--_ctm-tab-tbs-dn-ts-hr-se-ft-wt, var(--_ctm-tbs-dn-ts-hr-se-ft-wt)));
                    --_sf-tbs-hr-ft-sty: var(--_ctm-mob-tbs-dn-ts-hr-se-ft-se-ic,
                        var(--_ctm-tab-tbs-dn-ts-hr-se-ft-se-ic, var(--_ctm-tbs-dn-ts-hr-se-ft-se-ic)));
                    --_sf-tbs-hr-ft-tdc: var(--_ctm-mob-tbs-dn-ts-hr-se-ue,
                        var(--_ctm-tab-tbs-dn-ts-hr-se-ue, var(--_ctm-tbs-dn-ts-hr-se-ue)));
                    --_sf-tbs-hr-ft-tln: var(--_ctm-mob-tbs-dn-ts-hr-se-tt-an,
                        var(--_ctm-tab-tbs-dn-ts-hr-se-tt-an, var(--_ctm-tbs-dn-ts-hr-se-tt-an)));
                    --_sf-tbs-hr-ft-lts: var(--_ctm-mob-tbs-dn-ts-hr-se-lr-sg,
                        var(--_ctm-tab-tbs-dn-ts-hr-se-lr-sg, var(--_ctm-tbs-dn-ts-hr-se-lr-sg)));
                    --_sf-tbs-hr-ft-lht: var(--_ctm-mob-tbs-dn-ts-hr-se-le-ht,
                        var(--_ctm-tab-tbs-dn-ts-hr-se-le-ht, var(--_ctm-tbs-dn-ts-hr-se-le-ht)));
                    --_sf-tbs-hr-ft-ttm: var(--_ctm-mob-tbs-dn-ts-hr-se-tt-tm,
                        var(--_ctm-tab-tbs-dn-ts-hr-se-tt-tm, var(--_ctm-tbs-dn-ts-hr-se-tt-tm)));
                    --_sf-tbs-hr-ft-wwr: var(--_ctm-mob-tbs-dn-ts-hr-se-wd-wr,
                        var(--_ctm-tab-tbs-dn-ts-hr-se-wd-wr, var(--_ctm-tbs-dn-ts-hr-se-wd-wr)));
                    --_sf-tbs-hr-ft-wbk: var(--_ctm-mob-tbs-dn-ts-hr-se-wd-bk,
                        var(--_ctm-tab-tbs-dn-ts-hr-se-wd-bk, var(--_ctm-tbs-dn-ts-hr-se-wd-bk)));

                    --_sf-tbs-hr-in-gp: var(--_ctm-mob-tbs-dn-ts-hr-se-in-gp,
                        var(--_ctm-tab-tbs-dn-ts-hr-se-in-gp, var(--_ctm-tbs-dn-ts-hr-se-in-gp)));
                    --_sf-tbs-hr-in-sz: var(--_ctm-mob-tbs-dn-ts-hr-se-in-se,
                        var(--_ctm-tab-tbs-dn-ts-hr-se-in-se, var(--_ctm-tbs-dn-ts-hr-se-in-se)));
                    --_sf-tbs-hr-in-cr: var(--_ctm-mob-tbs-dn-ts-hr-se-in-c1,
                        var(--_ctm-tab-tbs-dn-ts-hr-se-in-c1, var(--_ctm-tbs-dn-ts-hr-se-in-c1)));
                    --_sf-tbs-hr-in-al: var(--_ctm-mob-tbs-dn-ts-hr-se-vl-at,
                        var(--_ctm-tab-tbs-dn-ts-hr-se-vl-at, var(--_ctm-tbs-dn-ts-hr-se-vl-at)));
                  }
                }

                &:is([data-tl-vl="stretched"] > div.#{$tabHeaderWrapper} > *) {
                  flex: 1 1 0;
                  min-width: 0;

                  &:is(.vtl *) {
                    flex: 1 0 auto;
                  }
                }

                &:has(>span#{$overflowSelector}) {
                  min-width: 0;

                  &:is(.hrz *) {
                    max-width: 25%;

                    &:is([data-tl-vl="stretched"] > div.#{$tabHeaderWrapper} > *) {
                      max-width: 50%;
                    }
                  }
                }

                &:is(.vtl *) {
                  width: 100%;
                }

                &>span {
                  // display: var(--_d-flex);
                  width: 100%;

                  &:is(.vtl *) {
                    width: 100%;
                    min-width: 0;
                    white-space: normal;
                    overflow-wrap: var(--_sf-tbs-wd-wr, anywhere);
                  }

                  font-family: var(--_sf-tbs-sd-ft-fy,
                    var(--_sf-tbs-hr-ft-fy,
                      var(--_ctm-mob-tbs-dn-ts-dt-se-ft-fy,
                        var(--_ctm-tab-tbs-dn-ts-dt-se-ft-fy, var(--_ctm-tbs-dn-ts-dt-se-ft-fy)))));
                  font-size: var(--_sf-tbs-sd-ft-sz,
                    var(--_sf-tbs-hr-ft-sz,
                      var(--_ctm-mob-tbs-dn-ts-dt-se-ft-se,
                        var(--_ctm-tab-tbs-dn-ts-dt-se-ft-se, var(--_ctm-tbs-dn-ts-dt-se-ft-se)))));
                  color: var(--_sf-tbs-sd-ft-cr,
                    var(--_sf-tbs-hr-ft-cr,
                      var(--_ctm-mob-tbs-dn-ts-dt-se-cr,
                        var(--_ctm-tab-tbs-dn-ts-dt-se-cr, var(--_ctm-tbs-dn-ts-dt-se-cr)))));
                  font-weight: var(--_sf-tbs-sd-ft-wt,
                    var(--_sf-tbs-hr-ft-wt,
                      var(--_ctm-mob-tbs-dn-ts-dt-se-ft-wt,
                        var(--_ctm-tab-tbs-dn-ts-dt-se-ft-wt, var(--_ctm-tbs-dn-ts-dt-se-ft-wt)))));
                  font-style: var(--_sf-tbs-sd-ft-sty,
                    var(--_sf-tbs-hr-ft-sty,
                      var(--_ctm-mob-tbs-dn-ts-dt-se-ft-se-ic,
                        var(--_ctm-tab-tbs-dn-ts-dt-se-ft-se-ic,
                          var(--_ctm-tbs-dn-ts-dt-se-ft-se-ic, normal)))));
                  text-decoration: var(--_sf-tbs-sd-ft-tdc,
                    var(--_sf-tbs-hr-ft-tdc,
                      var(--_ctm-mob-tbs-dn-ts-dt-se-ue,
                        var(--_ctm-tab-tbs-dn-ts-dt-se-ue, var(--_ctm-tbs-dn-ts-dt-se-ue)))));
                  text-align: var(--_sf-tbs-sd-ft-tln,
                    var(--_sf-tbs-hr-ft-tln,
                      var(--_ctm-mob-tbs-dn-ts-dt-se-tt-an,
                        var(--_ctm-tab-tbs-dn-ts-dt-se-tt-an, var(--_ctm-tbs-dn-ts-dt-se-tt-an)))));
                  letter-spacing: var(--_sf-tbs-sd-ft-lts,
                    var(--_sf-tbs-hr-ft-lts,
                      var(--_ctm-mob-tbs-dn-ts-dt-se-lr-sg,
                        var(--_ctm-tab-tbs-dn-ts-dt-se-lr-sg, var(--_ctm-tbs-dn-ts-dt-se-lr-sg)))));
                  line-height: var(--_sf-tbs-sd-ft-lht,
                    var(--_sf-tbs-hr-ft-lht,
                      var(--_ctm-mob-tbs-dn-ts-dt-se-le-ht,
                        var(--_ctm-tab-tbs-dn-ts-dt-se-le-ht, var(--_ctm-tbs-dn-ts-dt-se-le-ht)))));
                  text-transform: var(--_sf-tbs-sd-ft-ttm,
                    var(--_sf-tbs-hr-ft-ttm,
                      var(--_ctm-mob-tbs-dn-ts-dt-se-tt-tm,
                        var(--_ctm-tab-tbs-dn-ts-dt-se-tt-tm, var(--_ctm-tbs-dn-ts-dt-se-tt-tm)))));
                  word-break: var(--_sf-tbs-sd-ft-wbk,
                    var(--_sf-tbs-hr-ft-wbk,
                      var(--_ctm-mob-tbs-dn-ts-dt-se-wd-bk,
                        var(--_ctm-tab-tbs-dn-ts-dt-se-wd-bk, var(--_ctm-tbs-dn-ts-dt-se-wd-bk)))));
                  --_sf-tbs-wd-wr: var(--_sf-tbs-sd-ft-wwr,
                    var(--_sf-tbs-hr-ft-wwr,
                      var(--_ctm-mob-tbs-dn-ts-dt-se-wd-wr,
                        var(--_ctm-tab-tbs-dn-ts-dt-se-wd-wr, var(--_ctm-tbs-dn-ts-dt-se-wd-wr)))));
                  word-wrap: var(--_sf-tbs-wd-wr);

                  white-space: nowrap;

                  &#{$overflowSelector} {
                    min-width: 0;
                    overflow-wrap: var(--_sf-tbs-wd-wr, anywhere);
                    white-space: normal;
                    @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
                  }
                }

                &>span.icon {
                  display: var(--_hide-tbs-icon, var(--_d-flex));
                  width: auto;
                  flex: 0 0 auto;
                  align-self: var(--_sf-tbs-sd-in-al,
                      var(--_sf-tbs-hr-in-al,
                        var(--_ctm-mob-tbs-dn-ts-dt-se-vl-at,
                          var(--_ctm-tab-tbs-dn-ts-dt-se-vl-at, var(--_ctm-tbs-dn-ts-dt-se-vl-at)))));

                  &>svg {
                    width: var(--_sf-tbs-sd-in-sz,
                        var(--_sf-tbs-hr-in-sz,
                          var(--_ctm-mob-tbs-dn-ts-dt-se-in-se,
                            var(--_ctm-tab-tbs-dn-ts-dt-se-in-se, var(--_ctm-tbs-dn-ts-dt-se-in-se)))));
                    height: var(--_sf-tbs-sd-in-sz,
                        var(--_sf-tbs-hr-in-sz,
                          var(--_ctm-mob-tbs-dn-ts-dt-se-in-se,
                            var(--_ctm-tab-tbs-dn-ts-dt-se-in-se, var(--_ctm-tbs-dn-ts-dt-se-in-se)))));

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

          &.#{$tabBody} {
            display: var(--_d-flex);
            flex: 1 1 auto;

            &:is(.hrz *) {
              margin-block-start: prepareMediaVariable(--_ctm-tbs-lt-tb-cr-gp, 0px);
            }

            &:is(.vtl *) {
              margin-inline-start: prepareMediaVariable(--_ctm-tbs-lt-tb-cr-gp, 0px);
            }

            &>div {
              &.#{$tabBodyWrapper} {
                display: var(--_d-grid);
                grid-template-columns: 100%;
                grid-template-rows: 100%;
                width: 100%;
              }
            }
          }
        }
      }
    }

    // &[data-view-state="full"] {
    //   width: auto;
    //   margin: 0;
    //   justify-self: stretch !important;
    //   align-self: stretch !important;
    //   cursor: auto;
    //   &:is(#{$activeElementSelector}) {
    //     & > div {
    //       &[data-div-type="wrapper__layer"] {
    //         --_sf-vt-zz: visible;
    //         --_sf-op-zz: 1;
    //       }
    //     }
    //   }
    // }
  }
}