@use "sass:map";
@use "sass:list";
@use "./functions.scss" as *;
[data-div-type="element"] {
  &[data-element-type="paymentMethods"] {
    // width: var(--_lt-wh);
    // height: var(--_lt-ht);
    // margin: var(--_lt-mn);
    // padding: var(--_lt-pg);
    // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
    // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
    // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
    // height: ;
    // 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%;
      // height: 100%;
    }
    &[data-show-shadow="false"] {
      --_show-shadow: none;
    }
    .text-element {
      background: #6d96e4;
      padding: 10px;
      font-weight: 600;
      color: rgba(75, 69, 70, 1);
    }
    .container {
      display: flex;
      flex-direction: column;
      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
      background-color: prepareMediaVariable(--_ctm-dn-pt-md-wt-bd-cr);
      border-width: prepareMediaVariable(--_ctm-dn-pt-md-wt-br-wh);
      border-color: prepareMediaVariable(--_ctm-dn-pt-md-wt-br-cr);
      border-style: prepareMediaVariable(--_ctm-dn-pt-md-wt-br-se);
      border-radius: prepareMediaVariable(--_ctm-dn-pt-md-wt-br-rs);
      box-shadow: prepareMediaVariable(--_ctm-dn-pt-md-wt-sw-ae)
        prepareMediaVariable(--_ctm-dn-pt-md-wt-sw-br)
        prepareMediaVariable(--_ctm-dn-pt-md-wt-sw-sd)
        prepareMediaVariable(--_ctm-dn-pt-md-wt-sw-cr);
      .title-content {
        display: flex;
        flex-direction: column;
        .title {
          font-size: 24px;
          margin-bottom: 10px;
          color: #000;
          font-family: prepareMediaVariable(--_ctm-dn-pt-md-te-ft-fy);
          text-transform: prepareMediaVariable(--_ctm-dn-pt-md-te-tt-tm);
          word-wrap: prepareMediaVariable(--_ctm-dn-pt-md-te-wd-wp);
          word-break: prepareMediaVariable(--_ctm-dn-pt-md-te-wd-bk);
          font-size: prepareMediaVariable(--_ctm-dn-pt-md-te-ft-se);
          color: prepareMediaVariable(--_ctm-dn-pt-md-te-cr);
          font-weight: prepareMediaVariable(--_ctm-dn-pt-md-te-ft-wt);
          font-style: prepareMediaVariable(--_ctm-dn-pt-md-te-ft-se-ic);
          text-decoration: prepareMediaVariable(--_ctm-dn-pt-md-te-ue);
          text-align: prepareMediaVariable(--_ctm-dn-pt-md-te-tt-an);
          letter-spacing: prepareMediaVariable(--_ctm-dn-pt-md-te-lr-sg);
          line-height: prepareMediaVariable(--_ctm-dn-pt-md-te-le-ht);
        }
        .description {
          font-size: 16px;
          color: #000;
          font-family: prepareMediaVariable(--_ctm-dn-pt-md-dn-ft-fy);
          text-transform: prepareMediaVariable(--_ctm-dn-pt-md-dn-tt-tm);
          word-wrap: prepareMediaVariable(--_ctm-dn-pt-md-dn-wd-wp);
          word-break: prepareMediaVariable(--_ctm-dn-pt-md-dn-wd-bk);
          font-size: prepareMediaVariable(--_ctm-dn-pt-md-dn-ft-se);
          color: prepareMediaVariable(--_ctm-dn-pt-md-dn-cr);
          font-weight: prepareMediaVariable(--_ctm-dn-pt-md-dn-ft-wt);
          font-style: prepareMediaVariable(--_ctm-dn-pt-md-dn-ft-se-ic);
          text-decoration: prepareMediaVariable(--_ctm-dn-pt-md-dn-ue);
          text-align: prepareMediaVariable(--_ctm-dn-pt-md-dn-tt-an);
          letter-spacing: prepareMediaVariable(--_ctm-dn-pt-md-dn-lr-sg);
          line-height: prepareMediaVariable(--_ctm-dn-pt-md-dn-le-ht);
        }
      }
      .payment__methods__container {
        display: var(--_d-flex);
        flex-direction: column;
        gap: 20px;
        // padding: 20px 0;
        justify-content: var(
          --_ctm-mob-lt-im-ct-at,
          var(--_ctm-tab-lt-im-ct-at, var(--_ctm-lt-im-ct-at))
        );
        background-color: prepareMediaVariable(--_ctm-dn-pt-md-cr-dn-bd-cr);
        border-width: prepareMediaVariable(--_ctm-dn-pt-md-cr-dn-br-wh);
        border-color: prepareMediaVariable(--_ctm-dn-pt-md-cr-dn-br-cr);
        border-style: prepareMediaVariable(--_ctm-dn-pt-md-cr-dn-br-se);
        border-radius: prepareMediaVariable(--_ctm-dn-pt-md-cr-dn-br-rs);
        box-shadow: prepareMediaVariable(--_ctm-dn-pt-md-cr-dn-sw-ae)
          prepareMediaVariable(--_ctm-dn-pt-md-cr-dn-sw-br)
          prepareMediaVariable(--_ctm-dn-pt-md-cr-dn-sw-sd)
          prepareMediaVariable(--_ctm-dn-pt-md-cr-dn-sw-cr);

        .horizontal {
          display: flex;
          align-items: center;
          gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
          flex-direction: row;
          &[data-overflow-item="Wrap"] {
            flex-wrap: wrap;
          }
          &[data-overflow-item="Scroll"] {
            overflow-x: scroll;
            width: 35%;
          }
          .item {
            padding: var(--_ctm-mob-lt-im-pg, var(--_ctm-tab-lt-im-pg, var(--_ctm-lt-im-pg)));
            font-family: prepareMediaVariable(--_ctm-dn-pt-md-cr-dn-ft-fy);
            text-transform: prepareMediaVariable(--_ctm-dn-pt-md-cr-dn-tt-tm);
            word-wrap: prepareMediaVariable(--_ctm-dn-pt-md-cr-dn-wd-wp);
            word-break: prepareMediaVariable(--_ctm-dn-pt-md-cr-dn-wd-bk);
            font-size: prepareMediaVariable(--_ctm-dn-pt-md-cr-dn-ft-se);
            color: prepareMediaVariable(--_ctm-dn-pt-md-cr-dn-cr);
            font-weight: prepareMediaVariable(--_ctm-dn-pt-md-cr-dn-ft-wt);
            font-style: prepareMediaVariable(--_ctm-dn-pt-md-cr-dn-ft-se-ic);
            text-decoration: prepareMediaVariable(--_ctm-dn-pt-md-cr-dn-ue);
            text-align: prepareMediaVariable(--_ctm-dn-pt-md-cr-dn-tt-an);
            letter-spacing: prepareMediaVariable(--_ctm-dn-pt-md-cr-dn-lr-sg);
            line-height: prepareMediaVariable(--_ctm-dn-pt-md-cr-dn-le-ht);
            img {
              width: 50px;
              height: 30px;
            }
          }
        }
        .vertical {
          display: flex;
          align-items: center;
          gap: var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg)));
          flex-direction: column;
          &[data-overflow-item="Wrap"] {
            flex-wrap: wrap;
          }
          &[data-overflow-item="Scroll"] {
            overflow-x: scroll;
            width: 35%;
          }
          .item {
            padding: var(--_ctm-mob-lt-im-pg, var(--_ctm-tab-lt-im-pg, var(--_ctm-lt-im-pg)));
            font-family: prepareMediaVariable(--_ctm-dn-pt-md-cr-dn-ft-fy);
            text-transform: prepareMediaVariable(--_ctm-dn-pt-md-cr-dn-tt-tm);
            word-wrap: prepareMediaVariable(--_ctm-dn-pt-md-cr-dn-wd-wp);
            word-break: prepareMediaVariable(--_ctm-dn-pt-md-cr-dn-wd-bk);
            font-size: prepareMediaVariable(--_ctm-dn-pt-md-cr-dn-ft-se);
            color: prepareMediaVariable(--_ctm-dn-pt-md-cr-dn-cr);
            font-weight: prepareMediaVariable(--_ctm-dn-pt-md-cr-dn-ft-wt);
            font-style: prepareMediaVariable(--_ctm-dn-pt-md-cr-dn-ft-se-ic);
            text-decoration: prepareMediaVariable(--_ctm-dn-pt-md-cr-dn-ue);
            text-align: prepareMediaVariable(--_ctm-dn-pt-md-cr-dn-tt-an);
            letter-spacing: prepareMediaVariable(--_ctm-dn-pt-md-cr-dn-lr-sg);
            line-height: prepareMediaVariable(--_ctm-dn-pt-md-cr-dn-le-ht);
            img {
              width: 50px;
              height: 30px;
            }
          }
        }
        .table-content {
          border-collapse: collapse;
          border: 1px solid #000;
          &[data-header-divider="true"] {
            thead tr th {
              border-bottom: 1px solid red;
            }
          }
          &[data-row-divider="true"] {
            tbody tr td {
              border-bottom: 1px solid green;
            }
          }
          &[data-column-divider="true"] {
            tbody tr td,
            thead tr th {
              border-right: 1px solid orange;
            }

            tbody tr td:last-child,
            thead tr th:last-child {
              border-right: none;
            }
          }
          &[data-alternative-row-colors="true"] {
            tbody tr:nth-child(odd) {
              background-color: #f78a8a;
              width: 100%;
            }
          }
          thead {
            height: var(--_ctm-mob-lt-hr-ht, var(--_ctm-tab-lt-hr-ht, var(--_ctm-lt-hr-ht)));
            tr {
              th {
                padding: var(
                  --_ctm-mob-lt-hr-cl-pg,
                  var(--_ctm-tab-lt-hr-cl-pg, var(--_ctm-lt-hr-cl-pg))
                );
                text-align: var(
                  --_ctm-mob-lt-ct-at,
                  var(--_ctm-tab-lt-ct-at, var(--_ctm-lt-ct-at))
                );
                border: 0;
                font-family: prepareMediaVariable(--_ctm-dn-pt-md-cr-dn-ft-fy);
                text-transform: prepareMediaVariable(--_ctm-dn-pt-md-cr-dn-tt-tm);
                word-wrap: prepareMediaVariable(--_ctm-dn-pt-md-cr-dn-wd-wp);
                word-break: prepareMediaVariable(--_ctm-dn-pt-md-cr-dn-wd-bk);
                font-size: prepareMediaVariable(--_ctm-dn-pt-md-cr-dn-ft-se);
                color: prepareMediaVariable(--_ctm-dn-pt-md-cr-dn-cr);
                font-weight: prepareMediaVariable(--_ctm-dn-pt-md-cr-dn-ft-wt);
                font-style: prepareMediaVariable(--_ctm-dn-pt-md-cr-dn-ft-se-ic);
                text-decoration: prepareMediaVariable(--_ctm-dn-pt-md-cr-dn-ue);
                text-align: prepareMediaVariable(--_ctm-dn-pt-md-cr-dn-tt-an);
                letter-spacing: prepareMediaVariable(--_ctm-dn-pt-md-cr-dn-lr-sg);
                line-height: prepareMediaVariable(--_ctm-dn-pt-md-cr-dn-le-ht);
              }
            }
          }
          tbody {
            tr {
              padding: var(
                --_ctm-mob-lt-rw-cl-pg,
                var(--_ctm-tab-lt-rw-cl-pg, var(--_ctm-lt-rw-cl-pg))
              );
              height: var(--_ctm-mob-lt-rw-ht, var(--_ctm-tab-lt-rw-ht, var(--_ctm-lt-rw-ht)));
              th,
              td {
                border: 0;
                padding: inherit;
                text-align: var(
                  --_ctm-mob-lt-ct-at,
                  var(--_ctm-tab-lt-ct-at, var(--_ctm-lt-ct-at))
                );
                font-family: prepareMediaVariable(--_ctm-dn-pt-md-cr-dn-ft-fy);
                text-transform: prepareMediaVariable(--_ctm-dn-pt-md-cr-dn-tt-tm);
                word-wrap: prepareMediaVariable(--_ctm-dn-pt-md-cr-dn-wd-wp);
                word-break: prepareMediaVariable(--_ctm-dn-pt-md-cr-dn-wd-bk);
                font-size: prepareMediaVariable(--_ctm-dn-pt-md-cr-dn-ft-se);
                color: prepareMediaVariable(--_ctm-dn-pt-md-cr-dn-cr);
                font-weight: prepareMediaVariable(--_ctm-dn-pt-md-cr-dn-ft-wt);
                font-style: prepareMediaVariable(--_ctm-dn-pt-md-cr-dn-ft-se-ic);
                text-decoration: prepareMediaVariable(--_ctm-dn-pt-md-cr-dn-ue);
                text-align: prepareMediaVariable(--_ctm-dn-pt-md-cr-dn-tt-an);
                letter-spacing: prepareMediaVariable(--_ctm-dn-pt-md-cr-dn-lr-sg);
                line-height: prepareMediaVariable(--_ctm-dn-pt-md-cr-dn-le-ht);
              }
            }
          }
        }

        .button-content {
          button {
            font-size: 16px;
            padding: 10px 20px;
            background-color: #000;
            color: #fff;
            border: none;
            cursor: pointer;
            border-radius: 10px;
          }
        }
      }
      .loadmore_conatiner {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        margin-top: 10px;
        button {
          font-size: 10px;
          padding: 10px;
          background-color: #000;
          color: #fff;
          border: none;
          cursor: pointer;
          border-radius: 10px;
        }
      }
      .pagination_container {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        button {
          font-size: 16px;
          // padding: 10px 20px;
          // background-color: #000;
          color: #fff;
          border: none;
          cursor: pointer;
          // border-radius: 10px;
        }
        .active {
          span {
            background-color: var(--_gray-300);
            padding: 2px;
          }
        }
      }
    }
  }
}