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

[data-div-type="element"] {
  &[data-element-type="table"] {
    // 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-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
    // );

    & > .wrapper {
      width: 100%;

      // No `.pagination:hover` fill rule: hovering anywhere on the strip used to
      // recolour the whole thing from the hover background key. The row's colour comes
      // from Default Page Style now, and Hover State colours the page chip under the
      // pointer rather than the entire bar.

      .pagination .active:hover {
        cursor: pointer;
        --_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-td: var(--_ctm-dn-pn-hr-se-tt-ue, var(--_tst-dn-hr-tt-ue));
        --_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));
      }
    }
    // Table Widget > Box Shadow, as an opt-in on the attribute rather than through the
    // inherited `--_show-shadow` sentinel it used to use.
    //
    // `--_show-shadow` is a custom property, so it INHERITS. 69 element stylesheets
    // set it to `none` on themselves when their own shadow is off, and any one of them
    // wrapping a Table passed that `none` straight down — `var(--_show-shadow, …)`
    // then resolved to `none` and never reached its fallback, so the Table's own Box
    // Shadow did nothing. Keying off the element's own attribute cannot be inherited
    // into. This is the same shape the Load More button in this file already uses.
    &[data-widget-shadow="true"] {
      .table__wrapper {
        box-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)));
      }
    }
    &[data-widget-border="true"] {
      .table__wrapper {
        border-color: var(
          --_ctm-mob-dn-te-wt-br-cr,
          var(--_ctm-tab-dn-te-wt-br-cr, var(--_ctm-dn-te-wt-br-cr))
        );
        border-style: var(
          --_ctm-mob-dn-te-wt-br-se,
          var(--_ctm-tab-dn-te-wt-br-se, var(--_ctm-dn-te-wt-br-se))
        );
        border-width: var(
          --_ctm-mob-dn-te-wt-br-wh,
          var(--_ctm-tab-dn-te-wt-br-wh, var(--_ctm-dn-te-wt-br-wh))
        );
      }
    }
    &[data-table-shadow="false"] {
      .table__container {
        --_show-table-shadow: none;
      }
    }
    &[data-show-header-border="true"] {
      .table__container {
        table {
          thead {
            border-color: var(
              --_ctm-mob-dn-te-hr-br-cr,
              var(--_ctm-tab-dn-te-hr-br-cr, var(--_ctm-dn-te-hr-br-cr))
            );
            border-style: var(
              --_ctm-mob-dn-te-hr-br-se,
              var(--_ctm-tab-dn-te-hr-br-se, var(--_ctm-dn-te-hr-br-se))
            );
            border-width: var(
              --_ctm-mob-dn-te-hr-br-wh,
              var(--_ctm-tab-dn-te-hr-br-wh, var(--_ctm-dn-te-hr-br-wh))
            );
          }
        }
      }
    }
    &[data-table-border="true"] {
      .table__container {
        border-color: var(
          --_ctm-mob-dn-te-br-cr,
          var(--_ctm-tab-dn-te-br-cr, var(--_ctm-dn-te-br-cr))
        );
        border-style: var(
          --_ctm-mob-dn-te-br-se,
          var(--_ctm-tab-dn-te-br-se, var(--_ctm-dn-te-br-se))
        );
        border-width: var(
          --_ctm-mob-dn-te-br-wh,
          var(--_ctm-tab-dn-te-br-wh, var(--_ctm-dn-te-br-wh))
        );
      }
    }
    &[data-loadmore-button-shadow="true"] {
      .load__more {
        box-shadow: var(
            --_ctm-mob-dn-ld-me-bn-sw-ae,
            var(--_ctm-tab-dn-ld-me-bn-sw-ae, var(--_ctm-dn-ld-me-bn-sw-ae))
          )
          var(
            --_ctm-mob-dn-ld-me-bn-sw-br,
            var(--_ctm-tab-dn-ld-me-bn-sw-br, var(--_ctm-dn-ld-me-bn-sw-br))
          )
          var(
            --_ctm-mob-ld-me-bn-sw-sd,
            var(--_ctm-tab-dn-ld-me-bn-sw-sd, var(--_ctm-dn-ld-me-bn-sw-sd))
          )
          var(
            --_ctm-mob-dn-ld-me-bn-sw-cr,
            var(--_ctm-tab-dn-ld-me-bn-sw-cr, var(--_ctm-dn-ld-me-bn-sw-cr))
          );
      }
    }
    &[data-loadmore-button-border="true"] {
      .load__more {
        border-color: var(
          --_sf-hr-br-cr,
          var(
            --_ctm-mob-dn-ld-me-bn-br-cr,
            var(--_ctm-tab-dn-ld-me-bn-br-cr, var(--_ctm-dn-ld-me-bn-br-cr))
          )
        );
        border-style: var(
          --_sf-hr-br-st,
          var(
            --_ctm-mob-dn-ld-me-bn-br-se,
            var(--_ctm-tab-dn-ld-me-bn-br-se, var(--_ctm-dn-ld-me-bn-br-se))
          )
        );
        border-width: var(
          --_sf-hr-br-wt,
          var(
            --_ctm-mob-dn-ld-me-bn-br-wh,
            var(--_ctm-tab-dn-ld-me-bn-br-wh, var(--_ctm-dn-ld-me-bn-br-wh))
          )
        );
      }
    }
    &[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: scroll;
        height: var(--_ctm-mob-lt-te-ht, var(--_ctm-tab-lt-te-ht, var(--_ctm-lt-te-ht))) !important;

        &::-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: prepareMediaVariable(--_ctm-dn-rw-ae-cr-bd-cr);
      }
    }

    .table__wrapper {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      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)))
      );

      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)))
      );

      // Off by default; the `[data-widget-shadow="true"]` rule above turns it on.
      box-shadow: none;

      width: 100%;

      .table__container {
        overflow-x: auto;
        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)));

        @media (max-width: 1024px) {
          min-width: 700px;
        }

        @media (max-width: 768px) {
          min-width: 600px;
        }

        th,
        td {
          border: none;
          white-space: nowrap;
        }
        thead {
          position: sticky;
          top: 0;
          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 {
            // Table Rows carries Default / Hover states now. The default state falls
            // back to the old flat `te-rw-bd-cr`, which is what tables saved before
            // the split still paint from.
            background-color: prepareMediaVariable(
              --_ctm-dn-te-rw-dt-se-bd-cr,
              prepareMediaVariable(--_ctm-dn-te-rw-bd-cr)
            );

            // Hover falls back to the default state, so a row with no hover colour
            // set simply keeps its own.
            &:hover {
              background-color: prepareMediaVariable(
                --_ctm-dn-te-rw-hr-se-bd-cr,
                prepareMediaVariable(
                  --_ctm-dn-te-rw-dt-se-bd-cr,
                  prepareMediaVariable(--_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;
        // Default Page Style > Background Color fills the whole pagination row.
        // Note this is the PAGE key, not the arrows' `pn-dt-se-bd-cr` — the bar used
        // to read that one, which is why colouring the arrows flooded the strip.
        background-color: prepareMediaVariable(--_ctm-dn-pn-dt-se-pe-bd-cr, transparent);
        gap: 12px;
        &.pagination__center {
          justify-content: var(justify-center);
        }

        // Pagination arrows, styled the way the Gallery Slider and Allocation Details
        // elements style theirs: a plain 10px-padded button sized by Arrow Size, whose
        // only fill is the chosen Background Color mixed down to 10% (20% on hover),
        // with Background Shape deciding the corner.
        button {
          padding: 10px;
          border: none;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          outline: none;
          width: prepareMediaVariable(--_ctm-dn-pn-dt-se-aw-se, 20px);
          height: prepareMediaVariable(--_ctm-dn-pn-dt-se-aw-se, 20px);

          @include BgColorLighter(var(--_ctm-dn-pn-dt-se-bd-cr), 10%);
          // Hover. Pagination offers a Default state only, so there are no hover-state
          // variables to read — the button simply lifts its own fill, which is what it
          // did before the state existed.
          &:not(:disabled):hover {
            @include BgColorLighter(var(--_ctm-dn-pn-dt-se-bd-cr), 20%);
          }

          // Background Shape. Keyed off the button, which is where the renderer
          // publishes the attribute alongside the copy on the container.
          &[data-background-shape="None"] {
            border-radius: 0;
          }
          &[data-background-shape="Round"] {
            border-radius: 50%;
          }
          &[data-background-shape="Square"] {
            border-radius: 4px;
          }

          svg {
            width: calc(#{prepareMediaVariable(--_ctm-dn-pn-dt-se-aw-se, 20px)} * 0.5);
            height: calc(#{prepareMediaVariable(--_ctm-dn-pn-dt-se-aw-se, 20px)} * 0.5);

            // Arrow Color. A library glyph paints with `stroke` on its paths while an
            // uploaded one may use `fill`, or set either on the root.
            &[stroke]:not([stroke="none"]),
            [stroke]:not([stroke="none"]) {
              stroke: prepareMediaVariable(--_ctm-dn-pn-dt-se-aw-cr, var(--_gray-500));
            }
            &[fill]:not([fill="none"]),
            [fill]:not([fill="none"]) {
              fill: prepareMediaVariable(--_ctm-dn-pn-dt-se-aw-cr, var(--_gray-500));
            }
          }
        }
        // The page chip. `> span` deliberately, not a bare `span`: the page markup is
        // an outer span wrapping an inner one that holds the number, so a descendant
        // selector matched BOTH — the inner span picked up the padding and the fill
        // and painted a tight box around the digits instead of the chip being filled.
        & > span {
          float: left;
          padding: var(--_pd-8) var(--_pd-16);
          text-decoration: none;

          // inline-flex so the fill covers the whole padded chip, and so the number
          // sits centred in it once Background Shape rounds the corners.
          display: inline-flex;
          align-items: center;
          justify-content: center;
          box-sizing: border-box;

          // No fill of its own: Default Page Style > Background Color paints the whole
          // row (see `.pagination` above), so repeating it here would draw a second,
          // tighter block of the same colour on top of it. The chip contributes its
          // Shape, and takes the Hover state's colour while pointed at.
          background-color: transparent;
          &[data-page-shape="rectangle"] {
            border-radius: 0;
          }
          &[data-page-shape="rounded"] {
            border-radius: 4px;
          }
          &[data-page-shape="circle"] {
            border-radius: 50%;
            // A circle needs equal sides, so the chip is at least as wide as it is
            // tall however few digits the number has.
            aspect-ratio: 1;
            padding: var(--_pd-8);
          }
          // No hover fill: Pagination offers a Default state only, so there is no
          // hover-state colour to read. The chip's shape and the row's fill are the
          // whole of Default Page Style.

          // The inner span is the number itself — it carries the typography, never the
          // chip's box, so it must not repeat the fill or the padding.
          & > span {
            float: none;
            padding: 0;
            background-color: transparent;
          }
          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))
              )
            );
          }
        }
        // Arrow Color / Arrow Size for anything drawn as text in this button; the SVG
        // itself is sized and coloured by the `button svg` rules above. These read the
        // shared arrow keys now, not the `iconSize` / `iconColor` the section carried
        // before it moved to the Slider Arrows shape.
        .pagination__arrows {
          color: prepareMediaVariable(--_ctm-dn-pn-dt-se-aw-cr);
          font-size: prepareMediaVariable(--_ctm-dn-pn-dt-se-aw-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;
      }
    }
  }
}