@use "./functions.scss" as *;
.table__wrapper {
  padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg, var(--_tst-lt-pg))));

  //   background-color: var(
  //     --_ctm-mob-dn-te-wt-bd-cr,
  //     var(--_ctm-tab-dn-te-wt-bd-cr, var(--_ctm-dn-te-wt-bd-cr, var(--_tst-dn-te-wt-bd-cr)))
  //   );

  height: 100%;

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

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

  width: 100%;

  &[data-header-divider="true"] {
    thead tr th {
      border-bottom: 1px solid
        var(
          --_ctm-mob-dn-rw-ad-hr-ds-hr-dr,
          var(--_ctm-tab-dn-rw-ad-hr-ds-hr-dr, var(--_ctm-dn-rw-ad-hr-ds-hr-dr))
        );
    }
  }
  &[data-row-divider="true"] {
    tbody tr td {
      border-bottom: 1px solid
        var(
          --_ctm-mob-dn-rw-ad-hr-ds-rw-dr,
          var(--_ctm-tab-dn-rw-ad-hr-ds-rw-dr, var(--_ctm-dn-rw-ad-hr-ds-rw-dr))
        );
    }
  }
  &[data-column-divider="true"] {
    tbody tr td,
    thead tr th {
      border-right: 1px solid
        var(
          --_ctm-mob-dn-rw-ad-hr-ds-cn-dr,
          var(--_ctm-tab-dn-rw-ad-hr-ds-cn-dr, var(--_ctm-dn-rw-ad-hr-ds-cn-dr))
        );
    }

    tbody tr td:last-child,
    thead tr th:last-child {
      border-right: none;
    }
  }
  &[data-show-more-rows="onScroll"] {
    .table__container {
      overflow-y: auto;

      &::-webkit-scrollbar {
        width: var(
          --_ctm-mob-dn-sl-br-sl-br-wh,
          var(--_ctm-tab-dn-sl-br-sl-br-wh, var(--_ctm-dn-sl-br-sl-br-wh))
        );
      }

      &::-webkit-scrollbar-track {
        background-color: var(--_base-white);
      }

      &::-webkit-scrollbar-thumb {
        background-color: var(
          --_ctm-mob-dn-sl-br-sl-br-cr,
          var(--_ctm-tab-dn-sl-br-sl-br-cr, var(--_ctm-dn-sl-br-sl-br-cr))
        );
      }

      // // Scrollbar thumb when hovered
      // &::-webkit-scrollbar-thumb:hover {
      //   background-color: #555; // Darker color when hovering over the thumb
      // }

      // // For Firefox, using scrollbar-width and scrollbar-color
      // scrollbar-width: thin; // Thin scrollbar
      // scrollbar-color: #888 #f1f1f1; // Thumb and track colors
    }
  }

  &[data-alternative-row-colors="true"] {
    tbody .tbody__row__divider:nth-child(odd) {
      background-color: #f76b6b;
    }
  }

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

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

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

  h3 {
    text-align: center;
    width: 100%;
    margin-bottom: 10px;
  }
  table {
    border-collapse: collapse;
    // border: none;
    width: 100%;
    // height: 100%;
    text-align: var(--_ctm-mob-lt-ct-at, var(--_ctm-tab-lt-ct-at, var(--_ctm-lt-ct-at)));

    th,
    td {
      border: none;
    }
    thead {
      background-color: var(
        --_ctm-mob-dn-te-hr-bd-cr,
        var(--_ctm-tab-dn-te-hr-bd-cr, var(--_ctm-dn-te-hr-bd-cr))
      );

      .thead__row__divider {
        height: var(--_ctm-mob-lt-hr-ht, var(--_ctm-tab-lt-hr-ht, var(--_ctm-lt-hr-ht)));

        .th__col__divider {
          padding: var(
            --_ctm-mob-lt-hr-cl-pg,
            var(--_ctm-tab-lt-hr-cl-pg, var(--_ctm-lt-hr-cl-pg))
          );

          color: var(--_ctm-mob-dn-hr-tt-cr, var(--_ctm-tab-dn-hr-tt-cr, var(--_ctm-dn-hr-tt-cr)));

          font-family: var(
            --_ctm-mob-dn-hr-tt-ft-fy,
            var(--_ctm-tab-dn-hr-tt-ft-fy, var(--_ctm-dn-hr-tt-ft-fy))
          );
          text-transform: var(
            --_ctm-mob-dn-hr-tt-tt-tm,
            var(--_ctm-tab-dn-hr-tt-tt-tm, var(--_ctm-dn-hr-tt-tt-tm))
          );
          word-wrap: var(
            --_ctm-mob-dn-hr-tt-wd-wp,
            var(--_ctm-tab-dn-hr-tt-wd-wp, var(--_ctm-dn-hr-tt-wd-wp))
          );
          word-break: var(
            --_ctm-mob-dn-hr-tt-wd-bk,
            var(--_ctm-tab-dn-hr-tt-wd-bk, var(--_ctm-dn-hr-tt-wd-bk))
          );

          font-size: var(
            --_ctm-mob-dn-hr-tt-ft-se,
            var(--_ctm-tab-dn-hr-tt-ft-se, var(--_ctm-dn-hr-tt-ft-se))
          );

          font-weight: var(
            --_ctm-mob-dn-hr-tt-ft-wt,
            var(--_ctm-tab-dn-hr-tt-ft-wt, var(--_ctm-dn-hr-tt-ft-wt))
          );

          text-decoration: var(
            --_ctm-mob-dn-hr-tt-ue,
            var(--_ctm-tab-dn-hr-tt-ue, var(--_ctm-dn-hr-tt-ue))
          );

          font-style: var(
            --_ctm-mob-dn-hr-tt-ft-se-ic,
            var(--_ctm-tab-dn-hr-tt-ft-se-ic, var(--_ctm-dn-hr-tt-ft-se-ic))
          );

          text-align: var(
            --_ctm-mob-dn-hr-tt-tt-an,
            var(--_ctm-tab-dn-hr-tt-tt-an, var(--_ctm-dn-hr-tt-tt-an))
          );

          letter-spacing: var(
            --_ctm-mob-dn-hr-tt-lr-sg,
            var(--_ctm-tab-dn-hr-tt-lr-sg, var(--_ctm-dn-hr-tt-lr-sg))
          );

          line-height: var(
            --_ctm-mob-dn-hr-tt-le-ht,
            var(--_ctm-tab-dn-hr-tt-le-ht, var(--_ctm-dn-hr-tt-le-ht))
          );
        }
      }
    }
    tbody {
      .tbody__row__divider {
        background-color: var(
          --_ctm-mob-dn-te-rw-bd-cr,
          var(--_ctm-tab-dn-te-rw-bd-cr, var(--_ctm-dn-te-rw-bd-cr))
        );

        height: var(--_ctm-mob-lt-rw-ht, var(--_ctm-tab-lt-rw-ht, var(--_ctm-lt-rw-ht)));

        .td__col__divider {
          padding: var(
            --_ctm-mob-lt-rw-cl-pg,
            var(--_ctm-tab-lt-rw-cl-pg, var(--_ctm-lt-rw-cl-pg))
          );

          color: var(
            --_sf-hr-fc,
            var(--_ctm-mob-dn-rw-tt-cr, var(--_ctm-tab-dn-rw-tt-cr, var(--_ctm-dn-rw-tt-cr)))
          );

          font-family: var(
            --_sf-hr-ff,
            var(
              --_ctm-mob-dn-rw-tt-ft-fy,
              var(--_ctm-tab-dn-rw-tt-ft-fy, var(--_ctm-dn-rw-tt-ft-fy))
            )
          );
          text-transform: var(
            --_sf-hr-tt-tm,
            var(
              --_ctm-mob-dn-rw-tt-tt-tm,
              var(--_ctm-tab-dn-rw-tt-tt-tm, var(--_ctm-dn-rw-tt-tt-tm))
            )
          );
          word-wrap: var(
            --_sf-hr-wd-wp,
            var(
              --_ctm-mob-dn-rw-tt-wd-wp,
              var(--_ctm-tab-dn-rw-tt-wd-wp, var(--_ctm-dn-rw-tt-wd-wp))
            )
          );
          word-break: var(
            --_sf-hr-wd-bk,
            var(
              --_ctm-mob-dn-rw-tt-wd-bk,
              var(--_ctm-tab-dn-rw-tt-wd-bk, var(--_ctm-dn-rw-tt-wd-bk))
            )
          );

          font-size: var(
            --_sf-hr-fs,
            var(
              --_ctm-mob-dn-rw-tt-ft-se,
              var(--_ctm-tab-dn-rw-tt-ft-se, var(--_ctm-dn-rw-tt-ft-se))
            )
          );

          text-decoration: var(
            --_ctm-mob-dn-rw-tt-ue,
            var(--_ctm-tab-dn-rw-tt-ue, var(--_ctm-dn-rw-tt-ue))
          );

          font-weight: var(
            --_sf-hr-fw,
            var(
              --_ctm-mob-dn-rw-tt-ft-wt,
              var(--_ctm-tab-dn-rw-tt-ft-wt, var(--_ctm-dn-rw-tt-ft-wt))
            )
          );

          font-style: var(
            --_sf-hr-ft,
            var(
              --_ctm-mob-dn-rw-tt-ft-se-ic,
              var(--_ctm-tab-dn-rw-tt-ft-se-ic, var(--_ctm-dn-rw-tt-ft-se-ic))
            )
          );

          text-align: var(
            --_sf-hr-ta,
            var(
              --_ctm-mob-dn-rw-tt-tt-an,
              var(--_ctm-tab-dn-rw-tt-tt-an, var(--_ctm-dn-rw-tt-tt-an))
            )
          );

          letter-spacing: var(
            --_sf-hr-ls,
            var(
              --_ctm-mob-dn-rw-tt-lr-sg,
              var(--_ctm-tab-dn-rw-tt-lr-sg, var(--_ctm-dn-rw-tt-lr-sg))
            )
          );

          line-height: var(
            --_sf-hr-lh,
            var(
              --_ctm-mob-dn-rw-tt-le-ht,
              var(--_ctm-tab-dn-rw-tt-le-ht, var(--_ctm-dn-rw-tt-le-ht))
            )
          );
        }
      }
    }
  }

  .pagination {
    display: var(--_d-flex);
    align-items: var(--_align-center);
    justify-content: var(--_ctm-mob-lt-pn-at, var(--_ctm-tab-lt-pn-at, var(--_ctm-lt-pn-at)));
    margin-top: 10px;
    background-color: var(
      --_sf-bd-cr,
      var(
        --_ctm-mob-dn-pn-dt-se-bd-cr,
        var(--_ctm-tab-dn-pn-dt-se-bd-cr, var(--_ctm-dn-pn-dt-se-bd-cr))
      )
    );
    &.pagination__center {
      justify-content: var(justify-center);
    }

    button {
      svg {
        width: var(--_width-18);
        height: var(--_height-18);
        path {
          stroke: var(--_gray-500);
          // stroke: var(--_ctm-dn-pn-in-c1, var(--_tst-dn-pn-in-c1));
  // Overrides the stroke-width presentation attribute baked into the icon markup.
  stroke-width: prepareMediaVariable(--_ctm-dn-pn-se-wh, 1.25);
        }
      }
    }
    span {
      float: left;
      padding: var(--_pd-8) var(--_pd-16);
      text-decoration: none;
      span {
        // color: var(--_sf-hr-fc, var(--_ctm-dn-pn-bn-cr, var(--_tst-dn-pn-bn-cr)));
        // font-size: var(--_sf-hr-fs, var(--_ctm-dn-pn-ft-se, var(--_tst-dn-pn-ft-se)));
        // font-family: var(--_sf-hr-ff, var(--_ctm-dn-pn-ft-fy, var(--_tst-dn-pn-ft-fy))),

        // font-weight: var(--_sf-hr-fw, var(--_ctm-dn-pn-ft-wt, var(--_tst-dn-pn-ft-wt)));
        // font-style: var(--_sf-hr-ft, var(--_ctm-dn-pn-ft-se-ic, var(--_tst-dn-pn-ft-se-ic)));
        // text-align: var(--_sf-hr-ta, var(--_ctm-dn-pn-tt-an, var(--_tst-dn-pn-tt-an)));
        // letter-spacing: var(--_sf-hr-ls, var(--_ctm-dn-pn-lr-sg, var(--_tst-dn-pn-lr-sg)));
        // line-height: var(--_sf-hr-lh, var(--_ctm-dn-pn-le-ht, var(--_tst-dn-pn-le-ht)));
      }
      &.active:hover {
        &hover {
          --_sf-hr-fc: var(--_ctm-dn-pn-hr-se-cr, var(--_tst-dn-pn-hr-se-cr));
          --_sf-hr-ff: var(--_ctm-dn-pn-hr-se-ft-fy, var(--_tst-dn-pn-hr-se-ft-fy));
          --_sf-hr-tt-tm: var(--_ctm-dn-pn-hr-se-tt-tm, var(--_tst-dn-pn-hr-se-tt-tm));
          --_sf-hr-wd-wp: var(--_ctm-dn-pn-hr-se-wd-wp, var(--_tst-dn-pn-hr-se-wd-wp));
          --_sf-hr-wd-bk: var(--_ctm-dn-pn-hr-se-wd-bk, var(--_tst-dn-pn-hr-se-wd-bk));
          --_sf-hr-fs: var(--_ctm-dn-pn-hr-se-ft-se, var(--_tst-dn-pn-hr-se-ft-se));
          --_sf-hr-fw: var(--_ctm-dn-pn-hr-se-ft-wt, var(--_tst-dn-pn-hr-se-ft-wt));
          --_sf-hr-ft: var(--_ctm-dn-pn-hr-se-ft-se-ic, var(--_tst-dn-pn-hr-se-ft-se-ic));
          --_sf-hr-ta: var(--_ctm-dn-pn-hr-se-tt-an, var(--_tst-dn-pn-hr-se-tt-an));
          --_sf-hr-ls: var(--_ctm-dn-pn-hr-se-lr-sg, var(--_tst-dn-pn-hr-se-lr-sg));
          --_sf-hr-lh: var(--_ctm-dn-pn-hr-se-le-ht, var(--_tst-dn-pn-hr-se-le-ht));
        }
      }
      &.active {
        color: var(
          --_sf-hr-fc,
          var(--_ctm-mob-dn-pn-dt-se-cr, var(--_ctm-tab-dn-pn-dt-se-cr, var(--_ctm-dn-pn-dt-se-cr)))
        );

        font-family: var(
          --_sf-hr-ff,
          var(
            --_ctm-mob-dn-pn-dt-se-ft-fy,
            var(--_ctm-tab-dn-pn-dt-se-ft-fy, var(--_ctm-dn-pn-dt-se-ft-fy))
          )
        );
        text-transform: var(
          --_sf-hr-tt-tm,
          var(
            --_ctm-mob-dn-pn-dt-se-tt-tm,
            var(--_ctm-tab-dn-pn-dt-se-tt-tm, var(--_ctm-dn-pn-dt-se-tt-tm))
          )
        );
        word-wrap: var(
          --_sf-hr-wd-wp,
          var(
            --_ctm-mob-dn-pn-dt-se-wd-wp,
            var(--_ctm-tab-dn-pn-dt-se-wd-wp, var(--_ctm-dn-pn-dt-se-wd-wp))
          )
        );
        word-break: var(
          --_sf-hr-wd-bk,
          var(
            --_ctm-mob-dn-pn-dt-se-wd-bk,
            var(--_ctm-tab-dn-pn-dt-se-wd-bk, var(--_ctm-dn-pn-dt-se-wd-bk))
          )
        );

        font-size: var(
          --_sf-hr-fs,
          var(
            --_ctm-mob-dn-pn-dt-se-ft-se,
            var(--_ctm-tab-dn-pn-dt-se-ft-se, var(--_ctm-dn-pn-dt-se-ft-se))
          )
        );

        text-decoration: var(
          --_sf-hr-td,
          var(--_ctm-mob-dn-pn-dt-se-ue, var(--_ctm-tab-dn-pn-dt-se-ue, var(--_ctm-dn-pn-dt-se-ue)))
        );

        font-weight: var(
          --_sf-hr-fw,
          var(
            --_ctm-mob-dn-pn-dt-se-ft-wt,
            var(--_ctm-tab-dn-pn-dt-se-ft-wt, var(--_ctm-dn-pn-dt-se-ft-wt))
          )
        );

        font-style: var(
          --_sf-hr-ft,
          var(
            --_ctm-mob-dn-pn-dt-se-ft-se-ic,
            var(--_ctm-tab-dn-pn-dt-se-ft-se-ic, var(--_ctm-dn-pn-dt-se-ft-se-ic))
          )
        );

        text-align: var(
          --_sf-hr-ta,
          var(
            --_ctm-mob-dn-pn-dt-se-tt-an,
            var(--_ctm-tab-dn-pn-dt-se-tt-an, var(--_ctm-dn-pn-dt-se-tt-an))
          )
        );

        letter-spacing: var(
          --_sf-hr-ls,
          var(
            --_ctm-mob-dn-pn-dt-se-lr-sg,
            var(--_ctm-tab-dn-pn-dt-se-lr-sg, var(--_ctm-dn-pn-dt-se-lr-sg))
          )
        );

        line-height: var(
          --_sf-hr-lh,
          var(
            --_ctm-mob-dn-pn-dt-se-le-ht,
            var(--_ctm-tab-dn-pn-dt-se-le-ht, var(--_ctm-dn-pn-dt-se-le-ht))
          )
        );
      }
    }
    .pagination__arrows {
      color: var(
        --_sf-hr-fc,
        var(--_ctm-mob-dn-pn-in-c1, var(--_ctm-tab-dn-pn-in-c1, var(--_ctm-dn-pn-in-c1)))
      );

      font-size: var(
        --_sf-hr-fs,
        var(--_ctm-mob-dn-pn-in-se, var(--_ctm-tab-dn-pn-in-se, var(--_ctm-dn-pn-in-se)))
      );
    }
  }

  .load__more {
    margin: 10px;
    background-color: var(
      --_sf-hr-bd-cr,
      var(
        --_ctm-mob-dn-ld-me-bn-bd-cr,
        var(--_ctm-tab-dn-ld-me-bn-bd-cr, var(--_ctm-dn-ld-me-bn-bd-cr))
      )
    );
    border-radius: var(
      --_sf-hr-br-br,
      var(
        --_ctm-mob-dn-ld-me-bn-br-rs,
        var(--_ctm-tab-dn-ld-me-bn-br-rs, var(--_ctm-dn-ld-me-bn-br-rs))
      )
    );

    h3 {
      color: var(
        --_sf-hr-fc,
        var(--_ctm-mob-dn-ld-me-bn-cr, var(--_ctm-tab-dn-ld-me-bn-cr, var(--_ctm-dn-ld-me-bn-cr)))
      );
      font-family: var(
        --_sf-hr-ff,
        var(
          --_ctm-mob-dn-ld-me-bn-ft-fy,
          var(--_ctm-tab-dn-ld-me-bn-ft-fy, var(--_ctm-dn-ld-me-bn-ft-fy))
        )
      );
      text-transform: var(
        --_sf-hr-tt-tm,
        var(
          --_ctm-mob-dn-ld-me-bn-tt-tm,
          var(--_ctm-tab-dn-ld-me-bn-tt-tm, var(--_ctm-dn-ld-me-bn-tt-tm))
        )
      );
      word-wrap: var(
        --_sf-hr-wd-wp,
        var(
          --_ctm-mob-dn-ld-me-bn-wd-wp,
          var(--_ctm-tab-dn-ld-me-bn-wd-wp, var(--_ctm-dn-ld-me-bn-wd-wp))
        )
      );
      word-break: var(
        --_sf-hr-wd-bk,
        var(
          --_ctm-mob-dn-ld-me-bn-wd-bk,
          var(--_ctm-tab-dn-ld-me-bn-wd-bk, var(--_ctm-dn-ld-me-bn-wd-bk))
        )
      );
      font-size: var(
        --_sf-hr-fs,
        var(
          --_ctm-mob-dn-ld-me-bn-ft-se,
          var(--_ctm-tab-dn-ld-me-bn-ft-se, var(--_ctm-dn-ld-me-bn-ft-se))
        )
      );

      text-decoration: var(
        --_ctm-mob-dn-ld-me-bn-ue,
        var(--_ctm-tab-dn-ld-me-bn-ue, var(--_ctm-dn-ld-me-bn-ue))
      );

      font-weight: var(
        --_sf-hr-fw,
        var(
          --_ctm-mob-dn-ld-me-bn-ft-wt,
          var(--_ctm-tab-dn-ld-me-bn-ft-wt, var(--_ctm-dn-ld-me-bn-ft-wt))
        )
      );

      font-style: var(
        --_sf-hr-ft,
        var(
          --_ctm-mob-dn-ld-me-bn-ft-se-ic,
          var(--_ctm-tab-dn-ld-me-bn-ft-se-ic, var(--_ctm-dn-ld-me-bn-ft-se-ic))
        )
      );

      text-align: var(
        --_sf-hr-ta,
        var(
          --_ctm-mob-dn-ld-me-bn-tt-an,
          var(--_ctm-tab-dn-ld-me-bn-tt-an, var(--_ctm-dn-ld-me-bn-tt-an))
        )
      );

      letter-spacing: var(
        --_sf-hr-ls,
        var(
          --_ctm-mob-dn-ld-me-bn-lr-sg,
          var(--_ctm-tab-dn-ld-me-bn-lr-sg, var(--_ctm-dn-ld-me-bn-lr-sg))
        )
      );

      line-height: var(
        --_sf-hr-lh,
        var(
          --_ctm-mob-dn-ld-me-bn-le-ht,
          var(--_ctm-tab-dn-ld-me-bn-le-ht, var(--_ctm-dn-ld-me-bn-le-ht))
        )
      );
    }
    // background-color: var(--_primary-400);
    // border: 1px solid var(--_primary-400);
    // border-radius: var(--_br-6);
    // padding: var(--_pd-8) var(--_pd-12);
    // color: var(---base-whiet);
    // display: inline-block;
    // color: var(--_base-white);
    // margin: 0 auto;
    // width: 150px;
    // text-align: center;
    // margin-top: 20px;
  }
}