grommet/grommet

View on GitHub
src/js/components/Pagination/__tests__/__snapshots__/Pagination-test.tsx.snap

Summary

Maintainability
Test Coverage
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Pagination should allow user to control page via state with page +
  onChange 1`] = `
.c6 {
  display: inline-block;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  fill: #000000;
  stroke: #000000;
}

.c6 g {
  fill: inherit;
  stroke: inherit;
}

.c6 *:not([stroke])[fill='none'] {
  stroke-width: 0;
}

.c6 *[stroke*='#'],
.c6 *[STROKE*='#'] {
  stroke: inherit;
  fill: none;
}

.c6 *[fill-rule],
.c6 *[FILL-RULE],
.c6 *[fill*='#'],
.c6 *[FILL*='#'] {
  fill: inherit;
  stroke: none;
}

.c0 {
  font-size: 18px;
  line-height: 24px;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

.c1 {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  flex: 0 0 auto;
}

.c2 {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
  margin: 0px;
  align-items: center;
  min-width: 0;
  min-height: 0;
  flex-direction: row;
  padding: 0px;
}

.c7 {
  flex: 0 0 auto;
  align-self: stretch;
  width: 3px;
}

.c10 {
  font-size: 18px;
  line-height: 24px;
}

.c9 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  background-color: rgba(221, 221, 221, 0.4);
  color: #000000;
  border: none;
  border-radius: 4px;
  padding: 4px 4px;
  font-size: 18px;
  line-height: 24px;
  background-color: rgba(51, 51, 51, 0.06274509803921569);
  color: #444444;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c9:hover {
  background-color: rgba(51, 51, 51, 0.06274509803921569);
}

.c9:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c9:focus >circle,
.c9:focus >ellipse,
.c9:focus >line,
.c9:focus >path,
.c9:focus >polygon,
.c9:focus >polyline,
.c9:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c9:focus ::-moz-focus-inner {
  border: 0;
}

.c9:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c9:focus:not(:focus-visible) >circle,
.c9:focus:not(:focus-visible) >ellipse,
.c9:focus:not(:focus-visible) >line,
.c9:focus:not(:focus-visible) >path,
.c9:focus:not(:focus-visible) >polygon,
.c9:focus:not(:focus-visible) >polyline,
.c9:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c9:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c8 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 4px;
  padding: 4px 4px;
  font-size: 18px;
  line-height: 24px;
  color: #000000;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c8:hover {
  background-color: rgba(51, 51, 51, 0.06274509803921569);
}

.c8:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c8:focus >circle,
.c8:focus >ellipse,
.c8:focus >line,
.c8:focus >path,
.c8:focus >polygon,
.c8:focus >polyline,
.c8:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c8:focus ::-moz-focus-inner {
  border: 0;
}

.c8:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c8:focus:not(:focus-visible) >circle,
.c8:focus:not(:focus-visible) >ellipse,
.c8:focus:not(:focus-visible) >line,
.c8:focus:not(:focus-visible) >path,
.c8:focus:not(:focus-visible) >polygon,
.c8:focus:not(:focus-visible) >polyline,
.c8:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c8:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c4 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 4px;
  padding: 4px 4px;
  font-size: 18px;
  line-height: 0;
  color: #000000;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c4 >svg {
  display: flex;
  align-self: center;
  vertical-align: middle;
}

.c4:hover {
  background-color: rgba(51, 51, 51, 0.06274509803921569);
}

.c4:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c4:focus >circle,
.c4:focus >ellipse,
.c4:focus >line,
.c4:focus >path,
.c4:focus >polygon,
.c4:focus >polyline,
.c4:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c4:focus ::-moz-focus-inner {
  border: 0;
}

.c4:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c4:focus:not(:focus-visible) >circle,
.c4:focus:not(:focus-visible) >ellipse,
.c4:focus:not(:focus-visible) >line,
.c4:focus:not(:focus-visible) >path,
.c4:focus:not(:focus-visible) >polygon,
.c4:focus:not(:focus-visible) >polyline,
.c4:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c4:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c5 {
  font-size: 18px;
  line-height: 0;
}

.c5 >svg {
  margin: 0 auto;
}

.c3 {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  height: 36px;
  min-width: 36px;
}

.c11 {
  font-weight: bold;
  font-size: 18px;
  line-height: 0;
}

@media only screen and (max-width: 768px) {
  .c2 {
    margin: 0px;
  }
}

@media only screen and (max-width: 768px) {
  .c2 {
    padding: 0px;
  }
}

@media only screen and (max-width: 768px) {
  .c7 {
    width: 2px;
  }
}

<div
  class="c0"
>
  <div
    class="c1 Pagination__StyledPaginationContainer-sc-rnlw6m-0"
  >
    <nav
      aria-label="Pagination Navigation"
      class="c1"
    >
      <ul
        class="c2"
      >
        <li
          class="c3"
        >
          <button
            aria-label="Go to previous page"
            class="c4 c5"
            type="button"
          >
            <svg
              aria-label="Previous"
              class="c6"
              viewBox="0 0 24 24"
            >
              <path
                d="M17 2 7 12l10 10"
                fill="none"
                stroke="#000"
                stroke-width="2"
              />
            </svg>
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 1"
            class="c8 c5"
            type="button"
          >
            1
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-current="page"
            aria-label="Go to page 2"
            class="c9 c5"
            type="button"
          >
            2
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 3"
            class="c8 c5"
            type="button"
          >
            3
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 4"
            class="c8 c5"
            type="button"
          >
            4
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 5"
            class="c8 c5"
            type="button"
          >
            5
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <span
            class="c10 c11"
          >
            …
          </span>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 24"
            class="c8 c5"
            type="button"
          >
            24
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to next page"
            class="c4 c5"
            type="button"
          >
            <svg
              aria-label="Next"
              class="c6"
              viewBox="0 0 24 24"
            >
              <path
                d="m7 2 10 10L7 22"
                fill="none"
                stroke="#000"
                stroke-width="2"
              />
            </svg>
          </button>
        </li>
      </ul>
    </nav>
  </div>
</div>
`;

exports[`Pagination should apply a text component with summary 1`] = `
<DocumentFragment>
  .c11 {
  display: inline-block;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  fill: #666666;
  stroke: #666666;
}

.c11 g {
  fill: inherit;
  stroke: inherit;
}

.c11 *:not([stroke])[fill='none'] {
  stroke-width: 0;
}

.c11 *[stroke*='#'],
.c11 *[STROKE*='#'] {
  stroke: inherit;
  fill: none;
}

.c11 *[fill-rule],
.c11 *[FILL-RULE],
.c11 *[fill*='#'],
.c11 *[FILL*='#'] {
  fill: inherit;
  stroke: none;
}

.c17 {
  display: inline-block;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  fill: #000000;
  stroke: #000000;
}

.c17 g {
  fill: inherit;
  stroke: inherit;
}

.c17 *:not([stroke])[fill='none'] {
  stroke-width: 0;
}

.c17 *[stroke*='#'],
.c17 *[STROKE*='#'] {
  stroke: inherit;
  fill: none;
}

.c17 *[fill-rule],
.c17 *[FILL-RULE],
.c17 *[fill*='#'],
.c17 *[FILL*='#'] {
  fill: inherit;
  stroke: none;
}

.c0 {
  font-size: 18px;
  line-height: 24px;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

.c1 {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
  align-items: center;
  min-width: 0;
  min-height: 0;
  flex-direction: row;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 12px 6px;
}

.c2 {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  flex: 1 0 auto;
}

.c3 {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
}

.c5 {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
  align-items: center;
  min-width: 0;
  min-height: 0;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px 6px;
}

.c6 {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  flex: 0 0 auto;
}

.c7 {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
  margin: 0px;
  align-items: center;
  min-width: 0;
  min-height: 0;
  flex-direction: row;
  padding: 0px;
}

.c12 {
  flex: 0 0 auto;
  align-self: stretch;
  width: 3px;
}

.c4 {
  font-size: 18px;
  line-height: 24px;
}

.c9 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 4px;
  padding: 4px 4px;
  font-size: 18px;
  line-height: 0;
  text-align: center;
  opacity: 0.3;
  cursor: default;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c9 >svg {
  display: flex;
  align-self: center;
  vertical-align: middle;
}

.c9:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c9:focus >circle,
.c9:focus >ellipse,
.c9:focus >line,
.c9:focus >path,
.c9:focus >polygon,
.c9:focus >polyline,
.c9:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c9:focus ::-moz-focus-inner {
  border: 0;
}

.c9:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c9:focus:not(:focus-visible) >circle,
.c9:focus:not(:focus-visible) >ellipse,
.c9:focus:not(:focus-visible) >line,
.c9:focus:not(:focus-visible) >path,
.c9:focus:not(:focus-visible) >polygon,
.c9:focus:not(:focus-visible) >polyline,
.c9:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c9:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c13 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  background-color: rgba(221, 221, 221, 0.4);
  color: #000000;
  border: none;
  border-radius: 4px;
  padding: 4px 4px;
  font-size: 18px;
  line-height: 24px;
  background-color: rgba(51, 51, 51, 0.06274509803921569);
  color: #444444;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c13:hover {
  background-color: rgba(51, 51, 51, 0.06274509803921569);
}

.c13:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c13:focus >circle,
.c13:focus >ellipse,
.c13:focus >line,
.c13:focus >path,
.c13:focus >polygon,
.c13:focus >polyline,
.c13:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c13:focus ::-moz-focus-inner {
  border: 0;
}

.c13:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c13:focus:not(:focus-visible) >circle,
.c13:focus:not(:focus-visible) >ellipse,
.c13:focus:not(:focus-visible) >line,
.c13:focus:not(:focus-visible) >path,
.c13:focus:not(:focus-visible) >polygon,
.c13:focus:not(:focus-visible) >polyline,
.c13:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c13:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c14 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 4px;
  padding: 4px 4px;
  font-size: 18px;
  line-height: 24px;
  color: #000000;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c14:hover {
  background-color: rgba(51, 51, 51, 0.06274509803921569);
}

.c14:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c14:focus >circle,
.c14:focus >ellipse,
.c14:focus >line,
.c14:focus >path,
.c14:focus >polygon,
.c14:focus >polyline,
.c14:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c14:focus ::-moz-focus-inner {
  border: 0;
}

.c14:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c14:focus:not(:focus-visible) >circle,
.c14:focus:not(:focus-visible) >ellipse,
.c14:focus:not(:focus-visible) >line,
.c14:focus:not(:focus-visible) >path,
.c14:focus:not(:focus-visible) >polygon,
.c14:focus:not(:focus-visible) >polyline,
.c14:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c14:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c16 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 4px;
  padding: 4px 4px;
  font-size: 18px;
  line-height: 0;
  color: #000000;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c16 >svg {
  display: flex;
  align-self: center;
  vertical-align: middle;
}

.c16:hover {
  background-color: rgba(51, 51, 51, 0.06274509803921569);
}

.c16:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c16:focus >circle,
.c16:focus >ellipse,
.c16:focus >line,
.c16:focus >path,
.c16:focus >polygon,
.c16:focus >polyline,
.c16:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c16:focus ::-moz-focus-inner {
  border: 0;
}

.c16:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c16:focus:not(:focus-visible) >circle,
.c16:focus:not(:focus-visible) >ellipse,
.c16:focus:not(:focus-visible) >line,
.c16:focus:not(:focus-visible) >path,
.c16:focus:not(:focus-visible) >polygon,
.c16:focus:not(:focus-visible) >polyline,
.c16:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c16:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c10 {
  font-size: 18px;
  line-height: 0;
}

.c10 >svg {
  margin: 0 auto;
}

.c8 {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  height: 36px;
  min-width: 36px;
}

.c15 {
  font-weight: bold;
  font-size: 18px;
  line-height: 0;
}

@media only screen and (max-width: 768px) {
  .c7 {
    margin: 0px;
  }
}

@media only screen and (max-width: 768px) {
  .c7 {
    padding: 0px;
  }
}

@media only screen and (max-width: 768px) {
  .c12 {
    width: 2px;
  }
}

<div
    class="c0"
  >
    <div
      class="c1 Pagination__StyledPaginationContainer-sc-rnlw6m-0"
    >
      <div
        class="c2"
      >
        <div
          class="c3"
        >
          <span
            class="c4"
          >
            Showing 1-10 of 237
          </span>
        </div>
      </div>
      <div
        class="c5"
      >
        <nav
          aria-label="Pagination Navigation"
          class="c6"
        >
          <ul
            class="c7"
          >
            <li
              class="c8"
            >
              <button
                aria-disabled="true"
                aria-label="Go to previous page"
                class="c9 c10"
                disabled=""
                type="button"
              >
                <svg
                  aria-label="Previous"
                  class="c11"
                  viewBox="0 0 24 24"
                >
                  <path
                    d="M17 2 7 12l10 10"
                    fill="none"
                    stroke="#000"
                    stroke-width="2"
                  />
                </svg>
              </button>
            </li>
            <div
              class="c12"
            />
            <li
              class="c8"
            >
              <button
                aria-current="page"
                aria-label="Go to page 1"
                class="c13 c10"
                type="button"
              >
                1
              </button>
            </li>
            <div
              class="c12"
            />
            <li
              class="c8"
            >
              <button
                aria-label="Go to page 2"
                class="c14 c10"
                type="button"
              >
                2
              </button>
            </li>
            <div
              class="c12"
            />
            <li
              class="c8"
            >
              <button
                aria-label="Go to page 3"
                class="c14 c10"
                type="button"
              >
                3
              </button>
            </li>
            <div
              class="c12"
            />
            <li
              class="c8"
            >
              <button
                aria-label="Go to page 4"
                class="c14 c10"
                type="button"
              >
                4
              </button>
            </li>
            <div
              class="c12"
            />
            <li
              class="c8"
            >
              <button
                aria-label="Go to page 5"
                class="c14 c10"
                type="button"
              >
                5
              </button>
            </li>
            <div
              class="c12"
            />
            <li
              class="c8"
            >
              <span
                class="c4 c15"
              >
                …
              </span>
            </li>
            <div
              class="c12"
            />
            <li
              class="c8"
            >
              <button
                aria-label="Go to page 24"
                class="c14 c10"
                type="button"
              >
                24
              </button>
            </li>
            <div
              class="c12"
            />
            <li
              class="c8"
            >
              <button
                aria-label="Go to next page"
                class="c16 c10"
                type="button"
              >
                <svg
                  aria-label="Next"
                  class="c17"
                  viewBox="0 0 24 24"
                >
                  <path
                    d="m7 2 10 10L7 22"
                    fill="none"
                    stroke="#000"
                    stroke-width="2"
                  />
                </svg>
              </button>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  </div>
</DocumentFragment>
`;

exports[`Pagination should apply a11yTitle and aria-label 1`] = `
.c6 {
  display: inline-block;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  fill: #666666;
  stroke: #666666;
}

.c6 g {
  fill: inherit;
  stroke: inherit;
}

.c6 *:not([stroke])[fill='none'] {
  stroke-width: 0;
}

.c6 *[stroke*='#'],
.c6 *[STROKE*='#'] {
  stroke: inherit;
  fill: none;
}

.c6 *[fill-rule],
.c6 *[FILL-RULE],
.c6 *[fill*='#'],
.c6 *[FILL*='#'] {
  fill: inherit;
  stroke: none;
}

.c13 {
  display: inline-block;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  fill: #000000;
  stroke: #000000;
}

.c13 g {
  fill: inherit;
  stroke: inherit;
}

.c13 *:not([stroke])[fill='none'] {
  stroke-width: 0;
}

.c13 *[stroke*='#'],
.c13 *[STROKE*='#'] {
  stroke: inherit;
  fill: none;
}

.c13 *[fill-rule],
.c13 *[FILL-RULE],
.c13 *[fill*='#'],
.c13 *[FILL*='#'] {
  fill: inherit;
  stroke: none;
}

.c0 {
  font-size: 18px;
  line-height: 24px;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

.c1 {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  flex: 0 0 auto;
}

.c2 {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
  margin: 0px;
  align-items: center;
  min-width: 0;
  min-height: 0;
  flex-direction: row;
  padding: 0px;
}

.c7 {
  flex: 0 0 auto;
  align-self: stretch;
  width: 3px;
}

.c10 {
  font-size: 18px;
  line-height: 24px;
}

.c4 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 4px;
  padding: 4px 4px;
  font-size: 18px;
  line-height: 0;
  text-align: center;
  opacity: 0.3;
  cursor: default;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c4 >svg {
  display: flex;
  align-self: center;
  vertical-align: middle;
}

.c4:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c4:focus >circle,
.c4:focus >ellipse,
.c4:focus >line,
.c4:focus >path,
.c4:focus >polygon,
.c4:focus >polyline,
.c4:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c4:focus ::-moz-focus-inner {
  border: 0;
}

.c4:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c4:focus:not(:focus-visible) >circle,
.c4:focus:not(:focus-visible) >ellipse,
.c4:focus:not(:focus-visible) >line,
.c4:focus:not(:focus-visible) >path,
.c4:focus:not(:focus-visible) >polygon,
.c4:focus:not(:focus-visible) >polyline,
.c4:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c4:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c8 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  background-color: rgba(221, 221, 221, 0.4);
  color: #000000;
  border: none;
  border-radius: 4px;
  padding: 4px 4px;
  font-size: 18px;
  line-height: 24px;
  background-color: rgba(51, 51, 51, 0.06274509803921569);
  color: #444444;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c8:hover {
  background-color: rgba(51, 51, 51, 0.06274509803921569);
}

.c8:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c8:focus >circle,
.c8:focus >ellipse,
.c8:focus >line,
.c8:focus >path,
.c8:focus >polygon,
.c8:focus >polyline,
.c8:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c8:focus ::-moz-focus-inner {
  border: 0;
}

.c8:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c8:focus:not(:focus-visible) >circle,
.c8:focus:not(:focus-visible) >ellipse,
.c8:focus:not(:focus-visible) >line,
.c8:focus:not(:focus-visible) >path,
.c8:focus:not(:focus-visible) >polygon,
.c8:focus:not(:focus-visible) >polyline,
.c8:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c8:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c9 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 4px;
  padding: 4px 4px;
  font-size: 18px;
  line-height: 24px;
  color: #000000;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c9:hover {
  background-color: rgba(51, 51, 51, 0.06274509803921569);
}

.c9:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c9:focus >circle,
.c9:focus >ellipse,
.c9:focus >line,
.c9:focus >path,
.c9:focus >polygon,
.c9:focus >polyline,
.c9:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c9:focus ::-moz-focus-inner {
  border: 0;
}

.c9:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c9:focus:not(:focus-visible) >circle,
.c9:focus:not(:focus-visible) >ellipse,
.c9:focus:not(:focus-visible) >line,
.c9:focus:not(:focus-visible) >path,
.c9:focus:not(:focus-visible) >polygon,
.c9:focus:not(:focus-visible) >polyline,
.c9:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c9:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c12 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 4px;
  padding: 4px 4px;
  font-size: 18px;
  line-height: 0;
  color: #000000;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c12 >svg {
  display: flex;
  align-self: center;
  vertical-align: middle;
}

.c12:hover {
  background-color: rgba(51, 51, 51, 0.06274509803921569);
}

.c12:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c12:focus >circle,
.c12:focus >ellipse,
.c12:focus >line,
.c12:focus >path,
.c12:focus >polygon,
.c12:focus >polyline,
.c12:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c12:focus ::-moz-focus-inner {
  border: 0;
}

.c12:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c12:focus:not(:focus-visible) >circle,
.c12:focus:not(:focus-visible) >ellipse,
.c12:focus:not(:focus-visible) >line,
.c12:focus:not(:focus-visible) >path,
.c12:focus:not(:focus-visible) >polygon,
.c12:focus:not(:focus-visible) >polyline,
.c12:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c12:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c5 {
  font-size: 18px;
  line-height: 0;
}

.c5 >svg {
  margin: 0 auto;
}

.c3 {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  height: 36px;
  min-width: 36px;
}

.c11 {
  font-weight: bold;
  font-size: 18px;
  line-height: 0;
}

@media only screen and (max-width: 768px) {
  .c2 {
    margin: 0px;
  }
}

@media only screen and (max-width: 768px) {
  .c2 {
    padding: 0px;
  }
}

@media only screen and (max-width: 768px) {
  .c7 {
    width: 2px;
  }
}

<div
  class="c0"
>
  <div
    class="c1 Pagination__StyledPaginationContainer-sc-rnlw6m-0"
  >
    <nav
      aria-label="pagination-test"
      class="c1"
    >
      <ul
        class="c2"
      >
        <li
          class="c3"
        >
          <button
            aria-disabled="true"
            aria-label="Go to previous page"
            class="c4 c5"
            disabled=""
            type="button"
          >
            <svg
              aria-label="Previous"
              class="c6"
              viewBox="0 0 24 24"
            >
              <path
                d="M17 2 7 12l10 10"
                fill="none"
                stroke="#000"
                stroke-width="2"
              />
            </svg>
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-current="page"
            aria-label="Go to page 1"
            class="c8 c5"
            type="button"
          >
            1
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 2"
            class="c9 c5"
            type="button"
          >
            2
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 3"
            class="c9 c5"
            type="button"
          >
            3
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 4"
            class="c9 c5"
            type="button"
          >
            4
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 5"
            class="c9 c5"
            type="button"
          >
            5
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <span
            class="c10 c11"
          >
            …
          </span>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 24"
            class="c9 c5"
            type="button"
          >
            24
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to next page"
            class="c12 c5"
            type="button"
          >
            <svg
              aria-label="Next"
              class="c13"
              viewBox="0 0 24 24"
            >
              <path
                d="m7 2 10 10L7 22"
                fill="none"
                stroke="#000"
                stroke-width="2"
              />
            </svg>
          </button>
        </li>
      </ul>
    </nav>
  </div>
  <div
    class="c1 Pagination__StyledPaginationContainer-sc-rnlw6m-0"
  >
    <nav
      aria-label="pagination-test-2"
      class="c1"
    >
      <ul
        class="c2"
      >
        <li
          class="c3"
        >
          <button
            aria-disabled="true"
            aria-label="Go to previous page"
            class="c4 c5"
            disabled=""
            type="button"
          >
            <svg
              aria-label="Previous"
              class="c6"
              viewBox="0 0 24 24"
            >
              <path
                d="M17 2 7 12l10 10"
                fill="none"
                stroke="#000"
                stroke-width="2"
              />
            </svg>
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-current="page"
            aria-label="Go to page 1"
            class="c8 c5"
            type="button"
          >
            1
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 2"
            class="c9 c5"
            type="button"
          >
            2
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 3"
            class="c9 c5"
            type="button"
          >
            3
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 4"
            class="c9 c5"
            type="button"
          >
            4
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 5"
            class="c9 c5"
            type="button"
          >
            5
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <span
            class="c10 c11"
          >
            …
          </span>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 24"
            class="c9 c5"
            type="button"
          >
            24
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to next page"
            class="c12 c5"
            type="button"
          >
            <svg
              aria-label="Next"
              class="c13"
              viewBox="0 0 24 24"
            >
              <path
                d="m7 2 10 10L7 22"
                fill="none"
                stroke="#000"
                stroke-width="2"
              />
            </svg>
          </button>
        </li>
      </ul>
    </nav>
  </div>
</div>
`;

exports[`Pagination should apply button kind style when referenced by a string 1`] = `
.c6 {
  display: inline-block;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  fill: #000000;
  stroke: #000000;
}

.c6 g {
  fill: inherit;
  stroke: inherit;
}

.c6 *:not([stroke])[fill='none'] {
  stroke-width: 0;
}

.c6 *[stroke*='#'],
.c6 *[STROKE*='#'] {
  stroke: inherit;
  fill: none;
}

.c6 *[fill-rule],
.c6 *[FILL-RULE],
.c6 *[fill*='#'],
.c6 *[FILL*='#'] {
  fill: inherit;
  stroke: none;
}

.c0 {
  font-size: 18px;
  line-height: 24px;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

.c1 {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  flex: 0 0 auto;
}

.c2 {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
  margin: 0px;
  align-items: center;
  min-width: 0;
  min-height: 0;
  flex-direction: row;
  padding: 0px;
}

.c7 {
  flex: 0 0 auto;
  align-self: stretch;
  width: 3px;
}

.c10 {
  font-size: 18px;
  line-height: 24px;
}

.c4 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 18px;
  padding: 4px 22px;
  font-size: 18px;
  line-height: 0;
  color: #000000;
  border-style: solid;
  border-width: 2px;
  border-color: skyblue;
  padding: 2px 20px;
  opacity: 0.3;
  text-align: center;
  opacity: 0.3;
  cursor: default;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c4 >svg {
  display: flex;
  align-self: center;
  vertical-align: middle;
}

.c4:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c4:focus >circle,
.c4:focus >ellipse,
.c4:focus >line,
.c4:focus >path,
.c4:focus >polygon,
.c4:focus >polyline,
.c4:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c4:focus ::-moz-focus-inner {
  border: 0;
}

.c4:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c4:focus:not(:focus-visible) >circle,
.c4:focus:not(:focus-visible) >ellipse,
.c4:focus:not(:focus-visible) >line,
.c4:focus:not(:focus-visible) >path,
.c4:focus:not(:focus-visible) >polygon,
.c4:focus:not(:focus-visible) >polyline,
.c4:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c4:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c8 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  background-color: rgba(221, 221, 221, 0.4);
  color: #000000;
  border: none;
  border-radius: 18px;
  padding: 4px 22px;
  font-size: 18px;
  line-height: 24px;
  color: #000000;
  border-style: solid;
  border-width: 2px;
  border-color: skyblue;
  padding: 2px 20px;
  background-color: #33333310;
  color: #000000;
  background-color: rgba(202, 156, 234, 1);
  color: #444444;
  border-color: transparent;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c8:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c8:focus >circle,
.c8:focus >ellipse,
.c8:focus >line,
.c8:focus >path,
.c8:focus >polygon,
.c8:focus >polyline,
.c8:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c8:focus ::-moz-focus-inner {
  border: 0;
}

.c8:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c8:focus:not(:focus-visible) >circle,
.c8:focus:not(:focus-visible) >ellipse,
.c8:focus:not(:focus-visible) >line,
.c8:focus:not(:focus-visible) >path,
.c8:focus:not(:focus-visible) >polygon,
.c8:focus:not(:focus-visible) >polyline,
.c8:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c8:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c9 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 18px;
  padding: 4px 22px;
  font-size: 18px;
  line-height: 24px;
  color: #000000;
  border-style: solid;
  border-width: 2px;
  border-color: skyblue;
  padding: 2px 20px;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c9:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c9:focus >circle,
.c9:focus >ellipse,
.c9:focus >line,
.c9:focus >path,
.c9:focus >polygon,
.c9:focus >polyline,
.c9:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c9:focus ::-moz-focus-inner {
  border: 0;
}

.c9:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c9:focus:not(:focus-visible) >circle,
.c9:focus:not(:focus-visible) >ellipse,
.c9:focus:not(:focus-visible) >line,
.c9:focus:not(:focus-visible) >path,
.c9:focus:not(:focus-visible) >polygon,
.c9:focus:not(:focus-visible) >polyline,
.c9:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c9:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c12 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 18px;
  padding: 4px 22px;
  font-size: 18px;
  line-height: 0;
  color: #000000;
  border-style: solid;
  border-width: 2px;
  border-color: skyblue;
  padding: 2px 20px;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c12 >svg {
  display: flex;
  align-self: center;
  vertical-align: middle;
}

.c12:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c12:focus >circle,
.c12:focus >ellipse,
.c12:focus >line,
.c12:focus >path,
.c12:focus >polygon,
.c12:focus >polyline,
.c12:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c12:focus ::-moz-focus-inner {
  border: 0;
}

.c12:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c12:focus:not(:focus-visible) >circle,
.c12:focus:not(:focus-visible) >ellipse,
.c12:focus:not(:focus-visible) >line,
.c12:focus:not(:focus-visible) >path,
.c12:focus:not(:focus-visible) >polygon,
.c12:focus:not(:focus-visible) >polyline,
.c12:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c12:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c5 >svg {
  margin: 0 auto;
}

.c3 {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}

.c11 {
  font-weight: bold;
  font-size: undefined;
  line-height: undefined;
}

@media only screen and (max-width: 768px) {
  .c2 {
    margin: 0px;
  }
}

@media only screen and (max-width: 768px) {
  .c2 {
    padding: 0px;
  }
}

@media only screen and (max-width: 768px) {
  .c7 {
    width: 2px;
  }
}

<div
  class="c0"
>
  <div
    class="c1 Pagination__StyledPaginationContainer-sc-rnlw6m-0"
  >
    <nav
      aria-label="Pagination Navigation"
      class="c1"
    >
      <ul
        class="c2"
      >
        <li
          class="c3"
        >
          <button
            aria-disabled="true"
            aria-label="Go to previous page"
            class="c4 c5"
            disabled=""
            type="button"
          >
            <svg
              aria-label="Previous"
              class="c6"
              viewBox="0 0 24 24"
            >
              <path
                d="M17 2 7 12l10 10"
                fill="none"
                stroke="#000"
                stroke-width="2"
              />
            </svg>
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-current="page"
            aria-label="Go to page 1"
            class="c8 c5"
            type="button"
          >
            1
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 2"
            class="c9 c5"
            type="button"
          >
            2
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 3"
            class="c9 c5"
            type="button"
          >
            3
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 4"
            class="c9 c5"
            type="button"
          >
            4
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 5"
            class="c9 c5"
            type="button"
          >
            5
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <span
            class="c10 c11"
          >
            …
          </span>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 24"
            class="c9 c5"
            type="button"
          >
            24
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to next page"
            class="c12 c5"
            type="button"
          >
            <svg
              aria-label="Next"
              class="c6"
              viewBox="0 0 24 24"
            >
              <path
                d="m7 2 10 10L7 22"
                fill="none"
                stroke="#000"
                stroke-width="2"
              />
            </svg>
          </button>
        </li>
      </ul>
    </nav>
  </div>
</div>
`;

exports[`Pagination should apply custom theme 1`] = `
.c7 {
  display: inline-block;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  fill: #666666;
  stroke: #666666;
}

.c7 g {
  fill: inherit;
  stroke: inherit;
}

.c7 *:not([stroke])[fill='none'] {
  stroke-width: 0;
}

.c7 *[stroke*='#'],
.c7 *[STROKE*='#'] {
  stroke: inherit;
  fill: none;
}

.c7 *[fill-rule],
.c7 *[FILL-RULE],
.c7 *[fill*='#'],
.c7 *[FILL*='#'] {
  fill: inherit;
  stroke: none;
}

.c14 {
  display: inline-block;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  fill: #000000;
  stroke: #000000;
}

.c14 g {
  fill: inherit;
  stroke: inherit;
}

.c14 *:not([stroke])[fill='none'] {
  stroke-width: 0;
}

.c14 *[stroke*='#'],
.c14 *[STROKE*='#'] {
  stroke: inherit;
  fill: none;
}

.c14 *[fill-rule],
.c14 *[FILL-RULE],
.c14 *[fill*='#'],
.c14 *[FILL*='#'] {
  fill: inherit;
  stroke: none;
}

.c0 {
  font-size: 18px;
  line-height: 24px;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

.c1 {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  flex: 0 0 auto;
}

.c3 {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
  margin: 0px;
  align-items: center;
  min-width: 0;
  min-height: 0;
  flex-direction: row;
  padding: 0px;
}

.c8 {
  flex: 0 0 auto;
  align-self: stretch;
  width: 3px;
}

.c11 {
  font-size: 18px;
  line-height: 24px;
}

.c5 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 4px;
  padding: 4px 4px;
  font-size: 18px;
  line-height: 0;
  text-align: center;
  opacity: 0.3;
  cursor: default;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c5 >svg {
  display: flex;
  align-self: center;
  vertical-align: middle;
}

.c5:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c5:focus >circle,
.c5:focus >ellipse,
.c5:focus >line,
.c5:focus >path,
.c5:focus >polygon,
.c5:focus >polyline,
.c5:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c5:focus ::-moz-focus-inner {
  border: 0;
}

.c5:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c5:focus:not(:focus-visible) >circle,
.c5:focus:not(:focus-visible) >ellipse,
.c5:focus:not(:focus-visible) >line,
.c5:focus:not(:focus-visible) >path,
.c5:focus:not(:focus-visible) >polygon,
.c5:focus:not(:focus-visible) >polyline,
.c5:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c5:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c9 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  background-color: rgba(221, 221, 221, 0.4);
  color: #000000;
  border: none;
  border-radius: 4px;
  padding: 4px 4px;
  font-size: 18px;
  line-height: 24px;
  background-color: rgba(51, 51, 51, 0.06274509803921569);
  color: #444444;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c9:hover {
  background-color: rgba(51, 51, 51, 0.06274509803921569);
}

.c9:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c9:focus >circle,
.c9:focus >ellipse,
.c9:focus >line,
.c9:focus >path,
.c9:focus >polygon,
.c9:focus >polyline,
.c9:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c9:focus ::-moz-focus-inner {
  border: 0;
}

.c9:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c9:focus:not(:focus-visible) >circle,
.c9:focus:not(:focus-visible) >ellipse,
.c9:focus:not(:focus-visible) >line,
.c9:focus:not(:focus-visible) >path,
.c9:focus:not(:focus-visible) >polygon,
.c9:focus:not(:focus-visible) >polyline,
.c9:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c9:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c10 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 4px;
  padding: 4px 4px;
  font-size: 18px;
  line-height: 24px;
  color: #000000;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c10:hover {
  background-color: rgba(51, 51, 51, 0.06274509803921569);
}

.c10:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c10:focus >circle,
.c10:focus >ellipse,
.c10:focus >line,
.c10:focus >path,
.c10:focus >polygon,
.c10:focus >polyline,
.c10:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c10:focus ::-moz-focus-inner {
  border: 0;
}

.c10:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c10:focus:not(:focus-visible) >circle,
.c10:focus:not(:focus-visible) >ellipse,
.c10:focus:not(:focus-visible) >line,
.c10:focus:not(:focus-visible) >path,
.c10:focus:not(:focus-visible) >polygon,
.c10:focus:not(:focus-visible) >polyline,
.c10:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c10:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c13 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 4px;
  padding: 4px 4px;
  font-size: 18px;
  line-height: 0;
  color: #000000;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c13 >svg {
  display: flex;
  align-self: center;
  vertical-align: middle;
}

.c13:hover {
  background-color: rgba(51, 51, 51, 0.06274509803921569);
}

.c13:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c13:focus >circle,
.c13:focus >ellipse,
.c13:focus >line,
.c13:focus >path,
.c13:focus >polygon,
.c13:focus >polyline,
.c13:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c13:focus ::-moz-focus-inner {
  border: 0;
}

.c13:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c13:focus:not(:focus-visible) >circle,
.c13:focus:not(:focus-visible) >ellipse,
.c13:focus:not(:focus-visible) >line,
.c13:focus:not(:focus-visible) >path,
.c13:focus:not(:focus-visible) >polygon,
.c13:focus:not(:focus-visible) >polyline,
.c13:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c13:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c6 {
  font-size: 18px;
  line-height: 0;
}

.c6 >svg {
  margin: 0 auto;
}

.c4 {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  height: 36px;
  min-width: 36px;
}

.c12 {
  font-weight: bold;
  font-size: 18px;
  line-height: 0;
}

.c2 {
  background: red;
}

@media only screen and (max-width: 768px) {
  .c3 {
    margin: 0px;
  }
}

@media only screen and (max-width: 768px) {
  .c3 {
    padding: 0px;
  }
}

@media only screen and (max-width: 768px) {
  .c8 {
    width: 2px;
  }
}

<div
  class="c0"
>
  <div
    class="c1 c2"
  >
    <nav
      aria-label="Pagination Navigation"
      class="c1"
    >
      <ul
        class="c3"
      >
        <li
          class="c4"
        >
          <button
            aria-disabled="true"
            aria-label="Go to previous page"
            class="c5 c6"
            disabled=""
            type="button"
          >
            <svg
              aria-label="Previous"
              class="c7"
              viewBox="0 0 24 24"
            >
              <path
                d="M17 2 7 12l10 10"
                fill="none"
                stroke="#000"
                stroke-width="2"
              />
            </svg>
          </button>
        </li>
        <div
          class="c8"
        />
        <li
          class="c4"
        >
          <button
            aria-current="page"
            aria-label="Go to page 1"
            class="c9 c6"
            type="button"
          >
            1
          </button>
        </li>
        <div
          class="c8"
        />
        <li
          class="c4"
        >
          <button
            aria-label="Go to page 2"
            class="c10 c6"
            type="button"
          >
            2
          </button>
        </li>
        <div
          class="c8"
        />
        <li
          class="c4"
        >
          <button
            aria-label="Go to page 3"
            class="c10 c6"
            type="button"
          >
            3
          </button>
        </li>
        <div
          class="c8"
        />
        <li
          class="c4"
        >
          <button
            aria-label="Go to page 4"
            class="c10 c6"
            type="button"
          >
            4
          </button>
        </li>
        <div
          class="c8"
        />
        <li
          class="c4"
        >
          <button
            aria-label="Go to page 5"
            class="c10 c6"
            type="button"
          >
            5
          </button>
        </li>
        <div
          class="c8"
        />
        <li
          class="c4"
        >
          <span
            class="c11 c12"
          >
            …
          </span>
        </li>
        <div
          class="c8"
        />
        <li
          class="c4"
        >
          <button
            aria-label="Go to page 24"
            class="c10 c6"
            type="button"
          >
            24
          </button>
        </li>
        <div
          class="c8"
        />
        <li
          class="c4"
        >
          <button
            aria-label="Go to next page"
            class="c13 c6"
            type="button"
          >
            <svg
              aria-label="Next"
              class="c14"
              viewBox="0 0 24 24"
            >
              <path
                d="m7 2 10 10L7 22"
                fill="none"
                stroke="#000"
                stroke-width="2"
              />
            </svg>
          </button>
        </li>
      </ul>
    </nav>
  </div>
</div>
`;

exports[`Pagination should apply size 1`] = `
.c6 {
  display: inline-block;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  fill: #666666;
  stroke: #666666;
}

.c6 g {
  fill: inherit;
  stroke: inherit;
}

.c6 *:not([stroke])[fill='none'] {
  stroke-width: 0;
}

.c6 *[stroke*='#'],
.c6 *[STROKE*='#'] {
  stroke: inherit;
  fill: none;
}

.c6 *[fill-rule],
.c6 *[FILL-RULE],
.c6 *[fill*='#'],
.c6 *[FILL*='#'] {
  fill: inherit;
  stroke: none;
}

.c13 {
  display: inline-block;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  fill: #000000;
  stroke: #000000;
}

.c13 g {
  fill: inherit;
  stroke: inherit;
}

.c13 *:not([stroke])[fill='none'] {
  stroke-width: 0;
}

.c13 *[stroke*='#'],
.c13 *[STROKE*='#'] {
  stroke: inherit;
  fill: none;
}

.c13 *[fill-rule],
.c13 *[FILL-RULE],
.c13 *[fill*='#'],
.c13 *[FILL*='#'] {
  fill: inherit;
  stroke: none;
}

.c0 {
  font-size: 18px;
  line-height: 24px;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

.c1 {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  flex: 0 0 auto;
}

.c2 {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
  margin: 0px;
  align-items: center;
  min-width: 0;
  min-height: 0;
  flex-direction: row;
  padding: 0px;
}

.c7 {
  flex: 0 0 auto;
  align-self: stretch;
  width: 3px;
}

.c10 {
  font-size: 18px;
  line-height: 24px;
}

.c19 {
  font-size: 14px;
  line-height: 20px;
}

.c27 {
  font-size: 22px;
  line-height: 28px;
}

.c4 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 4px;
  padding: 4px 4px;
  font-size: 18px;
  line-height: 0;
  text-align: center;
  opacity: 0.3;
  cursor: default;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c4 >svg {
  display: flex;
  align-self: center;
  vertical-align: middle;
}

.c4:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c4:focus >circle,
.c4:focus >ellipse,
.c4:focus >line,
.c4:focus >path,
.c4:focus >polygon,
.c4:focus >polyline,
.c4:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c4:focus ::-moz-focus-inner {
  border: 0;
}

.c4:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c4:focus:not(:focus-visible) >circle,
.c4:focus:not(:focus-visible) >ellipse,
.c4:focus:not(:focus-visible) >line,
.c4:focus:not(:focus-visible) >path,
.c4:focus:not(:focus-visible) >polygon,
.c4:focus:not(:focus-visible) >polyline,
.c4:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c4:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c8 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  background-color: rgba(221, 221, 221, 0.4);
  color: #000000;
  border: none;
  border-radius: 4px;
  padding: 4px 4px;
  font-size: 18px;
  line-height: 24px;
  background-color: rgba(51, 51, 51, 0.06274509803921569);
  color: #444444;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c8:hover {
  background-color: rgba(51, 51, 51, 0.06274509803921569);
}

.c8:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c8:focus >circle,
.c8:focus >ellipse,
.c8:focus >line,
.c8:focus >path,
.c8:focus >polygon,
.c8:focus >polyline,
.c8:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c8:focus ::-moz-focus-inner {
  border: 0;
}

.c8:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c8:focus:not(:focus-visible) >circle,
.c8:focus:not(:focus-visible) >ellipse,
.c8:focus:not(:focus-visible) >line,
.c8:focus:not(:focus-visible) >path,
.c8:focus:not(:focus-visible) >polygon,
.c8:focus:not(:focus-visible) >polyline,
.c8:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c8:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c9 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 4px;
  padding: 4px 4px;
  font-size: 18px;
  line-height: 24px;
  color: #000000;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c9:hover {
  background-color: rgba(51, 51, 51, 0.06274509803921569);
}

.c9:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c9:focus >circle,
.c9:focus >ellipse,
.c9:focus >line,
.c9:focus >path,
.c9:focus >polygon,
.c9:focus >polyline,
.c9:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c9:focus ::-moz-focus-inner {
  border: 0;
}

.c9:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c9:focus:not(:focus-visible) >circle,
.c9:focus:not(:focus-visible) >ellipse,
.c9:focus:not(:focus-visible) >line,
.c9:focus:not(:focus-visible) >path,
.c9:focus:not(:focus-visible) >polygon,
.c9:focus:not(:focus-visible) >polyline,
.c9:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c9:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c12 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 4px;
  padding: 4px 4px;
  font-size: 18px;
  line-height: 0;
  color: #000000;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c12 >svg {
  display: flex;
  align-self: center;
  vertical-align: middle;
}

.c12:hover {
  background-color: rgba(51, 51, 51, 0.06274509803921569);
}

.c12:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c12:focus >circle,
.c12:focus >ellipse,
.c12:focus >line,
.c12:focus >path,
.c12:focus >polygon,
.c12:focus >polyline,
.c12:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c12:focus ::-moz-focus-inner {
  border: 0;
}

.c12:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c12:focus:not(:focus-visible) >circle,
.c12:focus:not(:focus-visible) >ellipse,
.c12:focus:not(:focus-visible) >line,
.c12:focus:not(:focus-visible) >path,
.c12:focus:not(:focus-visible) >polygon,
.c12:focus:not(:focus-visible) >polyline,
.c12:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c12:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c15 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 3px;
  padding: 4px 4px;
  font-size: 14px;
  line-height: 0;
  text-align: center;
  opacity: 0.3;
  cursor: default;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c15 >svg {
  display: flex;
  align-self: center;
  vertical-align: middle;
}

.c15:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c15:focus >circle,
.c15:focus >ellipse,
.c15:focus >line,
.c15:focus >path,
.c15:focus >polygon,
.c15:focus >polyline,
.c15:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c15:focus ::-moz-focus-inner {
  border: 0;
}

.c15:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c15:focus:not(:focus-visible) >circle,
.c15:focus:not(:focus-visible) >ellipse,
.c15:focus:not(:focus-visible) >line,
.c15:focus:not(:focus-visible) >path,
.c15:focus:not(:focus-visible) >polygon,
.c15:focus:not(:focus-visible) >polyline,
.c15:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c15:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c17 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  background-color: rgba(221, 221, 221, 0.4);
  color: #000000;
  border: none;
  border-radius: 3px;
  padding: 4px 4px;
  font-size: 14px;
  line-height: 20px;
  background-color: rgba(51, 51, 51, 0.06274509803921569);
  color: #444444;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c17:hover {
  background-color: rgba(51, 51, 51, 0.06274509803921569);
}

.c17:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c17:focus >circle,
.c17:focus >ellipse,
.c17:focus >line,
.c17:focus >path,
.c17:focus >polygon,
.c17:focus >polyline,
.c17:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c17:focus ::-moz-focus-inner {
  border: 0;
}

.c17:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c17:focus:not(:focus-visible) >circle,
.c17:focus:not(:focus-visible) >ellipse,
.c17:focus:not(:focus-visible) >line,
.c17:focus:not(:focus-visible) >path,
.c17:focus:not(:focus-visible) >polygon,
.c17:focus:not(:focus-visible) >polyline,
.c17:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c17:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c18 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 3px;
  padding: 4px 4px;
  font-size: 14px;
  line-height: 20px;
  color: #000000;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c18:hover {
  background-color: rgba(51, 51, 51, 0.06274509803921569);
}

.c18:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c18:focus >circle,
.c18:focus >ellipse,
.c18:focus >line,
.c18:focus >path,
.c18:focus >polygon,
.c18:focus >polyline,
.c18:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c18:focus ::-moz-focus-inner {
  border: 0;
}

.c18:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c18:focus:not(:focus-visible) >circle,
.c18:focus:not(:focus-visible) >ellipse,
.c18:focus:not(:focus-visible) >line,
.c18:focus:not(:focus-visible) >path,
.c18:focus:not(:focus-visible) >polygon,
.c18:focus:not(:focus-visible) >polyline,
.c18:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c18:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c21 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 3px;
  padding: 4px 4px;
  font-size: 14px;
  line-height: 0;
  color: #000000;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c21 >svg {
  display: flex;
  align-self: center;
  vertical-align: middle;
}

.c21:hover {
  background-color: rgba(51, 51, 51, 0.06274509803921569);
}

.c21:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c21:focus >circle,
.c21:focus >ellipse,
.c21:focus >line,
.c21:focus >path,
.c21:focus >polygon,
.c21:focus >polyline,
.c21:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c21:focus ::-moz-focus-inner {
  border: 0;
}

.c21:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c21:focus:not(:focus-visible) >circle,
.c21:focus:not(:focus-visible) >ellipse,
.c21:focus:not(:focus-visible) >line,
.c21:focus:not(:focus-visible) >path,
.c21:focus:not(:focus-visible) >polygon,
.c21:focus:not(:focus-visible) >polyline,
.c21:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c21:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c23 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 6px;
  padding: 4px 4px;
  font-size: 22px;
  line-height: 0;
  text-align: center;
  opacity: 0.3;
  cursor: default;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c23 >svg {
  display: flex;
  align-self: center;
  vertical-align: middle;
}

.c23:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c23:focus >circle,
.c23:focus >ellipse,
.c23:focus >line,
.c23:focus >path,
.c23:focus >polygon,
.c23:focus >polyline,
.c23:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c23:focus ::-moz-focus-inner {
  border: 0;
}

.c23:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c23:focus:not(:focus-visible) >circle,
.c23:focus:not(:focus-visible) >ellipse,
.c23:focus:not(:focus-visible) >line,
.c23:focus:not(:focus-visible) >path,
.c23:focus:not(:focus-visible) >polygon,
.c23:focus:not(:focus-visible) >polyline,
.c23:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c23:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c25 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  background-color: rgba(221, 221, 221, 0.4);
  color: #000000;
  border: none;
  border-radius: 6px;
  padding: 4px 4px;
  font-size: 22px;
  line-height: 28px;
  background-color: rgba(51, 51, 51, 0.06274509803921569);
  color: #444444;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c25:hover {
  background-color: rgba(51, 51, 51, 0.06274509803921569);
}

.c25:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c25:focus >circle,
.c25:focus >ellipse,
.c25:focus >line,
.c25:focus >path,
.c25:focus >polygon,
.c25:focus >polyline,
.c25:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c25:focus ::-moz-focus-inner {
  border: 0;
}

.c25:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c25:focus:not(:focus-visible) >circle,
.c25:focus:not(:focus-visible) >ellipse,
.c25:focus:not(:focus-visible) >line,
.c25:focus:not(:focus-visible) >path,
.c25:focus:not(:focus-visible) >polygon,
.c25:focus:not(:focus-visible) >polyline,
.c25:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c25:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c26 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 6px;
  padding: 4px 4px;
  font-size: 22px;
  line-height: 28px;
  color: #000000;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c26:hover {
  background-color: rgba(51, 51, 51, 0.06274509803921569);
}

.c26:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c26:focus >circle,
.c26:focus >ellipse,
.c26:focus >line,
.c26:focus >path,
.c26:focus >polygon,
.c26:focus >polyline,
.c26:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c26:focus ::-moz-focus-inner {
  border: 0;
}

.c26:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c26:focus:not(:focus-visible) >circle,
.c26:focus:not(:focus-visible) >ellipse,
.c26:focus:not(:focus-visible) >line,
.c26:focus:not(:focus-visible) >path,
.c26:focus:not(:focus-visible) >polygon,
.c26:focus:not(:focus-visible) >polyline,
.c26:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c26:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c29 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 6px;
  padding: 4px 4px;
  font-size: 22px;
  line-height: 0;
  color: #000000;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c29 >svg {
  display: flex;
  align-self: center;
  vertical-align: middle;
}

.c29:hover {
  background-color: rgba(51, 51, 51, 0.06274509803921569);
}

.c29:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c29:focus >circle,
.c29:focus >ellipse,
.c29:focus >line,
.c29:focus >path,
.c29:focus >polygon,
.c29:focus >polyline,
.c29:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c29:focus ::-moz-focus-inner {
  border: 0;
}

.c29:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c29:focus:not(:focus-visible) >circle,
.c29:focus:not(:focus-visible) >ellipse,
.c29:focus:not(:focus-visible) >line,
.c29:focus:not(:focus-visible) >path,
.c29:focus:not(:focus-visible) >polygon,
.c29:focus:not(:focus-visible) >polyline,
.c29:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c29:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c5 {
  font-size: 18px;
  line-height: 0;
}

.c5 >svg {
  margin: 0 auto;
}

.c16 {
  font-size: 14px;
  line-height: 0;
}

.c16 >svg {
  margin: 0 auto;
}

.c24 {
  font-size: 22px;
  line-height: 0;
}

.c24 >svg {
  margin: 0 auto;
}

.c3 {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  height: 36px;
  min-width: 36px;
}

.c14 {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  height: 30px;
  min-width: 30px;
}

.c22 {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  height: 48px;
  min-width: 48px;
}

.c11 {
  font-weight: bold;
  font-size: 18px;
  line-height: 0;
}

.c20 {
  font-weight: bold;
  font-size: 14px;
  line-height: 0;
}

.c28 {
  font-weight: bold;
  font-size: 22px;
  line-height: 0;
}

@media only screen and (max-width: 768px) {
  .c2 {
    margin: 0px;
  }
}

@media only screen and (max-width: 768px) {
  .c2 {
    padding: 0px;
  }
}

@media only screen and (max-width: 768px) {
  .c7 {
    width: 2px;
  }
}

<div
  class="c0"
>
  <div
    class="c1 Pagination__StyledPaginationContainer-sc-rnlw6m-0"
  >
    <nav
      aria-label="Pagination Navigation"
      class="c1"
    >
      <ul
        class="c2"
      >
        <li
          class="c3"
        >
          <button
            aria-disabled="true"
            aria-label="Go to previous page"
            class="c4 c5"
            disabled=""
            type="button"
          >
            <svg
              aria-label="Previous"
              class="c6"
              viewBox="0 0 24 24"
            >
              <path
                d="M17 2 7 12l10 10"
                fill="none"
                stroke="#000"
                stroke-width="2"
              />
            </svg>
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-current="page"
            aria-label="Go to page 1"
            class="c8 c5"
            type="button"
          >
            1
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 2"
            class="c9 c5"
            type="button"
          >
            2
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 3"
            class="c9 c5"
            type="button"
          >
            3
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 4"
            class="c9 c5"
            type="button"
          >
            4
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 5"
            class="c9 c5"
            type="button"
          >
            5
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <span
            class="c10 c11"
          >
            …
          </span>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 24"
            class="c9 c5"
            type="button"
          >
            24
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to next page"
            class="c12 c5"
            type="button"
          >
            <svg
              aria-label="Next"
              class="c13"
              viewBox="0 0 24 24"
            >
              <path
                d="m7 2 10 10L7 22"
                fill="none"
                stroke="#000"
                stroke-width="2"
              />
            </svg>
          </button>
        </li>
      </ul>
    </nav>
  </div>
  <div
    class="c1 Pagination__StyledPaginationContainer-sc-rnlw6m-0"
  >
    <nav
      aria-label="Pagination Navigation"
      class="c1"
    >
      <ul
        class="c2"
      >
        <li
          class="c14"
        >
          <button
            aria-disabled="true"
            aria-label="Go to previous page"
            class="c15 c16"
            disabled=""
            type="button"
          >
            <svg
              aria-label="Previous"
              class="c6"
              viewBox="0 0 24 24"
            >
              <path
                d="M17 2 7 12l10 10"
                fill="none"
                stroke="#000"
                stroke-width="2"
              />
            </svg>
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c14"
        >
          <button
            aria-current="page"
            aria-label="Go to page 1"
            class="c17 c16"
            type="button"
          >
            1
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c14"
        >
          <button
            aria-label="Go to page 2"
            class="c18 c16"
            type="button"
          >
            2
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c14"
        >
          <button
            aria-label="Go to page 3"
            class="c18 c16"
            type="button"
          >
            3
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c14"
        >
          <button
            aria-label="Go to page 4"
            class="c18 c16"
            type="button"
          >
            4
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c14"
        >
          <button
            aria-label="Go to page 5"
            class="c18 c16"
            type="button"
          >
            5
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c14"
        >
          <span
            class="c19 c20"
          >
            …
          </span>
        </li>
        <div
          class="c7"
        />
        <li
          class="c14"
        >
          <button
            aria-label="Go to page 24"
            class="c18 c16"
            type="button"
          >
            24
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c14"
        >
          <button
            aria-label="Go to next page"
            class="c21 c16"
            type="button"
          >
            <svg
              aria-label="Next"
              class="c13"
              viewBox="0 0 24 24"
            >
              <path
                d="m7 2 10 10L7 22"
                fill="none"
                stroke="#000"
                stroke-width="2"
              />
            </svg>
          </button>
        </li>
      </ul>
    </nav>
  </div>
  <div
    class="c1 Pagination__StyledPaginationContainer-sc-rnlw6m-0"
  >
    <nav
      aria-label="Pagination Navigation"
      class="c1"
    >
      <ul
        class="c2"
      >
        <li
          class="c22"
        >
          <button
            aria-disabled="true"
            aria-label="Go to previous page"
            class="c23 c24"
            disabled=""
            type="button"
          >
            <svg
              aria-label="Previous"
              class="c6"
              viewBox="0 0 24 24"
            >
              <path
                d="M17 2 7 12l10 10"
                fill="none"
                stroke="#000"
                stroke-width="2"
              />
            </svg>
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c22"
        >
          <button
            aria-current="page"
            aria-label="Go to page 1"
            class="c25 c24"
            type="button"
          >
            1
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c22"
        >
          <button
            aria-label="Go to page 2"
            class="c26 c24"
            type="button"
          >
            2
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c22"
        >
          <button
            aria-label="Go to page 3"
            class="c26 c24"
            type="button"
          >
            3
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c22"
        >
          <button
            aria-label="Go to page 4"
            class="c26 c24"
            type="button"
          >
            4
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c22"
        >
          <button
            aria-label="Go to page 5"
            class="c26 c24"
            type="button"
          >
            5
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c22"
        >
          <span
            class="c27 c28"
          >
            …
          </span>
        </li>
        <div
          class="c7"
        />
        <li
          class="c22"
        >
          <button
            aria-label="Go to page 24"
            class="c26 c24"
            type="button"
          >
            24
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c22"
        >
          <button
            aria-label="Go to next page"
            class="c29 c24"
            type="button"
          >
            <svg
              aria-label="Next"
              class="c13"
              viewBox="0 0 24 24"
            >
              <path
                d="m7 2 10 10L7 22"
                fill="none"
                stroke="#000"
                stroke-width="2"
              />
            </svg>
          </button>
        </li>
      </ul>
    </nav>
  </div>
</div>
`;

exports[`Pagination should change the page on prop change 1`] = `
.c6 {
  display: inline-block;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  fill: #000000;
  stroke: #000000;
}

.c6 g {
  fill: inherit;
  stroke: inherit;
}

.c6 *:not([stroke])[fill='none'] {
  stroke-width: 0;
}

.c6 *[stroke*='#'],
.c6 *[STROKE*='#'] {
  stroke: inherit;
  fill: none;
}

.c6 *[fill-rule],
.c6 *[FILL-RULE],
.c6 *[fill*='#'],
.c6 *[FILL*='#'] {
  fill: inherit;
  stroke: none;
}

.c0 {
  font-size: 18px;
  line-height: 24px;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

.c1 {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  flex: 0 0 auto;
}

.c2 {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
  margin: 0px;
  align-items: center;
  min-width: 0;
  min-height: 0;
  flex-direction: row;
  padding: 0px;
}

.c7 {
  flex: 0 0 auto;
  align-self: stretch;
  width: 3px;
}

.c10 {
  font-size: 18px;
  line-height: 24px;
}

.c9 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  background-color: rgba(221, 221, 221, 0.4);
  color: #000000;
  border: none;
  border-radius: 4px;
  padding: 4px 4px;
  font-size: 18px;
  line-height: 24px;
  background-color: rgba(51, 51, 51, 0.06274509803921569);
  color: #444444;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c9:hover {
  background-color: rgba(51, 51, 51, 0.06274509803921569);
}

.c9:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c9:focus >circle,
.c9:focus >ellipse,
.c9:focus >line,
.c9:focus >path,
.c9:focus >polygon,
.c9:focus >polyline,
.c9:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c9:focus ::-moz-focus-inner {
  border: 0;
}

.c9:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c9:focus:not(:focus-visible) >circle,
.c9:focus:not(:focus-visible) >ellipse,
.c9:focus:not(:focus-visible) >line,
.c9:focus:not(:focus-visible) >path,
.c9:focus:not(:focus-visible) >polygon,
.c9:focus:not(:focus-visible) >polyline,
.c9:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c9:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c8 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 4px;
  padding: 4px 4px;
  font-size: 18px;
  line-height: 24px;
  color: #000000;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c8:hover {
  background-color: rgba(51, 51, 51, 0.06274509803921569);
}

.c8:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c8:focus >circle,
.c8:focus >ellipse,
.c8:focus >line,
.c8:focus >path,
.c8:focus >polygon,
.c8:focus >polyline,
.c8:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c8:focus ::-moz-focus-inner {
  border: 0;
}

.c8:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c8:focus:not(:focus-visible) >circle,
.c8:focus:not(:focus-visible) >ellipse,
.c8:focus:not(:focus-visible) >line,
.c8:focus:not(:focus-visible) >path,
.c8:focus:not(:focus-visible) >polygon,
.c8:focus:not(:focus-visible) >polyline,
.c8:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c8:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c4 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 4px;
  padding: 4px 4px;
  font-size: 18px;
  line-height: 0;
  color: #000000;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c4 >svg {
  display: flex;
  align-self: center;
  vertical-align: middle;
}

.c4:hover {
  background-color: rgba(51, 51, 51, 0.06274509803921569);
}

.c4:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c4:focus >circle,
.c4:focus >ellipse,
.c4:focus >line,
.c4:focus >path,
.c4:focus >polygon,
.c4:focus >polyline,
.c4:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c4:focus ::-moz-focus-inner {
  border: 0;
}

.c4:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c4:focus:not(:focus-visible) >circle,
.c4:focus:not(:focus-visible) >ellipse,
.c4:focus:not(:focus-visible) >line,
.c4:focus:not(:focus-visible) >path,
.c4:focus:not(:focus-visible) >polygon,
.c4:focus:not(:focus-visible) >polyline,
.c4:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c4:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c5 {
  font-size: 18px;
  line-height: 0;
}

.c5 >svg {
  margin: 0 auto;
}

.c3 {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  height: 36px;
  min-width: 36px;
}

.c11 {
  font-weight: bold;
  font-size: 18px;
  line-height: 0;
}

@media only screen and (max-width: 768px) {
  .c2 {
    margin: 0px;
  }
}

@media only screen and (max-width: 768px) {
  .c2 {
    padding: 0px;
  }
}

@media only screen and (max-width: 768px) {
  .c7 {
    width: 2px;
  }
}

<div
  class="c0"
>
  <div
    class="c1 Pagination__StyledPaginationContainer-sc-rnlw6m-0"
  >
    <nav
      aria-label="Pagination Navigation"
      class="c1"
    >
      <ul
        class="c2"
      >
        <li
          class="c3"
        >
          <button
            aria-label="Go to previous page"
            class="c4 c5"
            type="button"
          >
            <svg
              aria-label="Previous"
              class="c6"
              viewBox="0 0 24 24"
            >
              <path
                d="M17 2 7 12l10 10"
                fill="none"
                stroke="#000"
                stroke-width="2"
              />
            </svg>
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 1"
            class="c8 c5"
            type="button"
          >
            1
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-current="page"
            aria-label="Go to page 2"
            class="c9 c5"
            type="button"
          >
            2
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 3"
            class="c8 c5"
            type="button"
          >
            3
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 4"
            class="c8 c5"
            type="button"
          >
            4
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 5"
            class="c8 c5"
            type="button"
          >
            5
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <span
            class="c10 c11"
          >
            …
          </span>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 24"
            class="c8 c5"
            type="button"
          >
            24
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to next page"
            class="c4 c5"
            type="button"
          >
            <svg
              aria-label="Next"
              class="c6"
              viewBox="0 0 24 24"
            >
              <path
                d="m7 2 10 10L7 22"
                fill="none"
                stroke="#000"
                stroke-width="2"
              />
            </svg>
          </button>
        </li>
      </ul>
    </nav>
  </div>
</div>
`;

exports[`Pagination should disable next button if on last page 1`] = `
.c6 {
  display: inline-block;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  fill: #000000;
  stroke: #000000;
}

.c6 g {
  fill: inherit;
  stroke: inherit;
}

.c6 *:not([stroke])[fill='none'] {
  stroke-width: 0;
}

.c6 *[stroke*='#'],
.c6 *[STROKE*='#'] {
  stroke: inherit;
  fill: none;
}

.c6 *[fill-rule],
.c6 *[FILL-RULE],
.c6 *[fill*='#'],
.c6 *[FILL*='#'] {
  fill: inherit;
  stroke: none;
}

.c13 {
  display: inline-block;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  fill: #666666;
  stroke: #666666;
}

.c13 g {
  fill: inherit;
  stroke: inherit;
}

.c13 *:not([stroke])[fill='none'] {
  stroke-width: 0;
}

.c13 *[stroke*='#'],
.c13 *[STROKE*='#'] {
  stroke: inherit;
  fill: none;
}

.c13 *[fill-rule],
.c13 *[FILL-RULE],
.c13 *[fill*='#'],
.c13 *[FILL*='#'] {
  fill: inherit;
  stroke: none;
}

.c0 {
  font-size: 18px;
  line-height: 24px;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

.c1 {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  flex: 0 0 auto;
}

.c2 {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
  margin: 0px;
  align-items: center;
  min-width: 0;
  min-height: 0;
  flex-direction: row;
  padding: 0px;
}

.c7 {
  flex: 0 0 auto;
  align-self: stretch;
  width: 3px;
}

.c9 {
  font-size: 18px;
  line-height: 24px;
}

.c4 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 4px;
  padding: 4px 4px;
  font-size: 18px;
  line-height: 0;
  color: #000000;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c4 >svg {
  display: flex;
  align-self: center;
  vertical-align: middle;
}

.c4:hover {
  background-color: rgba(51, 51, 51, 0.06274509803921569);
}

.c4:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c4:focus >circle,
.c4:focus >ellipse,
.c4:focus >line,
.c4:focus >path,
.c4:focus >polygon,
.c4:focus >polyline,
.c4:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c4:focus ::-moz-focus-inner {
  border: 0;
}

.c4:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c4:focus:not(:focus-visible) >circle,
.c4:focus:not(:focus-visible) >ellipse,
.c4:focus:not(:focus-visible) >line,
.c4:focus:not(:focus-visible) >path,
.c4:focus:not(:focus-visible) >polygon,
.c4:focus:not(:focus-visible) >polyline,
.c4:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c4:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c8 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 4px;
  padding: 4px 4px;
  font-size: 18px;
  line-height: 24px;
  color: #000000;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c8:hover {
  background-color: rgba(51, 51, 51, 0.06274509803921569);
}

.c8:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c8:focus >circle,
.c8:focus >ellipse,
.c8:focus >line,
.c8:focus >path,
.c8:focus >polygon,
.c8:focus >polyline,
.c8:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c8:focus ::-moz-focus-inner {
  border: 0;
}

.c8:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c8:focus:not(:focus-visible) >circle,
.c8:focus:not(:focus-visible) >ellipse,
.c8:focus:not(:focus-visible) >line,
.c8:focus:not(:focus-visible) >path,
.c8:focus:not(:focus-visible) >polygon,
.c8:focus:not(:focus-visible) >polyline,
.c8:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c8:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c11 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  background-color: rgba(221, 221, 221, 0.4);
  color: #000000;
  border: none;
  border-radius: 4px;
  padding: 4px 4px;
  font-size: 18px;
  line-height: 24px;
  background-color: rgba(51, 51, 51, 0.06274509803921569);
  color: #444444;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c11:hover {
  background-color: rgba(51, 51, 51, 0.06274509803921569);
}

.c11:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c11:focus >circle,
.c11:focus >ellipse,
.c11:focus >line,
.c11:focus >path,
.c11:focus >polygon,
.c11:focus >polyline,
.c11:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c11:focus ::-moz-focus-inner {
  border: 0;
}

.c11:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c11:focus:not(:focus-visible) >circle,
.c11:focus:not(:focus-visible) >ellipse,
.c11:focus:not(:focus-visible) >line,
.c11:focus:not(:focus-visible) >path,
.c11:focus:not(:focus-visible) >polygon,
.c11:focus:not(:focus-visible) >polyline,
.c11:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c11:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c12 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 4px;
  padding: 4px 4px;
  font-size: 18px;
  line-height: 0;
  text-align: center;
  opacity: 0.3;
  cursor: default;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c12 >svg {
  display: flex;
  align-self: center;
  vertical-align: middle;
}

.c12:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c12:focus >circle,
.c12:focus >ellipse,
.c12:focus >line,
.c12:focus >path,
.c12:focus >polygon,
.c12:focus >polyline,
.c12:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c12:focus ::-moz-focus-inner {
  border: 0;
}

.c12:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c12:focus:not(:focus-visible) >circle,
.c12:focus:not(:focus-visible) >ellipse,
.c12:focus:not(:focus-visible) >line,
.c12:focus:not(:focus-visible) >path,
.c12:focus:not(:focus-visible) >polygon,
.c12:focus:not(:focus-visible) >polyline,
.c12:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c12:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c5 {
  font-size: 18px;
  line-height: 0;
}

.c5 >svg {
  margin: 0 auto;
}

.c3 {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  height: 36px;
  min-width: 36px;
}

.c10 {
  font-weight: bold;
  font-size: 18px;
  line-height: 0;
}

@media only screen and (max-width: 768px) {
  .c2 {
    margin: 0px;
  }
}

@media only screen and (max-width: 768px) {
  .c2 {
    padding: 0px;
  }
}

@media only screen and (max-width: 768px) {
  .c7 {
    width: 2px;
  }
}

<div
  class="c0"
>
  <div
    class="c1 Pagination__StyledPaginationContainer-sc-rnlw6m-0"
  >
    <nav
      aria-label="Pagination Navigation"
      class="c1"
    >
      <ul
        class="c2"
      >
        <li
          class="c3"
        >
          <button
            aria-label="Go to previous page"
            class="c4 c5"
            type="button"
          >
            <svg
              aria-label="Previous"
              class="c6"
              viewBox="0 0 24 24"
            >
              <path
                d="M17 2 7 12l10 10"
                fill="none"
                stroke="#000"
                stroke-width="2"
              />
            </svg>
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 1"
            class="c8 c5"
            type="button"
          >
            1
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <span
            class="c9 c10"
          >
            …
          </span>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 20"
            class="c8 c5"
            type="button"
          >
            20
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 21"
            class="c8 c5"
            type="button"
          >
            21
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 22"
            class="c8 c5"
            type="button"
          >
            22
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 23"
            class="c8 c5"
            type="button"
          >
            23
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-current="page"
            aria-label="Go to page 24"
            class="c11 c5"
            type="button"
          >
            24
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-disabled="true"
            aria-label="Go to next page"
            class="c12 c5"
            disabled=""
            type="button"
          >
            <svg
              aria-label="Next"
              class="c13"
              viewBox="0 0 24 24"
            >
              <path
                d="m7 2 10 10L7 22"
                fill="none"
                stroke="#000"
                stroke-width="2"
              />
            </svg>
          </button>
        </li>
      </ul>
    </nav>
  </div>
</div>
`;

exports[`Pagination should disable previous and next controls when numberItems
  < step 1`] = `
.c6 {
  display: inline-block;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  fill: #666666;
  stroke: #666666;
}

.c6 g {
  fill: inherit;
  stroke: inherit;
}

.c6 *:not([stroke])[fill='none'] {
  stroke-width: 0;
}

.c6 *[stroke*='#'],
.c6 *[STROKE*='#'] {
  stroke: inherit;
  fill: none;
}

.c6 *[fill-rule],
.c6 *[FILL-RULE],
.c6 *[fill*='#'],
.c6 *[FILL*='#'] {
  fill: inherit;
  stroke: none;
}

.c0 {
  font-size: 18px;
  line-height: 24px;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

.c1 {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  flex: 0 0 auto;
}

.c2 {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
  margin: 0px;
  align-items: center;
  min-width: 0;
  min-height: 0;
  flex-direction: row;
  padding: 0px;
}

.c7 {
  flex: 0 0 auto;
  align-self: stretch;
  width: 3px;
}

.c4 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 4px;
  padding: 4px 4px;
  font-size: 18px;
  line-height: 0;
  text-align: center;
  opacity: 0.3;
  cursor: default;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c4 >svg {
  display: flex;
  align-self: center;
  vertical-align: middle;
}

.c4:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c4:focus >circle,
.c4:focus >ellipse,
.c4:focus >line,
.c4:focus >path,
.c4:focus >polygon,
.c4:focus >polyline,
.c4:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c4:focus ::-moz-focus-inner {
  border: 0;
}

.c4:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c4:focus:not(:focus-visible) >circle,
.c4:focus:not(:focus-visible) >ellipse,
.c4:focus:not(:focus-visible) >line,
.c4:focus:not(:focus-visible) >path,
.c4:focus:not(:focus-visible) >polygon,
.c4:focus:not(:focus-visible) >polyline,
.c4:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c4:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c8 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  background-color: rgba(221, 221, 221, 0.4);
  color: #000000;
  border: none;
  border-radius: 4px;
  padding: 4px 4px;
  font-size: 18px;
  line-height: 24px;
  background-color: rgba(51, 51, 51, 0.06274509803921569);
  color: #444444;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c8:hover {
  background-color: rgba(51, 51, 51, 0.06274509803921569);
}

.c8:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c8:focus >circle,
.c8:focus >ellipse,
.c8:focus >line,
.c8:focus >path,
.c8:focus >polygon,
.c8:focus >polyline,
.c8:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c8:focus ::-moz-focus-inner {
  border: 0;
}

.c8:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c8:focus:not(:focus-visible) >circle,
.c8:focus:not(:focus-visible) >ellipse,
.c8:focus:not(:focus-visible) >line,
.c8:focus:not(:focus-visible) >path,
.c8:focus:not(:focus-visible) >polygon,
.c8:focus:not(:focus-visible) >polyline,
.c8:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c8:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c5 {
  font-size: 18px;
  line-height: 0;
}

.c5 >svg {
  margin: 0 auto;
}

.c3 {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  height: 36px;
  min-width: 36px;
}

@media only screen and (max-width: 768px) {
  .c2 {
    margin: 0px;
  }
}

@media only screen and (max-width: 768px) {
  .c2 {
    padding: 0px;
  }
}

@media only screen and (max-width: 768px) {
  .c7 {
    width: 2px;
  }
}

<div
  class="c0"
>
  <div
    class="c1 Pagination__StyledPaginationContainer-sc-rnlw6m-0"
  >
    <nav
      aria-label="Pagination Navigation"
      class="c1"
    >
      <ul
        class="c2"
      >
        <li
          class="c3"
        >
          <button
            aria-disabled="true"
            aria-label="Go to previous page"
            class="c4 c5"
            disabled=""
            type="button"
          >
            <svg
              aria-label="Previous"
              class="c6"
              viewBox="0 0 24 24"
            >
              <path
                d="M17 2 7 12l10 10"
                fill="none"
                stroke="#000"
                stroke-width="2"
              />
            </svg>
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-current="page"
            aria-label="Go to page 1"
            class="c8 c5"
            type="button"
          >
            1
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-disabled="true"
            aria-label="Go to next page"
            class="c4 c5"
            disabled=""
            type="button"
          >
            <svg
              aria-label="Next"
              class="c6"
              viewBox="0 0 24 24"
            >
              <path
                d="m7 2 10 10L7 22"
                fill="none"
                stroke="#000"
                stroke-width="2"
              />
            </svg>
          </button>
        </li>
      </ul>
    </nav>
  </div>
</div>
`;

exports[`Pagination should disable previous and next controls when numberItems
  === 0 1`] = `
.c6 {
  display: inline-block;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  fill: #666666;
  stroke: #666666;
}

.c6 g {
  fill: inherit;
  stroke: inherit;
}

.c6 *:not([stroke])[fill='none'] {
  stroke-width: 0;
}

.c6 *[stroke*='#'],
.c6 *[STROKE*='#'] {
  stroke: inherit;
  fill: none;
}

.c6 *[fill-rule],
.c6 *[FILL-RULE],
.c6 *[fill*='#'],
.c6 *[FILL*='#'] {
  fill: inherit;
  stroke: none;
}

.c0 {
  font-size: 18px;
  line-height: 24px;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

.c1 {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  flex: 0 0 auto;
}

.c2 {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
  margin: 0px;
  align-items: center;
  min-width: 0;
  min-height: 0;
  flex-direction: row;
  padding: 0px;
}

.c7 {
  flex: 0 0 auto;
  align-self: stretch;
  width: 3px;
}

.c4 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 4px;
  padding: 4px 4px;
  font-size: 18px;
  line-height: 0;
  text-align: center;
  opacity: 0.3;
  cursor: default;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c4 >svg {
  display: flex;
  align-self: center;
  vertical-align: middle;
}

.c4:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c4:focus >circle,
.c4:focus >ellipse,
.c4:focus >line,
.c4:focus >path,
.c4:focus >polygon,
.c4:focus >polyline,
.c4:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c4:focus ::-moz-focus-inner {
  border: 0;
}

.c4:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c4:focus:not(:focus-visible) >circle,
.c4:focus:not(:focus-visible) >ellipse,
.c4:focus:not(:focus-visible) >line,
.c4:focus:not(:focus-visible) >path,
.c4:focus:not(:focus-visible) >polygon,
.c4:focus:not(:focus-visible) >polyline,
.c4:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c4:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c5 {
  font-size: 18px;
  line-height: 0;
}

.c5 >svg {
  margin: 0 auto;
}

.c3 {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  height: 36px;
  min-width: 36px;
}

@media only screen and (max-width: 768px) {
  .c2 {
    margin: 0px;
  }
}

@media only screen and (max-width: 768px) {
  .c2 {
    padding: 0px;
  }
}

@media only screen and (max-width: 768px) {
  .c7 {
    width: 2px;
  }
}

<div
  class="c0"
>
  <div
    class="c1 Pagination__StyledPaginationContainer-sc-rnlw6m-0"
  >
    <nav
      aria-label="Pagination Navigation"
      class="c1"
    >
      <ul
        class="c2"
      >
        <li
          class="c3"
        >
          <button
            aria-disabled="true"
            aria-label="Go to previous page"
            class="c4 c5"
            disabled=""
            type="button"
          >
            <svg
              aria-label="Previous"
              class="c6"
              viewBox="0 0 24 24"
            >
              <path
                d="M17 2 7 12l10 10"
                fill="none"
                stroke="#000"
                stroke-width="2"
              />
            </svg>
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to next page"
            class="c4 c5"
            disabled=""
            type="button"
          >
            <svg
              aria-label="Next"
              class="c6"
              viewBox="0 0 24 24"
            >
              <path
                d="m7 2 10 10L7 22"
                fill="none"
                stroke="#000"
                stroke-width="2"
              />
            </svg>
          </button>
        </li>
      </ul>
    </nav>
  </div>
</div>
`;

exports[`Pagination should disable previous and next controls when numberItems
  === step 1`] = `
.c6 {
  display: inline-block;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  fill: #666666;
  stroke: #666666;
}

.c6 g {
  fill: inherit;
  stroke: inherit;
}

.c6 *:not([stroke])[fill='none'] {
  stroke-width: 0;
}

.c6 *[stroke*='#'],
.c6 *[STROKE*='#'] {
  stroke: inherit;
  fill: none;
}

.c6 *[fill-rule],
.c6 *[FILL-RULE],
.c6 *[fill*='#'],
.c6 *[FILL*='#'] {
  fill: inherit;
  stroke: none;
}

.c0 {
  font-size: 18px;
  line-height: 24px;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

.c1 {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  flex: 0 0 auto;
}

.c2 {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
  margin: 0px;
  align-items: center;
  min-width: 0;
  min-height: 0;
  flex-direction: row;
  padding: 0px;
}

.c7 {
  flex: 0 0 auto;
  align-self: stretch;
  width: 3px;
}

.c4 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 4px;
  padding: 4px 4px;
  font-size: 18px;
  line-height: 0;
  text-align: center;
  opacity: 0.3;
  cursor: default;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c4 >svg {
  display: flex;
  align-self: center;
  vertical-align: middle;
}

.c4:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c4:focus >circle,
.c4:focus >ellipse,
.c4:focus >line,
.c4:focus >path,
.c4:focus >polygon,
.c4:focus >polyline,
.c4:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c4:focus ::-moz-focus-inner {
  border: 0;
}

.c4:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c4:focus:not(:focus-visible) >circle,
.c4:focus:not(:focus-visible) >ellipse,
.c4:focus:not(:focus-visible) >line,
.c4:focus:not(:focus-visible) >path,
.c4:focus:not(:focus-visible) >polygon,
.c4:focus:not(:focus-visible) >polyline,
.c4:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c4:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c8 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  background-color: rgba(221, 221, 221, 0.4);
  color: #000000;
  border: none;
  border-radius: 4px;
  padding: 4px 4px;
  font-size: 18px;
  line-height: 24px;
  background-color: rgba(51, 51, 51, 0.06274509803921569);
  color: #444444;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c8:hover {
  background-color: rgba(51, 51, 51, 0.06274509803921569);
}

.c8:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c8:focus >circle,
.c8:focus >ellipse,
.c8:focus >line,
.c8:focus >path,
.c8:focus >polygon,
.c8:focus >polyline,
.c8:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c8:focus ::-moz-focus-inner {
  border: 0;
}

.c8:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c8:focus:not(:focus-visible) >circle,
.c8:focus:not(:focus-visible) >ellipse,
.c8:focus:not(:focus-visible) >line,
.c8:focus:not(:focus-visible) >path,
.c8:focus:not(:focus-visible) >polygon,
.c8:focus:not(:focus-visible) >polyline,
.c8:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c8:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c5 {
  font-size: 18px;
  line-height: 0;
}

.c5 >svg {
  margin: 0 auto;
}

.c3 {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  height: 36px;
  min-width: 36px;
}

@media only screen and (max-width: 768px) {
  .c2 {
    margin: 0px;
  }
}

@media only screen and (max-width: 768px) {
  .c2 {
    padding: 0px;
  }
}

@media only screen and (max-width: 768px) {
  .c7 {
    width: 2px;
  }
}

<div
  class="c0"
>
  <div
    class="c1 Pagination__StyledPaginationContainer-sc-rnlw6m-0"
  >
    <nav
      aria-label="Pagination Navigation"
      class="c1"
    >
      <ul
        class="c2"
      >
        <li
          class="c3"
        >
          <button
            aria-disabled="true"
            aria-label="Go to previous page"
            class="c4 c5"
            disabled=""
            type="button"
          >
            <svg
              aria-label="Previous"
              class="c6"
              viewBox="0 0 24 24"
            >
              <path
                d="M17 2 7 12l10 10"
                fill="none"
                stroke="#000"
                stroke-width="2"
              />
            </svg>
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-current="page"
            aria-label="Go to page 1"
            class="c8 c5"
            type="button"
          >
            1
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-disabled="true"
            aria-label="Go to next page"
            class="c4 c5"
            disabled=""
            type="button"
          >
            <svg
              aria-label="Next"
              class="c6"
              viewBox="0 0 24 24"
            >
              <path
                d="m7 2 10 10L7 22"
                fill="none"
                stroke="#000"
                stroke-width="2"
              />
            </svg>
          </button>
        </li>
      </ul>
    </nav>
  </div>
</div>
`;

exports[`Pagination should disable previous button if on first page 1`] = `
.c6 {
  display: inline-block;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  fill: #666666;
  stroke: #666666;
}

.c6 g {
  fill: inherit;
  stroke: inherit;
}

.c6 *:not([stroke])[fill='none'] {
  stroke-width: 0;
}

.c6 *[stroke*='#'],
.c6 *[STROKE*='#'] {
  stroke: inherit;
  fill: none;
}

.c6 *[fill-rule],
.c6 *[FILL-RULE],
.c6 *[fill*='#'],
.c6 *[FILL*='#'] {
  fill: inherit;
  stroke: none;
}

.c13 {
  display: inline-block;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  fill: #000000;
  stroke: #000000;
}

.c13 g {
  fill: inherit;
  stroke: inherit;
}

.c13 *:not([stroke])[fill='none'] {
  stroke-width: 0;
}

.c13 *[stroke*='#'],
.c13 *[STROKE*='#'] {
  stroke: inherit;
  fill: none;
}

.c13 *[fill-rule],
.c13 *[FILL-RULE],
.c13 *[fill*='#'],
.c13 *[FILL*='#'] {
  fill: inherit;
  stroke: none;
}

.c0 {
  font-size: 18px;
  line-height: 24px;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

.c1 {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  flex: 0 0 auto;
}

.c2 {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
  margin: 0px;
  align-items: center;
  min-width: 0;
  min-height: 0;
  flex-direction: row;
  padding: 0px;
}

.c7 {
  flex: 0 0 auto;
  align-self: stretch;
  width: 3px;
}

.c10 {
  font-size: 18px;
  line-height: 24px;
}

.c4 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 4px;
  padding: 4px 4px;
  font-size: 18px;
  line-height: 0;
  text-align: center;
  opacity: 0.3;
  cursor: default;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c4 >svg {
  display: flex;
  align-self: center;
  vertical-align: middle;
}

.c4:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c4:focus >circle,
.c4:focus >ellipse,
.c4:focus >line,
.c4:focus >path,
.c4:focus >polygon,
.c4:focus >polyline,
.c4:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c4:focus ::-moz-focus-inner {
  border: 0;
}

.c4:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c4:focus:not(:focus-visible) >circle,
.c4:focus:not(:focus-visible) >ellipse,
.c4:focus:not(:focus-visible) >line,
.c4:focus:not(:focus-visible) >path,
.c4:focus:not(:focus-visible) >polygon,
.c4:focus:not(:focus-visible) >polyline,
.c4:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c4:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c8 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  background-color: rgba(221, 221, 221, 0.4);
  color: #000000;
  border: none;
  border-radius: 4px;
  padding: 4px 4px;
  font-size: 18px;
  line-height: 24px;
  background-color: rgba(51, 51, 51, 0.06274509803921569);
  color: #444444;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c8:hover {
  background-color: rgba(51, 51, 51, 0.06274509803921569);
}

.c8:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c8:focus >circle,
.c8:focus >ellipse,
.c8:focus >line,
.c8:focus >path,
.c8:focus >polygon,
.c8:focus >polyline,
.c8:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c8:focus ::-moz-focus-inner {
  border: 0;
}

.c8:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c8:focus:not(:focus-visible) >circle,
.c8:focus:not(:focus-visible) >ellipse,
.c8:focus:not(:focus-visible) >line,
.c8:focus:not(:focus-visible) >path,
.c8:focus:not(:focus-visible) >polygon,
.c8:focus:not(:focus-visible) >polyline,
.c8:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c8:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c9 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 4px;
  padding: 4px 4px;
  font-size: 18px;
  line-height: 24px;
  color: #000000;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c9:hover {
  background-color: rgba(51, 51, 51, 0.06274509803921569);
}

.c9:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c9:focus >circle,
.c9:focus >ellipse,
.c9:focus >line,
.c9:focus >path,
.c9:focus >polygon,
.c9:focus >polyline,
.c9:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c9:focus ::-moz-focus-inner {
  border: 0;
}

.c9:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c9:focus:not(:focus-visible) >circle,
.c9:focus:not(:focus-visible) >ellipse,
.c9:focus:not(:focus-visible) >line,
.c9:focus:not(:focus-visible) >path,
.c9:focus:not(:focus-visible) >polygon,
.c9:focus:not(:focus-visible) >polyline,
.c9:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c9:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c12 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 4px;
  padding: 4px 4px;
  font-size: 18px;
  line-height: 0;
  color: #000000;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c12 >svg {
  display: flex;
  align-self: center;
  vertical-align: middle;
}

.c12:hover {
  background-color: rgba(51, 51, 51, 0.06274509803921569);
}

.c12:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c12:focus >circle,
.c12:focus >ellipse,
.c12:focus >line,
.c12:focus >path,
.c12:focus >polygon,
.c12:focus >polyline,
.c12:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c12:focus ::-moz-focus-inner {
  border: 0;
}

.c12:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c12:focus:not(:focus-visible) >circle,
.c12:focus:not(:focus-visible) >ellipse,
.c12:focus:not(:focus-visible) >line,
.c12:focus:not(:focus-visible) >path,
.c12:focus:not(:focus-visible) >polygon,
.c12:focus:not(:focus-visible) >polyline,
.c12:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c12:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c5 {
  font-size: 18px;
  line-height: 0;
}

.c5 >svg {
  margin: 0 auto;
}

.c3 {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  height: 36px;
  min-width: 36px;
}

.c11 {
  font-weight: bold;
  font-size: 18px;
  line-height: 0;
}

@media only screen and (max-width: 768px) {
  .c2 {
    margin: 0px;
  }
}

@media only screen and (max-width: 768px) {
  .c2 {
    padding: 0px;
  }
}

@media only screen and (max-width: 768px) {
  .c7 {
    width: 2px;
  }
}

<div
  class="c0"
>
  <div
    class="c1 Pagination__StyledPaginationContainer-sc-rnlw6m-0"
  >
    <nav
      aria-label="Pagination Navigation"
      class="c1"
    >
      <ul
        class="c2"
      >
        <li
          class="c3"
        >
          <button
            aria-disabled="true"
            aria-label="Go to previous page"
            class="c4 c5"
            disabled=""
            type="button"
          >
            <svg
              aria-label="Previous"
              class="c6"
              viewBox="0 0 24 24"
            >
              <path
                d="M17 2 7 12l10 10"
                fill="none"
                stroke="#000"
                stroke-width="2"
              />
            </svg>
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-current="page"
            aria-label="Go to page 1"
            class="c8 c5"
            type="button"
          >
            1
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 2"
            class="c9 c5"
            type="button"
          >
            2
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 3"
            class="c9 c5"
            type="button"
          >
            3
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 4"
            class="c9 c5"
            type="button"
          >
            4
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 5"
            class="c9 c5"
            type="button"
          >
            5
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <span
            class="c10 c11"
          >
            …
          </span>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 24"
            class="c9 c5"
            type="button"
          >
            24
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to next page"
            class="c12 c5"
            type="button"
          >
            <svg
              aria-label="Next"
              class="c13"
              viewBox="0 0 24 24"
            >
              <path
                d="m7 2 10 10L7 22"
                fill="none"
                stroke="#000"
                stroke-width="2"
              />
            </svg>
          </button>
        </li>
      </ul>
    </nav>
  </div>
</div>
`;

exports[`Pagination should display next page of results when "next" is
  selected 1`] = `
.c6 {
  display: inline-block;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  fill: #000000;
  stroke: #000000;
}

.c6 g {
  fill: inherit;
  stroke: inherit;
}

.c6 *:not([stroke])[fill='none'] {
  stroke-width: 0;
}

.c6 *[stroke*='#'],
.c6 *[STROKE*='#'] {
  stroke: inherit;
  fill: none;
}

.c6 *[fill-rule],
.c6 *[FILL-RULE],
.c6 *[fill*='#'],
.c6 *[FILL*='#'] {
  fill: inherit;
  stroke: none;
}

.c0 {
  font-size: 18px;
  line-height: 24px;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

.c1 {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  flex: 0 0 auto;
}

.c2 {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
  margin: 0px;
  align-items: center;
  min-width: 0;
  min-height: 0;
  flex-direction: row;
  padding: 0px;
}

.c7 {
  flex: 0 0 auto;
  align-self: stretch;
  width: 3px;
}

.c10 {
  font-size: 18px;
  line-height: 24px;
}

.c9 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  background-color: rgba(221, 221, 221, 0.4);
  color: #000000;
  border: none;
  border-radius: 4px;
  padding: 4px 4px;
  font-size: 18px;
  line-height: 24px;
  background-color: rgba(51, 51, 51, 0.06274509803921569);
  color: #444444;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c9:hover {
  background-color: rgba(51, 51, 51, 0.06274509803921569);
}

.c9:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c9:focus >circle,
.c9:focus >ellipse,
.c9:focus >line,
.c9:focus >path,
.c9:focus >polygon,
.c9:focus >polyline,
.c9:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c9:focus ::-moz-focus-inner {
  border: 0;
}

.c9:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c9:focus:not(:focus-visible) >circle,
.c9:focus:not(:focus-visible) >ellipse,
.c9:focus:not(:focus-visible) >line,
.c9:focus:not(:focus-visible) >path,
.c9:focus:not(:focus-visible) >polygon,
.c9:focus:not(:focus-visible) >polyline,
.c9:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c9:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c8 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 4px;
  padding: 4px 4px;
  font-size: 18px;
  line-height: 24px;
  color: #000000;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c8:hover {
  background-color: rgba(51, 51, 51, 0.06274509803921569);
}

.c8:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c8:focus >circle,
.c8:focus >ellipse,
.c8:focus >line,
.c8:focus >path,
.c8:focus >polygon,
.c8:focus >polyline,
.c8:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c8:focus ::-moz-focus-inner {
  border: 0;
}

.c8:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c8:focus:not(:focus-visible) >circle,
.c8:focus:not(:focus-visible) >ellipse,
.c8:focus:not(:focus-visible) >line,
.c8:focus:not(:focus-visible) >path,
.c8:focus:not(:focus-visible) >polygon,
.c8:focus:not(:focus-visible) >polyline,
.c8:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c8:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c4 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 4px;
  padding: 4px 4px;
  font-size: 18px;
  line-height: 0;
  color: #000000;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c4 >svg {
  display: flex;
  align-self: center;
  vertical-align: middle;
}

.c4:hover {
  background-color: rgba(51, 51, 51, 0.06274509803921569);
}

.c4:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c4:focus >circle,
.c4:focus >ellipse,
.c4:focus >line,
.c4:focus >path,
.c4:focus >polygon,
.c4:focus >polyline,
.c4:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c4:focus ::-moz-focus-inner {
  border: 0;
}

.c4:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c4:focus:not(:focus-visible) >circle,
.c4:focus:not(:focus-visible) >ellipse,
.c4:focus:not(:focus-visible) >line,
.c4:focus:not(:focus-visible) >path,
.c4:focus:not(:focus-visible) >polygon,
.c4:focus:not(:focus-visible) >polyline,
.c4:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c4:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c5 {
  font-size: 18px;
  line-height: 0;
}

.c5 >svg {
  margin: 0 auto;
}

.c3 {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  height: 36px;
  min-width: 36px;
}

.c11 {
  font-weight: bold;
  font-size: 18px;
  line-height: 0;
}

@media only screen and (max-width: 768px) {
  .c2 {
    margin: 0px;
  }
}

@media only screen and (max-width: 768px) {
  .c2 {
    padding: 0px;
  }
}

@media only screen and (max-width: 768px) {
  .c7 {
    width: 2px;
  }
}

<div
  class="c0"
>
  <div
    class="c1 Pagination__StyledPaginationContainer-sc-rnlw6m-0"
  >
    <nav
      aria-label="Pagination Navigation"
      class="c1"
    >
      <ul
        class="c2"
      >
        <li
          class="c3"
        >
          <button
            aria-label="Go to previous page"
            class="c4 c5"
            type="button"
          >
            <svg
              aria-label="Previous"
              class="c6"
              viewBox="0 0 24 24"
            >
              <path
                d="M17 2 7 12l10 10"
                fill="none"
                stroke="#000"
                stroke-width="2"
              />
            </svg>
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 1"
            class="c8 c5"
            type="button"
          >
            1
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-current="page"
            aria-label="Go to page 2"
            class="c9 c5"
            type="button"
          >
            2
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 3"
            class="c8 c5"
            type="button"
          >
            3
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 4"
            class="c8 c5"
            type="button"
          >
            4
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 5"
            class="c8 c5"
            type="button"
          >
            5
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <span
            class="c10 c11"
          >
            …
          </span>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 24"
            class="c8 c5"
            type="button"
          >
            24
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to next page"
            class="c4 c5"
            type="button"
          >
            <svg
              aria-label="Next"
              class="c6"
              viewBox="0 0 24 24"
            >
              <path
                d="m7 2 10 10L7 22"
                fill="none"
                stroke="#000"
                stroke-width="2"
              />
            </svg>
          </button>
        </li>
      </ul>
    </nav>
  </div>
</div>
`;

exports[`Pagination should display next page of results when "next" is
  selected 2`] = `
<div
  class="StyledGrommet-sc-19lkkz7-0 gyimNE"
>
  <div
    class="StyledBox-sc-13pk1d4-0 jVblXS Pagination__StyledPaginationContainer-sc-rnlw6m-0"
  >
    <nav
      aria-label="Pagination Navigation"
      class="StyledBox-sc-13pk1d4-0 jVblXS"
    >
      <ul
        class="StyledBox-sc-13pk1d4-0 gNgJln"
      >
        <li
          class="StyledPageControl__StyledContainer-sc-1vlfaez-1 cmoeSi"
        >
          <button
            aria-label="Go to previous page"
            class="StyledButtonKind-sc-1vhfpnt-0 fcLGGg StyledPageControl__StyledPaginationButton-sc-1vlfaez-0 gTQDxy"
            type="button"
          >
            <svg
              aria-label="Previous"
              class="StyledIcon-sc-ofa7kd-0 cIGXsc"
              viewBox="0 0 24 24"
            >
              <path
                d="M17 2 7 12l10 10"
                fill="none"
                stroke="#000"
                stroke-width="2"
              />
            </svg>
          </button>
        </li>
        <div
          class="StyledBox__StyledBoxGap-sc-13pk1d4-1 kEhenB"
        />
        <li
          class="StyledPageControl__StyledContainer-sc-1vlfaez-1 cmoeSi"
        >
          <button
            aria-label="Go to page 1"
            class="StyledButtonKind-sc-1vhfpnt-0 jCueGg StyledPageControl__StyledPaginationButton-sc-1vlfaez-0 gTQDxy"
            type="button"
          >
            1
          </button>
        </li>
        <div
          class="StyledBox__StyledBoxGap-sc-13pk1d4-1 kEhenB"
        />
        <li
          class="StyledPageControl__StyledContainer-sc-1vlfaez-1 cmoeSi"
        >
          <button
            aria-current="page"
            aria-label="Go to page 2"
            class="StyledButtonKind-sc-1vhfpnt-0 eGPZXe StyledPageControl__StyledPaginationButton-sc-1vlfaez-0 gTQDxy"
            type="button"
          >
            2
          </button>
        </li>
        <div
          class="StyledBox__StyledBoxGap-sc-13pk1d4-1 kEhenB"
        />
        <li
          class="StyledPageControl__StyledContainer-sc-1vlfaez-1 cmoeSi"
        >
          <button
            aria-label="Go to page 3"
            class="StyledButtonKind-sc-1vhfpnt-0 jCueGg StyledPageControl__StyledPaginationButton-sc-1vlfaez-0 gTQDxy"
            type="button"
          >
            3
          </button>
        </li>
        <div
          class="StyledBox__StyledBoxGap-sc-13pk1d4-1 kEhenB"
        />
        <li
          class="StyledPageControl__StyledContainer-sc-1vlfaez-1 cmoeSi"
        >
          <button
            aria-label="Go to page 4"
            class="StyledButtonKind-sc-1vhfpnt-0 jCueGg StyledPageControl__StyledPaginationButton-sc-1vlfaez-0 gTQDxy"
            type="button"
          >
            4
          </button>
        </li>
        <div
          class="StyledBox__StyledBoxGap-sc-13pk1d4-1 kEhenB"
        />
        <li
          class="StyledPageControl__StyledContainer-sc-1vlfaez-1 cmoeSi"
        >
          <button
            aria-label="Go to page 5"
            class="StyledButtonKind-sc-1vhfpnt-0 jCueGg StyledPageControl__StyledPaginationButton-sc-1vlfaez-0 gTQDxy"
            type="button"
          >
            5
          </button>
        </li>
        <div
          class="StyledBox__StyledBoxGap-sc-13pk1d4-1 kEhenB"
        />
        <li
          class="StyledPageControl__StyledContainer-sc-1vlfaez-1 cmoeSi"
        >
          <span
            class="StyledText-sc-1sadyjn-0 dahhea StyledPageControl__StyledSeparator-sc-1vlfaez-2 gdMvuz"
          >
            …
          </span>
        </li>
        <div
          class="StyledBox__StyledBoxGap-sc-13pk1d4-1 kEhenB"
        />
        <li
          class="StyledPageControl__StyledContainer-sc-1vlfaez-1 cmoeSi"
        >
          <button
            aria-label="Go to page 24"
            class="StyledButtonKind-sc-1vhfpnt-0 jCueGg StyledPageControl__StyledPaginationButton-sc-1vlfaez-0 gTQDxy"
            type="button"
          >
            24
          </button>
        </li>
        <div
          class="StyledBox__StyledBoxGap-sc-13pk1d4-1 kEhenB"
        />
        <li
          class="StyledPageControl__StyledContainer-sc-1vlfaez-1 cmoeSi"
        >
          <button
            aria-label="Go to next page"
            class="StyledButtonKind-sc-1vhfpnt-0 fcLGGg StyledPageControl__StyledPaginationButton-sc-1vlfaez-0 gTQDxy"
            type="button"
          >
            <svg
              aria-label="Next"
              class="StyledIcon-sc-ofa7kd-0 cIGXsc"
              viewBox="0 0 24 24"
            >
              <path
                d="m7 2 10 10L7 22"
                fill="none"
                stroke="#000"
                stroke-width="2"
              />
            </svg>
          </button>
        </li>
      </ul>
    </nav>
  </div>
</div>
`;

exports[`Pagination should display page 'n' of results when "page n" is
  selected 1`] = `
.c6 {
  display: inline-block;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  fill: #000000;
  stroke: #000000;
}

.c6 g {
  fill: inherit;
  stroke: inherit;
}

.c6 *:not([stroke])[fill='none'] {
  stroke-width: 0;
}

.c6 *[stroke*='#'],
.c6 *[STROKE*='#'] {
  stroke: inherit;
  fill: none;
}

.c6 *[fill-rule],
.c6 *[FILL-RULE],
.c6 *[fill*='#'],
.c6 *[FILL*='#'] {
  fill: inherit;
  stroke: none;
}

.c0 {
  font-size: 18px;
  line-height: 24px;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

.c1 {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  flex: 0 0 auto;
}

.c2 {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
  margin: 0px;
  align-items: center;
  min-width: 0;
  min-height: 0;
  flex-direction: row;
  padding: 0px;
}

.c7 {
  flex: 0 0 auto;
  align-self: stretch;
  width: 3px;
}

.c10 {
  font-size: 18px;
  line-height: 24px;
}

.c9 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  background-color: rgba(221, 221, 221, 0.4);
  color: #000000;
  border: none;
  border-radius: 4px;
  padding: 4px 4px;
  font-size: 18px;
  line-height: 24px;
  background-color: rgba(51, 51, 51, 0.06274509803921569);
  color: #444444;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c9:hover {
  background-color: rgba(51, 51, 51, 0.06274509803921569);
}

.c9:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c9:focus >circle,
.c9:focus >ellipse,
.c9:focus >line,
.c9:focus >path,
.c9:focus >polygon,
.c9:focus >polyline,
.c9:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c9:focus ::-moz-focus-inner {
  border: 0;
}

.c9:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c9:focus:not(:focus-visible) >circle,
.c9:focus:not(:focus-visible) >ellipse,
.c9:focus:not(:focus-visible) >line,
.c9:focus:not(:focus-visible) >path,
.c9:focus:not(:focus-visible) >polygon,
.c9:focus:not(:focus-visible) >polyline,
.c9:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c9:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c8 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 4px;
  padding: 4px 4px;
  font-size: 18px;
  line-height: 24px;
  color: #000000;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c8:hover {
  background-color: rgba(51, 51, 51, 0.06274509803921569);
}

.c8:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c8:focus >circle,
.c8:focus >ellipse,
.c8:focus >line,
.c8:focus >path,
.c8:focus >polygon,
.c8:focus >polyline,
.c8:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c8:focus ::-moz-focus-inner {
  border: 0;
}

.c8:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c8:focus:not(:focus-visible) >circle,
.c8:focus:not(:focus-visible) >ellipse,
.c8:focus:not(:focus-visible) >line,
.c8:focus:not(:focus-visible) >path,
.c8:focus:not(:focus-visible) >polygon,
.c8:focus:not(:focus-visible) >polyline,
.c8:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c8:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c4 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 4px;
  padding: 4px 4px;
  font-size: 18px;
  line-height: 0;
  color: #000000;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c4 >svg {
  display: flex;
  align-self: center;
  vertical-align: middle;
}

.c4:hover {
  background-color: rgba(51, 51, 51, 0.06274509803921569);
}

.c4:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c4:focus >circle,
.c4:focus >ellipse,
.c4:focus >line,
.c4:focus >path,
.c4:focus >polygon,
.c4:focus >polyline,
.c4:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c4:focus ::-moz-focus-inner {
  border: 0;
}

.c4:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c4:focus:not(:focus-visible) >circle,
.c4:focus:not(:focus-visible) >ellipse,
.c4:focus:not(:focus-visible) >line,
.c4:focus:not(:focus-visible) >path,
.c4:focus:not(:focus-visible) >polygon,
.c4:focus:not(:focus-visible) >polyline,
.c4:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c4:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c5 {
  font-size: 18px;
  line-height: 0;
}

.c5 >svg {
  margin: 0 auto;
}

.c3 {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  height: 36px;
  min-width: 36px;
}

.c11 {
  font-weight: bold;
  font-size: 18px;
  line-height: 0;
}

@media only screen and (max-width: 768px) {
  .c2 {
    margin: 0px;
  }
}

@media only screen and (max-width: 768px) {
  .c2 {
    padding: 0px;
  }
}

@media only screen and (max-width: 768px) {
  .c7 {
    width: 2px;
  }
}

<div
  class="c0"
>
  <div
    class="c1 Pagination__StyledPaginationContainer-sc-rnlw6m-0"
  >
    <nav
      aria-label="Pagination Navigation"
      class="c1"
    >
      <ul
        class="c2"
      >
        <li
          class="c3"
        >
          <button
            aria-label="Go to previous page"
            class="c4 c5"
            type="button"
          >
            <svg
              aria-label="Previous"
              class="c6"
              viewBox="0 0 24 24"
            >
              <path
                d="M17 2 7 12l10 10"
                fill="none"
                stroke="#000"
                stroke-width="2"
              />
            </svg>
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 1"
            class="c8 c5"
            type="button"
          >
            1
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-current="page"
            aria-label="Go to page 2"
            class="c9 c5"
            type="button"
          >
            2
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 3"
            class="c8 c5"
            type="button"
          >
            3
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 4"
            class="c8 c5"
            type="button"
          >
            4
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 5"
            class="c8 c5"
            type="button"
          >
            5
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <span
            class="c10 c11"
          >
            …
          </span>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 24"
            class="c8 c5"
            type="button"
          >
            24
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to next page"
            class="c4 c5"
            type="button"
          >
            <svg
              aria-label="Next"
              class="c6"
              viewBox="0 0 24 24"
            >
              <path
                d="m7 2 10 10L7 22"
                fill="none"
                stroke="#000"
                stroke-width="2"
              />
            </svg>
          </button>
        </li>
      </ul>
    </nav>
  </div>
</div>
`;

exports[`Pagination should display previous page of results when "previous" is
  selected 1`] = `
.c6 {
  display: inline-block;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  fill: #000000;
  stroke: #000000;
}

.c6 g {
  fill: inherit;
  stroke: inherit;
}

.c6 *:not([stroke])[fill='none'] {
  stroke-width: 0;
}

.c6 *[stroke*='#'],
.c6 *[STROKE*='#'] {
  stroke: inherit;
  fill: none;
}

.c6 *[fill-rule],
.c6 *[FILL-RULE],
.c6 *[fill*='#'],
.c6 *[FILL*='#'] {
  fill: inherit;
  stroke: none;
}

.c0 {
  font-size: 18px;
  line-height: 24px;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

.c1 {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  flex: 0 0 auto;
}

.c2 {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
  margin: 0px;
  align-items: center;
  min-width: 0;
  min-height: 0;
  flex-direction: row;
  padding: 0px;
}

.c7 {
  flex: 0 0 auto;
  align-self: stretch;
  width: 3px;
}

.c10 {
  font-size: 18px;
  line-height: 24px;
}

.c4 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 4px;
  padding: 4px 4px;
  font-size: 18px;
  line-height: 0;
  color: #000000;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c4 >svg {
  display: flex;
  align-self: center;
  vertical-align: middle;
}

.c4:hover {
  background-color: rgba(51, 51, 51, 0.06274509803921569);
}

.c4:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c4:focus >circle,
.c4:focus >ellipse,
.c4:focus >line,
.c4:focus >path,
.c4:focus >polygon,
.c4:focus >polyline,
.c4:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c4:focus ::-moz-focus-inner {
  border: 0;
}

.c4:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c4:focus:not(:focus-visible) >circle,
.c4:focus:not(:focus-visible) >ellipse,
.c4:focus:not(:focus-visible) >line,
.c4:focus:not(:focus-visible) >path,
.c4:focus:not(:focus-visible) >polygon,
.c4:focus:not(:focus-visible) >polyline,
.c4:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c4:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c8 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 4px;
  padding: 4px 4px;
  font-size: 18px;
  line-height: 24px;
  color: #000000;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c8:hover {
  background-color: rgba(51, 51, 51, 0.06274509803921569);
}

.c8:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c8:focus >circle,
.c8:focus >ellipse,
.c8:focus >line,
.c8:focus >path,
.c8:focus >polygon,
.c8:focus >polyline,
.c8:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c8:focus ::-moz-focus-inner {
  border: 0;
}

.c8:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c8:focus:not(:focus-visible) >circle,
.c8:focus:not(:focus-visible) >ellipse,
.c8:focus:not(:focus-visible) >line,
.c8:focus:not(:focus-visible) >path,
.c8:focus:not(:focus-visible) >polygon,
.c8:focus:not(:focus-visible) >polyline,
.c8:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c8:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c9 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  background-color: rgba(221, 221, 221, 0.4);
  color: #000000;
  border: none;
  border-radius: 4px;
  padding: 4px 4px;
  font-size: 18px;
  line-height: 24px;
  background-color: rgba(51, 51, 51, 0.06274509803921569);
  color: #444444;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c9:hover {
  background-color: rgba(51, 51, 51, 0.06274509803921569);
}

.c9:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c9:focus >circle,
.c9:focus >ellipse,
.c9:focus >line,
.c9:focus >path,
.c9:focus >polygon,
.c9:focus >polyline,
.c9:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c9:focus ::-moz-focus-inner {
  border: 0;
}

.c9:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c9:focus:not(:focus-visible) >circle,
.c9:focus:not(:focus-visible) >ellipse,
.c9:focus:not(:focus-visible) >line,
.c9:focus:not(:focus-visible) >path,
.c9:focus:not(:focus-visible) >polygon,
.c9:focus:not(:focus-visible) >polyline,
.c9:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c9:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c5 {
  font-size: 18px;
  line-height: 0;
}

.c5 >svg {
  margin: 0 auto;
}

.c3 {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  height: 36px;
  min-width: 36px;
}

.c11 {
  font-weight: bold;
  font-size: 18px;
  line-height: 0;
}

@media only screen and (max-width: 768px) {
  .c2 {
    margin: 0px;
  }
}

@media only screen and (max-width: 768px) {
  .c2 {
    padding: 0px;
  }
}

@media only screen and (max-width: 768px) {
  .c7 {
    width: 2px;
  }
}

<div
  class="c0"
>
  <div
    class="c1 Pagination__StyledPaginationContainer-sc-rnlw6m-0"
  >
    <nav
      aria-label="Pagination Navigation"
      class="c1"
    >
      <ul
        class="c2"
      >
        <li
          class="c3"
        >
          <button
            aria-label="Go to previous page"
            class="c4 c5"
            type="button"
          >
            <svg
              aria-label="Previous"
              class="c6"
              viewBox="0 0 24 24"
            >
              <path
                d="M17 2 7 12l10 10"
                fill="none"
                stroke="#000"
                stroke-width="2"
              />
            </svg>
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 1"
            class="c8 c5"
            type="button"
          >
            1
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-current="page"
            aria-label="Go to page 2"
            class="c9 c5"
            type="button"
          >
            2
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 3"
            class="c8 c5"
            type="button"
          >
            3
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 4"
            class="c8 c5"
            type="button"
          >
            4
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 5"
            class="c8 c5"
            type="button"
          >
            5
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <span
            class="c10 c11"
          >
            …
          </span>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 24"
            class="c8 c5"
            type="button"
          >
            24
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to next page"
            class="c4 c5"
            type="button"
          >
            <svg
              aria-label="Next"
              class="c6"
              viewBox="0 0 24 24"
            >
              <path
                d="m7 2 10 10L7 22"
                fill="none"
                stroke="#000"
                stroke-width="2"
              />
            </svg>
          </button>
        </li>
      </ul>
    </nav>
  </div>
</div>
`;

exports[`Pagination should display previous page of results when "previous" is
  selected 2`] = `
<div
  class="StyledGrommet-sc-19lkkz7-0 gyimNE"
>
  <div
    class="StyledBox-sc-13pk1d4-0 jVblXS Pagination__StyledPaginationContainer-sc-rnlw6m-0"
  >
    <nav
      aria-label="Pagination Navigation"
      class="StyledBox-sc-13pk1d4-0 jVblXS"
    >
      <ul
        class="StyledBox-sc-13pk1d4-0 gNgJln"
      >
        <li
          class="StyledPageControl__StyledContainer-sc-1vlfaez-1 cmoeSi"
        >
          <button
            aria-label="Go to previous page"
            class="StyledButtonKind-sc-1vhfpnt-0 fcLGGg StyledPageControl__StyledPaginationButton-sc-1vlfaez-0 gTQDxy"
            type="button"
          >
            <svg
              aria-label="Previous"
              class="StyledIcon-sc-ofa7kd-0 cIGXsc"
              viewBox="0 0 24 24"
            >
              <path
                d="M17 2 7 12l10 10"
                fill="none"
                stroke="#000"
                stroke-width="2"
              />
            </svg>
          </button>
        </li>
        <div
          class="StyledBox__StyledBoxGap-sc-13pk1d4-1 kEhenB"
        />
        <li
          class="StyledPageControl__StyledContainer-sc-1vlfaez-1 cmoeSi"
        >
          <button
            aria-label="Go to page 1"
            class="StyledButtonKind-sc-1vhfpnt-0 jCueGg StyledPageControl__StyledPaginationButton-sc-1vlfaez-0 gTQDxy"
            type="button"
          >
            1
          </button>
        </li>
        <div
          class="StyledBox__StyledBoxGap-sc-13pk1d4-1 kEhenB"
        />
        <li
          class="StyledPageControl__StyledContainer-sc-1vlfaez-1 cmoeSi"
        >
          <button
            aria-current="page"
            aria-label="Go to page 2"
            class="StyledButtonKind-sc-1vhfpnt-0 eGPZXe StyledPageControl__StyledPaginationButton-sc-1vlfaez-0 gTQDxy"
            type="button"
          >
            2
          </button>
        </li>
        <div
          class="StyledBox__StyledBoxGap-sc-13pk1d4-1 kEhenB"
        />
        <li
          class="StyledPageControl__StyledContainer-sc-1vlfaez-1 cmoeSi"
        >
          <button
            aria-label="Go to page 3"
            class="StyledButtonKind-sc-1vhfpnt-0 jCueGg StyledPageControl__StyledPaginationButton-sc-1vlfaez-0 gTQDxy"
            type="button"
          >
            3
          </button>
        </li>
        <div
          class="StyledBox__StyledBoxGap-sc-13pk1d4-1 kEhenB"
        />
        <li
          class="StyledPageControl__StyledContainer-sc-1vlfaez-1 cmoeSi"
        >
          <button
            aria-label="Go to page 4"
            class="StyledButtonKind-sc-1vhfpnt-0 jCueGg StyledPageControl__StyledPaginationButton-sc-1vlfaez-0 gTQDxy"
            type="button"
          >
            4
          </button>
        </li>
        <div
          class="StyledBox__StyledBoxGap-sc-13pk1d4-1 kEhenB"
        />
        <li
          class="StyledPageControl__StyledContainer-sc-1vlfaez-1 cmoeSi"
        >
          <button
            aria-label="Go to page 5"
            class="StyledButtonKind-sc-1vhfpnt-0 jCueGg StyledPageControl__StyledPaginationButton-sc-1vlfaez-0 gTQDxy"
            type="button"
          >
            5
          </button>
        </li>
        <div
          class="StyledBox__StyledBoxGap-sc-13pk1d4-1 kEhenB"
        />
        <li
          class="StyledPageControl__StyledContainer-sc-1vlfaez-1 cmoeSi"
        >
          <span
            class="StyledText-sc-1sadyjn-0 dahhea StyledPageControl__StyledSeparator-sc-1vlfaez-2 gdMvuz"
          >
            …
          </span>
        </li>
        <div
          class="StyledBox__StyledBoxGap-sc-13pk1d4-1 kEhenB"
        />
        <li
          class="StyledPageControl__StyledContainer-sc-1vlfaez-1 cmoeSi"
        >
          <button
            aria-label="Go to page 24"
            class="StyledButtonKind-sc-1vhfpnt-0 jCueGg StyledPageControl__StyledPaginationButton-sc-1vlfaez-0 gTQDxy"
            type="button"
          >
            24
          </button>
        </li>
        <div
          class="StyledBox__StyledBoxGap-sc-13pk1d4-1 kEhenB"
        />
        <li
          class="StyledPageControl__StyledContainer-sc-1vlfaez-1 cmoeSi"
        >
          <button
            aria-label="Go to next page"
            class="StyledButtonKind-sc-1vhfpnt-0 fcLGGg StyledPageControl__StyledPaginationButton-sc-1vlfaez-0 gTQDxy"
            type="button"
          >
            <svg
              aria-label="Next"
              class="StyledIcon-sc-ofa7kd-0 cIGXsc"
              viewBox="0 0 24 24"
            >
              <path
                d="m7 2 10 10L7 22"
                fill="none"
                stroke="#000"
                stroke-width="2"
              />
            </svg>
          </button>
        </li>
      </ul>
    </nav>
  </div>
</div>
`;

exports[`Pagination should display the correct last page based on items length
  and step 1`] = `
.c6 {
  display: inline-block;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  fill: #666666;
  stroke: #666666;
}

.c6 g {
  fill: inherit;
  stroke: inherit;
}

.c6 *:not([stroke])[fill='none'] {
  stroke-width: 0;
}

.c6 *[stroke*='#'],
.c6 *[STROKE*='#'] {
  stroke: inherit;
  fill: none;
}

.c6 *[fill-rule],
.c6 *[FILL-RULE],
.c6 *[fill*='#'],
.c6 *[FILL*='#'] {
  fill: inherit;
  stroke: none;
}

.c13 {
  display: inline-block;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  fill: #000000;
  stroke: #000000;
}

.c13 g {
  fill: inherit;
  stroke: inherit;
}

.c13 *:not([stroke])[fill='none'] {
  stroke-width: 0;
}

.c13 *[stroke*='#'],
.c13 *[STROKE*='#'] {
  stroke: inherit;
  fill: none;
}

.c13 *[fill-rule],
.c13 *[FILL-RULE],
.c13 *[fill*='#'],
.c13 *[FILL*='#'] {
  fill: inherit;
  stroke: none;
}

.c0 {
  font-size: 18px;
  line-height: 24px;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

.c1 {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  flex: 0 0 auto;
}

.c2 {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
  margin: 0px;
  align-items: center;
  min-width: 0;
  min-height: 0;
  flex-direction: row;
  padding: 0px;
}

.c7 {
  flex: 0 0 auto;
  align-self: stretch;
  width: 3px;
}

.c10 {
  font-size: 18px;
  line-height: 24px;
}

.c4 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 4px;
  padding: 4px 4px;
  font-size: 18px;
  line-height: 0;
  text-align: center;
  opacity: 0.3;
  cursor: default;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c4 >svg {
  display: flex;
  align-self: center;
  vertical-align: middle;
}

.c4:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c4:focus >circle,
.c4:focus >ellipse,
.c4:focus >line,
.c4:focus >path,
.c4:focus >polygon,
.c4:focus >polyline,
.c4:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c4:focus ::-moz-focus-inner {
  border: 0;
}

.c4:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c4:focus:not(:focus-visible) >circle,
.c4:focus:not(:focus-visible) >ellipse,
.c4:focus:not(:focus-visible) >line,
.c4:focus:not(:focus-visible) >path,
.c4:focus:not(:focus-visible) >polygon,
.c4:focus:not(:focus-visible) >polyline,
.c4:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c4:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c8 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  background-color: rgba(221, 221, 221, 0.4);
  color: #000000;
  border: none;
  border-radius: 4px;
  padding: 4px 4px;
  font-size: 18px;
  line-height: 24px;
  background-color: rgba(51, 51, 51, 0.06274509803921569);
  color: #444444;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c8:hover {
  background-color: rgba(51, 51, 51, 0.06274509803921569);
}

.c8:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c8:focus >circle,
.c8:focus >ellipse,
.c8:focus >line,
.c8:focus >path,
.c8:focus >polygon,
.c8:focus >polyline,
.c8:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c8:focus ::-moz-focus-inner {
  border: 0;
}

.c8:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c8:focus:not(:focus-visible) >circle,
.c8:focus:not(:focus-visible) >ellipse,
.c8:focus:not(:focus-visible) >line,
.c8:focus:not(:focus-visible) >path,
.c8:focus:not(:focus-visible) >polygon,
.c8:focus:not(:focus-visible) >polyline,
.c8:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c8:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c9 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 4px;
  padding: 4px 4px;
  font-size: 18px;
  line-height: 24px;
  color: #000000;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c9:hover {
  background-color: rgba(51, 51, 51, 0.06274509803921569);
}

.c9:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c9:focus >circle,
.c9:focus >ellipse,
.c9:focus >line,
.c9:focus >path,
.c9:focus >polygon,
.c9:focus >polyline,
.c9:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c9:focus ::-moz-focus-inner {
  border: 0;
}

.c9:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c9:focus:not(:focus-visible) >circle,
.c9:focus:not(:focus-visible) >ellipse,
.c9:focus:not(:focus-visible) >line,
.c9:focus:not(:focus-visible) >path,
.c9:focus:not(:focus-visible) >polygon,
.c9:focus:not(:focus-visible) >polyline,
.c9:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c9:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c12 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 4px;
  padding: 4px 4px;
  font-size: 18px;
  line-height: 0;
  color: #000000;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c12 >svg {
  display: flex;
  align-self: center;
  vertical-align: middle;
}

.c12:hover {
  background-color: rgba(51, 51, 51, 0.06274509803921569);
}

.c12:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c12:focus >circle,
.c12:focus >ellipse,
.c12:focus >line,
.c12:focus >path,
.c12:focus >polygon,
.c12:focus >polyline,
.c12:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c12:focus ::-moz-focus-inner {
  border: 0;
}

.c12:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c12:focus:not(:focus-visible) >circle,
.c12:focus:not(:focus-visible) >ellipse,
.c12:focus:not(:focus-visible) >line,
.c12:focus:not(:focus-visible) >path,
.c12:focus:not(:focus-visible) >polygon,
.c12:focus:not(:focus-visible) >polyline,
.c12:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c12:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c5 {
  font-size: 18px;
  line-height: 0;
}

.c5 >svg {
  margin: 0 auto;
}

.c3 {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  height: 36px;
  min-width: 36px;
}

.c11 {
  font-weight: bold;
  font-size: 18px;
  line-height: 0;
}

@media only screen and (max-width: 768px) {
  .c2 {
    margin: 0px;
  }
}

@media only screen and (max-width: 768px) {
  .c2 {
    padding: 0px;
  }
}

@media only screen and (max-width: 768px) {
  .c7 {
    width: 2px;
  }
}

<div
  class="c0"
>
  <div
    class="c1 Pagination__StyledPaginationContainer-sc-rnlw6m-0"
  >
    <nav
      aria-label="Pagination Navigation"
      class="c1"
    >
      <ul
        class="c2"
      >
        <li
          class="c3"
        >
          <button
            aria-disabled="true"
            aria-label="Go to previous page"
            class="c4 c5"
            disabled=""
            type="button"
          >
            <svg
              aria-label="Previous"
              class="c6"
              viewBox="0 0 24 24"
            >
              <path
                d="M17 2 7 12l10 10"
                fill="none"
                stroke="#000"
                stroke-width="2"
              />
            </svg>
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-current="page"
            aria-label="Go to page 1"
            class="c8 c5"
            type="button"
          >
            1
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 2"
            class="c9 c5"
            type="button"
          >
            2
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 3"
            class="c9 c5"
            type="button"
          >
            3
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 4"
            class="c9 c5"
            type="button"
          >
            4
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 5"
            class="c9 c5"
            type="button"
          >
            5
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <span
            class="c10 c11"
          >
            …
          </span>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 24"
            class="c9 c5"
            type="button"
          >
            24
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to next page"
            class="c12 c5"
            type="button"
          >
            <svg
              aria-label="Next"
              class="c13"
              viewBox="0 0 24 24"
            >
              <path
                d="m7 2 10 10L7 22"
                fill="none"
                stroke="#000"
                stroke-width="2"
              />
            </svg>
          </button>
        </li>
      </ul>
    </nav>
  </div>
</div>
`;

exports[`Pagination should have no items 1`] = `
<DocumentFragment>
  .c11 {
  display: inline-block;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  fill: #666666;
  stroke: #666666;
}

.c11 g {
  fill: inherit;
  stroke: inherit;
}

.c11 *:not([stroke])[fill='none'] {
  stroke-width: 0;
}

.c11 *[stroke*='#'],
.c11 *[STROKE*='#'] {
  stroke: inherit;
  fill: none;
}

.c11 *[fill-rule],
.c11 *[FILL-RULE],
.c11 *[fill*='#'],
.c11 *[FILL*='#'] {
  fill: inherit;
  stroke: none;
}

.c0 {
  font-size: 18px;
  line-height: 24px;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

.c1 {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
  align-items: center;
  min-width: 0;
  min-height: 0;
  flex-direction: row;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 12px 6px;
}

.c2 {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  flex: 1 0 auto;
}

.c3 {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
}

.c5 {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
  align-items: center;
  min-width: 0;
  min-height: 0;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px 6px;
}

.c6 {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  flex: 0 0 auto;
}

.c7 {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
  margin: 0px;
  align-items: center;
  min-width: 0;
  min-height: 0;
  flex-direction: row;
  padding: 0px;
}

.c12 {
  flex: 0 0 auto;
  align-self: stretch;
  width: 3px;
}

.c4 {
  font-size: 18px;
  line-height: 24px;
}

.c9 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 4px;
  padding: 4px 4px;
  font-size: 18px;
  line-height: 0;
  text-align: center;
  opacity: 0.3;
  cursor: default;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c9 >svg {
  display: flex;
  align-self: center;
  vertical-align: middle;
}

.c9:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c9:focus >circle,
.c9:focus >ellipse,
.c9:focus >line,
.c9:focus >path,
.c9:focus >polygon,
.c9:focus >polyline,
.c9:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c9:focus ::-moz-focus-inner {
  border: 0;
}

.c9:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c9:focus:not(:focus-visible) >circle,
.c9:focus:not(:focus-visible) >ellipse,
.c9:focus:not(:focus-visible) >line,
.c9:focus:not(:focus-visible) >path,
.c9:focus:not(:focus-visible) >polygon,
.c9:focus:not(:focus-visible) >polyline,
.c9:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c9:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c10 {
  font-size: 18px;
  line-height: 0;
}

.c10 >svg {
  margin: 0 auto;
}

.c8 {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  height: 36px;
  min-width: 36px;
}

@media only screen and (max-width: 768px) {
  .c7 {
    margin: 0px;
  }
}

@media only screen and (max-width: 768px) {
  .c7 {
    padding: 0px;
  }
}

@media only screen and (max-width: 768px) {
  .c12 {
    width: 2px;
  }
}

<div
    class="c0"
  >
    <div
      class="c1 Pagination__StyledPaginationContainer-sc-rnlw6m-0"
    >
      <div
        class="c2"
      >
        <div
          class="c3"
        >
          <span
            class="c4"
          >
            0 items
          </span>
        </div>
      </div>
      <div
        class="c5"
      >
        <nav
          aria-label="Pagination Navigation"
          class="c6"
        >
          <ul
            class="c7"
          >
            <li
              class="c8"
            >
              <button
                aria-disabled="true"
                aria-label="Go to previous page"
                class="c9 c10"
                disabled=""
                type="button"
              >
                <svg
                  aria-label="Previous"
                  class="c11"
                  viewBox="0 0 24 24"
                >
                  <path
                    d="M17 2 7 12l10 10"
                    fill="none"
                    stroke="#000"
                    stroke-width="2"
                  />
                </svg>
              </button>
            </li>
            <div
              class="c12"
            />
            <li
              class="c8"
            >
              <button
                aria-label="Go to next page"
                class="c9 c10"
                disabled=""
                type="button"
              >
                <svg
                  aria-label="Next"
                  class="c11"
                  viewBox="0 0 24 24"
                >
                  <path
                    d="m7 2 10 10L7 22"
                    fill="none"
                    stroke="#000"
                    stroke-width="2"
                  />
                </svg>
              </button>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  </div>
</DocumentFragment>
`;

exports[`Pagination should render correct numberEdgePages 1`] = `
.c6 {
  display: inline-block;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  fill: #000000;
  stroke: #000000;
}

.c6 g {
  fill: inherit;
  stroke: inherit;
}

.c6 *:not([stroke])[fill='none'] {
  stroke-width: 0;
}

.c6 *[stroke*='#'],
.c6 *[STROKE*='#'] {
  stroke: inherit;
  fill: none;
}

.c6 *[fill-rule],
.c6 *[FILL-RULE],
.c6 *[fill*='#'],
.c6 *[FILL*='#'] {
  fill: inherit;
  stroke: none;
}

.c0 {
  font-size: 18px;
  line-height: 24px;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

.c1 {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  flex: 0 0 auto;
}

.c2 {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
  margin: 0px;
  align-items: center;
  min-width: 0;
  min-height: 0;
  flex-direction: row;
  padding: 0px;
}

.c7 {
  flex: 0 0 auto;
  align-self: stretch;
  width: 3px;
}

.c9 {
  font-size: 18px;
  line-height: 24px;
}

.c4 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 4px;
  padding: 4px 4px;
  font-size: 18px;
  line-height: 0;
  color: #000000;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c4 >svg {
  display: flex;
  align-self: center;
  vertical-align: middle;
}

.c4:hover {
  background-color: rgba(51, 51, 51, 0.06274509803921569);
}

.c4:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c4:focus >circle,
.c4:focus >ellipse,
.c4:focus >line,
.c4:focus >path,
.c4:focus >polygon,
.c4:focus >polyline,
.c4:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c4:focus ::-moz-focus-inner {
  border: 0;
}

.c4:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c4:focus:not(:focus-visible) >circle,
.c4:focus:not(:focus-visible) >ellipse,
.c4:focus:not(:focus-visible) >line,
.c4:focus:not(:focus-visible) >path,
.c4:focus:not(:focus-visible) >polygon,
.c4:focus:not(:focus-visible) >polyline,
.c4:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c4:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c8 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 4px;
  padding: 4px 4px;
  font-size: 18px;
  line-height: 24px;
  color: #000000;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c8:hover {
  background-color: rgba(51, 51, 51, 0.06274509803921569);
}

.c8:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c8:focus >circle,
.c8:focus >ellipse,
.c8:focus >line,
.c8:focus >path,
.c8:focus >polygon,
.c8:focus >polyline,
.c8:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c8:focus ::-moz-focus-inner {
  border: 0;
}

.c8:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c8:focus:not(:focus-visible) >circle,
.c8:focus:not(:focus-visible) >ellipse,
.c8:focus:not(:focus-visible) >line,
.c8:focus:not(:focus-visible) >path,
.c8:focus:not(:focus-visible) >polygon,
.c8:focus:not(:focus-visible) >polyline,
.c8:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c8:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c11 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  background-color: rgba(221, 221, 221, 0.4);
  color: #000000;
  border: none;
  border-radius: 4px;
  padding: 4px 4px;
  font-size: 18px;
  line-height: 24px;
  background-color: rgba(51, 51, 51, 0.06274509803921569);
  color: #444444;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c11:hover {
  background-color: rgba(51, 51, 51, 0.06274509803921569);
}

.c11:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c11:focus >circle,
.c11:focus >ellipse,
.c11:focus >line,
.c11:focus >path,
.c11:focus >polygon,
.c11:focus >polyline,
.c11:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c11:focus ::-moz-focus-inner {
  border: 0;
}

.c11:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c11:focus:not(:focus-visible) >circle,
.c11:focus:not(:focus-visible) >ellipse,
.c11:focus:not(:focus-visible) >line,
.c11:focus:not(:focus-visible) >path,
.c11:focus:not(:focus-visible) >polygon,
.c11:focus:not(:focus-visible) >polyline,
.c11:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c11:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c5 {
  font-size: 18px;
  line-height: 0;
}

.c5 >svg {
  margin: 0 auto;
}

.c3 {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  height: 36px;
  min-width: 36px;
}

.c10 {
  font-weight: bold;
  font-size: 18px;
  line-height: 0;
}

@media only screen and (max-width: 768px) {
  .c2 {
    margin: 0px;
  }
}

@media only screen and (max-width: 768px) {
  .c2 {
    padding: 0px;
  }
}

@media only screen and (max-width: 768px) {
  .c7 {
    width: 2px;
  }
}

<div
  class="c0"
>
  <div
    class="c1 Pagination__StyledPaginationContainer-sc-rnlw6m-0"
  >
    <nav
      aria-label="Pagination Navigation"
      class="c1"
    >
      <ul
        class="c2"
      >
        <li
          class="c3"
        >
          <button
            aria-label="Go to previous page"
            class="c4 c5"
            type="button"
          >
            <svg
              aria-label="Previous"
              class="c6"
              viewBox="0 0 24 24"
            >
              <path
                d="M17 2 7 12l10 10"
                fill="none"
                stroke="#000"
                stroke-width="2"
              />
            </svg>
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 1"
            class="c8 c5"
            type="button"
          >
            1
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 2"
            class="c8 c5"
            type="button"
          >
            2
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 3"
            class="c8 c5"
            type="button"
          >
            3
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <span
            class="c9 c10"
          >
            …
          </span>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 9"
            class="c8 c5"
            type="button"
          >
            9
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-current="page"
            aria-label="Go to page 10"
            class="c11 c5"
            type="button"
          >
            10
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 11"
            class="c8 c5"
            type="button"
          >
            11
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <span
            class="c9 c10"
          >
            …
          </span>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 22"
            class="c8 c5"
            type="button"
          >
            22
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 23"
            class="c8 c5"
            type="button"
          >
            23
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 24"
            class="c8 c5"
            type="button"
          >
            24
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to next page"
            class="c4 c5"
            type="button"
          >
            <svg
              aria-label="Next"
              class="c6"
              viewBox="0 0 24 24"
            >
              <path
                d="m7 2 10 10L7 22"
                fill="none"
                stroke="#000"
                stroke-width="2"
              />
            </svg>
          </button>
        </li>
      </ul>
    </nav>
  </div>
</div>
`;

exports[`Pagination should render correct numberMiddlePages when even 1`] = `
.c6 {
  display: inline-block;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  fill: #000000;
  stroke: #000000;
}

.c6 g {
  fill: inherit;
  stroke: inherit;
}

.c6 *:not([stroke])[fill='none'] {
  stroke-width: 0;
}

.c6 *[stroke*='#'],
.c6 *[STROKE*='#'] {
  stroke: inherit;
  fill: none;
}

.c6 *[fill-rule],
.c6 *[FILL-RULE],
.c6 *[fill*='#'],
.c6 *[FILL*='#'] {
  fill: inherit;
  stroke: none;
}

.c0 {
  font-size: 18px;
  line-height: 24px;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

.c1 {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  flex: 0 0 auto;
}

.c2 {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
  margin: 0px;
  align-items: center;
  min-width: 0;
  min-height: 0;
  flex-direction: row;
  padding: 0px;
}

.c7 {
  flex: 0 0 auto;
  align-self: stretch;
  width: 3px;
}

.c9 {
  font-size: 18px;
  line-height: 24px;
}

.c4 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 4px;
  padding: 4px 4px;
  font-size: 18px;
  line-height: 0;
  color: #000000;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c4 >svg {
  display: flex;
  align-self: center;
  vertical-align: middle;
}

.c4:hover {
  background-color: rgba(51, 51, 51, 0.06274509803921569);
}

.c4:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c4:focus >circle,
.c4:focus >ellipse,
.c4:focus >line,
.c4:focus >path,
.c4:focus >polygon,
.c4:focus >polyline,
.c4:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c4:focus ::-moz-focus-inner {
  border: 0;
}

.c4:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c4:focus:not(:focus-visible) >circle,
.c4:focus:not(:focus-visible) >ellipse,
.c4:focus:not(:focus-visible) >line,
.c4:focus:not(:focus-visible) >path,
.c4:focus:not(:focus-visible) >polygon,
.c4:focus:not(:focus-visible) >polyline,
.c4:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c4:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c8 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 4px;
  padding: 4px 4px;
  font-size: 18px;
  line-height: 24px;
  color: #000000;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c8:hover {
  background-color: rgba(51, 51, 51, 0.06274509803921569);
}

.c8:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c8:focus >circle,
.c8:focus >ellipse,
.c8:focus >line,
.c8:focus >path,
.c8:focus >polygon,
.c8:focus >polyline,
.c8:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c8:focus ::-moz-focus-inner {
  border: 0;
}

.c8:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c8:focus:not(:focus-visible) >circle,
.c8:focus:not(:focus-visible) >ellipse,
.c8:focus:not(:focus-visible) >line,
.c8:focus:not(:focus-visible) >path,
.c8:focus:not(:focus-visible) >polygon,
.c8:focus:not(:focus-visible) >polyline,
.c8:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c8:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c11 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  background-color: rgba(221, 221, 221, 0.4);
  color: #000000;
  border: none;
  border-radius: 4px;
  padding: 4px 4px;
  font-size: 18px;
  line-height: 24px;
  background-color: rgba(51, 51, 51, 0.06274509803921569);
  color: #444444;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c11:hover {
  background-color: rgba(51, 51, 51, 0.06274509803921569);
}

.c11:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c11:focus >circle,
.c11:focus >ellipse,
.c11:focus >line,
.c11:focus >path,
.c11:focus >polygon,
.c11:focus >polyline,
.c11:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c11:focus ::-moz-focus-inner {
  border: 0;
}

.c11:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c11:focus:not(:focus-visible) >circle,
.c11:focus:not(:focus-visible) >ellipse,
.c11:focus:not(:focus-visible) >line,
.c11:focus:not(:focus-visible) >path,
.c11:focus:not(:focus-visible) >polygon,
.c11:focus:not(:focus-visible) >polyline,
.c11:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c11:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c5 {
  font-size: 18px;
  line-height: 0;
}

.c5 >svg {
  margin: 0 auto;
}

.c3 {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  height: 36px;
  min-width: 36px;
}

.c10 {
  font-weight: bold;
  font-size: 18px;
  line-height: 0;
}

@media only screen and (max-width: 768px) {
  .c2 {
    margin: 0px;
  }
}

@media only screen and (max-width: 768px) {
  .c2 {
    padding: 0px;
  }
}

@media only screen and (max-width: 768px) {
  .c7 {
    width: 2px;
  }
}

<div
  class="c0"
>
  <div
    class="c1 Pagination__StyledPaginationContainer-sc-rnlw6m-0"
  >
    <nav
      aria-label="Pagination Navigation"
      class="c1"
    >
      <ul
        class="c2"
      >
        <li
          class="c3"
        >
          <button
            aria-label="Go to previous page"
            class="c4 c5"
            type="button"
          >
            <svg
              aria-label="Previous"
              class="c6"
              viewBox="0 0 24 24"
            >
              <path
                d="M17 2 7 12l10 10"
                fill="none"
                stroke="#000"
                stroke-width="2"
              />
            </svg>
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 1"
            class="c8 c5"
            type="button"
          >
            1
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <span
            class="c9 c10"
          >
            …
          </span>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 9"
            class="c8 c5"
            type="button"
          >
            9
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-current="page"
            aria-label="Go to page 10"
            class="c11 c5"
            type="button"
          >
            10
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 11"
            class="c8 c5"
            type="button"
          >
            11
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 12"
            class="c8 c5"
            type="button"
          >
            12
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <span
            class="c9 c10"
          >
            …
          </span>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 24"
            class="c8 c5"
            type="button"
          >
            24
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to next page"
            class="c4 c5"
            type="button"
          >
            <svg
              aria-label="Next"
              class="c6"
              viewBox="0 0 24 24"
            >
              <path
                d="m7 2 10 10L7 22"
                fill="none"
                stroke="#000"
                stroke-width="2"
              />
            </svg>
          </button>
        </li>
      </ul>
    </nav>
  </div>
</div>
`;

exports[`Pagination should render correct numberMiddlePages when odd 1`] = `
.c6 {
  display: inline-block;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  fill: #000000;
  stroke: #000000;
}

.c6 g {
  fill: inherit;
  stroke: inherit;
}

.c6 *:not([stroke])[fill='none'] {
  stroke-width: 0;
}

.c6 *[stroke*='#'],
.c6 *[STROKE*='#'] {
  stroke: inherit;
  fill: none;
}

.c6 *[fill-rule],
.c6 *[FILL-RULE],
.c6 *[fill*='#'],
.c6 *[FILL*='#'] {
  fill: inherit;
  stroke: none;
}

.c0 {
  font-size: 18px;
  line-height: 24px;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

.c1 {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  flex: 0 0 auto;
}

.c2 {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
  margin: 0px;
  align-items: center;
  min-width: 0;
  min-height: 0;
  flex-direction: row;
  padding: 0px;
}

.c7 {
  flex: 0 0 auto;
  align-self: stretch;
  width: 3px;
}

.c9 {
  font-size: 18px;
  line-height: 24px;
}

.c4 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 4px;
  padding: 4px 4px;
  font-size: 18px;
  line-height: 0;
  color: #000000;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c4 >svg {
  display: flex;
  align-self: center;
  vertical-align: middle;
}

.c4:hover {
  background-color: rgba(51, 51, 51, 0.06274509803921569);
}

.c4:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c4:focus >circle,
.c4:focus >ellipse,
.c4:focus >line,
.c4:focus >path,
.c4:focus >polygon,
.c4:focus >polyline,
.c4:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c4:focus ::-moz-focus-inner {
  border: 0;
}

.c4:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c4:focus:not(:focus-visible) >circle,
.c4:focus:not(:focus-visible) >ellipse,
.c4:focus:not(:focus-visible) >line,
.c4:focus:not(:focus-visible) >path,
.c4:focus:not(:focus-visible) >polygon,
.c4:focus:not(:focus-visible) >polyline,
.c4:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c4:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c8 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 4px;
  padding: 4px 4px;
  font-size: 18px;
  line-height: 24px;
  color: #000000;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c8:hover {
  background-color: rgba(51, 51, 51, 0.06274509803921569);
}

.c8:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c8:focus >circle,
.c8:focus >ellipse,
.c8:focus >line,
.c8:focus >path,
.c8:focus >polygon,
.c8:focus >polyline,
.c8:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c8:focus ::-moz-focus-inner {
  border: 0;
}

.c8:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c8:focus:not(:focus-visible) >circle,
.c8:focus:not(:focus-visible) >ellipse,
.c8:focus:not(:focus-visible) >line,
.c8:focus:not(:focus-visible) >path,
.c8:focus:not(:focus-visible) >polygon,
.c8:focus:not(:focus-visible) >polyline,
.c8:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c8:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c11 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  background-color: rgba(221, 221, 221, 0.4);
  color: #000000;
  border: none;
  border-radius: 4px;
  padding: 4px 4px;
  font-size: 18px;
  line-height: 24px;
  background-color: rgba(51, 51, 51, 0.06274509803921569);
  color: #444444;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c11:hover {
  background-color: rgba(51, 51, 51, 0.06274509803921569);
}

.c11:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c11:focus >circle,
.c11:focus >ellipse,
.c11:focus >line,
.c11:focus >path,
.c11:focus >polygon,
.c11:focus >polyline,
.c11:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c11:focus ::-moz-focus-inner {
  border: 0;
}

.c11:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c11:focus:not(:focus-visible) >circle,
.c11:focus:not(:focus-visible) >ellipse,
.c11:focus:not(:focus-visible) >line,
.c11:focus:not(:focus-visible) >path,
.c11:focus:not(:focus-visible) >polygon,
.c11:focus:not(:focus-visible) >polyline,
.c11:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c11:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c5 {
  font-size: 18px;
  line-height: 0;
}

.c5 >svg {
  margin: 0 auto;
}

.c3 {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  height: 36px;
  min-width: 36px;
}

.c10 {
  font-weight: bold;
  font-size: 18px;
  line-height: 0;
}

@media only screen and (max-width: 768px) {
  .c2 {
    margin: 0px;
  }
}

@media only screen and (max-width: 768px) {
  .c2 {
    padding: 0px;
  }
}

@media only screen and (max-width: 768px) {
  .c7 {
    width: 2px;
  }
}

<div
  class="c0"
>
  <div
    class="c1 Pagination__StyledPaginationContainer-sc-rnlw6m-0"
  >
    <nav
      aria-label="Pagination Navigation"
      class="c1"
    >
      <ul
        class="c2"
      >
        <li
          class="c3"
        >
          <button
            aria-label="Go to previous page"
            class="c4 c5"
            type="button"
          >
            <svg
              aria-label="Previous"
              class="c6"
              viewBox="0 0 24 24"
            >
              <path
                d="M17 2 7 12l10 10"
                fill="none"
                stroke="#000"
                stroke-width="2"
              />
            </svg>
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 1"
            class="c8 c5"
            type="button"
          >
            1
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <span
            class="c9 c10"
          >
            …
          </span>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 8"
            class="c8 c5"
            type="button"
          >
            8
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 9"
            class="c8 c5"
            type="button"
          >
            9
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-current="page"
            aria-label="Go to page 10"
            class="c11 c5"
            type="button"
          >
            10
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 11"
            class="c8 c5"
            type="button"
          >
            11
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 12"
            class="c8 c5"
            type="button"
          >
            12
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <span
            class="c9 c10"
          >
            …
          </span>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 24"
            class="c8 c5"
            type="button"
          >
            24
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to next page"
            class="c4 c5"
            type="button"
          >
            <svg
              aria-label="Next"
              class="c6"
              viewBox="0 0 24 24"
            >
              <path
                d="m7 2 10 10L7 22"
                fill="none"
                stroke="#000"
                stroke-width="2"
              />
            </svg>
          </button>
        </li>
      </ul>
    </nav>
  </div>
</div>
`;

exports[`Pagination should set numberMiddlePages = 1 if user provides value < 1 1`] = `
.c6 {
  display: inline-block;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  fill: #666666;
  stroke: #666666;
}

.c6 g {
  fill: inherit;
  stroke: inherit;
}

.c6 *:not([stroke])[fill='none'] {
  stroke-width: 0;
}

.c6 *[stroke*='#'],
.c6 *[STROKE*='#'] {
  stroke: inherit;
  fill: none;
}

.c6 *[fill-rule],
.c6 *[FILL-RULE],
.c6 *[fill*='#'],
.c6 *[FILL*='#'] {
  fill: inherit;
  stroke: none;
}

.c13 {
  display: inline-block;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  fill: #000000;
  stroke: #000000;
}

.c13 g {
  fill: inherit;
  stroke: inherit;
}

.c13 *:not([stroke])[fill='none'] {
  stroke-width: 0;
}

.c13 *[stroke*='#'],
.c13 *[STROKE*='#'] {
  stroke: inherit;
  fill: none;
}

.c13 *[fill-rule],
.c13 *[FILL-RULE],
.c13 *[fill*='#'],
.c13 *[FILL*='#'] {
  fill: inherit;
  stroke: none;
}

.c0 {
  font-size: 18px;
  line-height: 24px;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

.c1 {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  flex: 0 0 auto;
}

.c2 {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
  margin: 0px;
  align-items: center;
  min-width: 0;
  min-height: 0;
  flex-direction: row;
  padding: 0px;
}

.c7 {
  flex: 0 0 auto;
  align-self: stretch;
  width: 3px;
}

.c10 {
  font-size: 18px;
  line-height: 24px;
}

.c4 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 4px;
  padding: 4px 4px;
  font-size: 18px;
  line-height: 0;
  text-align: center;
  opacity: 0.3;
  cursor: default;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c4 >svg {
  display: flex;
  align-self: center;
  vertical-align: middle;
}

.c4:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c4:focus >circle,
.c4:focus >ellipse,
.c4:focus >line,
.c4:focus >path,
.c4:focus >polygon,
.c4:focus >polyline,
.c4:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c4:focus ::-moz-focus-inner {
  border: 0;
}

.c4:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c4:focus:not(:focus-visible) >circle,
.c4:focus:not(:focus-visible) >ellipse,
.c4:focus:not(:focus-visible) >line,
.c4:focus:not(:focus-visible) >path,
.c4:focus:not(:focus-visible) >polygon,
.c4:focus:not(:focus-visible) >polyline,
.c4:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c4:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c8 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  background-color: rgba(221, 221, 221, 0.4);
  color: #000000;
  border: none;
  border-radius: 4px;
  padding: 4px 4px;
  font-size: 18px;
  line-height: 24px;
  background-color: rgba(51, 51, 51, 0.06274509803921569);
  color: #444444;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c8:hover {
  background-color: rgba(51, 51, 51, 0.06274509803921569);
}

.c8:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c8:focus >circle,
.c8:focus >ellipse,
.c8:focus >line,
.c8:focus >path,
.c8:focus >polygon,
.c8:focus >polyline,
.c8:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c8:focus ::-moz-focus-inner {
  border: 0;
}

.c8:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c8:focus:not(:focus-visible) >circle,
.c8:focus:not(:focus-visible) >ellipse,
.c8:focus:not(:focus-visible) >line,
.c8:focus:not(:focus-visible) >path,
.c8:focus:not(:focus-visible) >polygon,
.c8:focus:not(:focus-visible) >polyline,
.c8:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c8:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c9 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 4px;
  padding: 4px 4px;
  font-size: 18px;
  line-height: 24px;
  color: #000000;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c9:hover {
  background-color: rgba(51, 51, 51, 0.06274509803921569);
}

.c9:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c9:focus >circle,
.c9:focus >ellipse,
.c9:focus >line,
.c9:focus >path,
.c9:focus >polygon,
.c9:focus >polyline,
.c9:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c9:focus ::-moz-focus-inner {
  border: 0;
}

.c9:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c9:focus:not(:focus-visible) >circle,
.c9:focus:not(:focus-visible) >ellipse,
.c9:focus:not(:focus-visible) >line,
.c9:focus:not(:focus-visible) >path,
.c9:focus:not(:focus-visible) >polygon,
.c9:focus:not(:focus-visible) >polyline,
.c9:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c9:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c12 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 4px;
  padding: 4px 4px;
  font-size: 18px;
  line-height: 0;
  color: #000000;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c12 >svg {
  display: flex;
  align-self: center;
  vertical-align: middle;
}

.c12:hover {
  background-color: rgba(51, 51, 51, 0.06274509803921569);
}

.c12:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c12:focus >circle,
.c12:focus >ellipse,
.c12:focus >line,
.c12:focus >path,
.c12:focus >polygon,
.c12:focus >polyline,
.c12:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c12:focus ::-moz-focus-inner {
  border: 0;
}

.c12:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c12:focus:not(:focus-visible) >circle,
.c12:focus:not(:focus-visible) >ellipse,
.c12:focus:not(:focus-visible) >line,
.c12:focus:not(:focus-visible) >path,
.c12:focus:not(:focus-visible) >polygon,
.c12:focus:not(:focus-visible) >polyline,
.c12:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c12:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c5 {
  font-size: 18px;
  line-height: 0;
}

.c5 >svg {
  margin: 0 auto;
}

.c3 {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  height: 36px;
  min-width: 36px;
}

.c11 {
  font-weight: bold;
  font-size: 18px;
  line-height: 0;
}

@media only screen and (max-width: 768px) {
  .c2 {
    margin: 0px;
  }
}

@media only screen and (max-width: 768px) {
  .c2 {
    padding: 0px;
  }
}

@media only screen and (max-width: 768px) {
  .c7 {
    width: 2px;
  }
}

<div
  class="c0"
>
  <div
    class="c1 Pagination__StyledPaginationContainer-sc-rnlw6m-0"
  >
    <nav
      aria-label="Pagination Navigation"
      class="c1"
    >
      <ul
        class="c2"
      >
        <li
          class="c3"
        >
          <button
            aria-disabled="true"
            aria-label="Go to previous page"
            class="c4 c5"
            disabled=""
            type="button"
          >
            <svg
              aria-label="Previous"
              class="c6"
              viewBox="0 0 24 24"
            >
              <path
                d="M17 2 7 12l10 10"
                fill="none"
                stroke="#000"
                stroke-width="2"
              />
            </svg>
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-current="page"
            aria-label="Go to page 1"
            class="c8 c5"
            type="button"
          >
            1
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 2"
            class="c9 c5"
            type="button"
          >
            2
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 3"
            class="c9 c5"
            type="button"
          >
            3
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <span
            class="c10 c11"
          >
            …
          </span>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 24"
            class="c9 c5"
            type="button"
          >
            24
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to next page"
            class="c12 c5"
            type="button"
          >
            <svg
              aria-label="Next"
              class="c13"
              viewBox="0 0 24 24"
            >
              <path
                d="m7 2 10 10L7 22"
                fill="none"
                stroke="#000"
                stroke-width="2"
              />
            </svg>
          </button>
        </li>
      </ul>
    </nav>
  </div>
</div>
`;

exports[`Pagination should set page to last page if page prop > total possible
  pages 1`] = `
.c6 {
  display: inline-block;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  fill: #000000;
  stroke: #000000;
}

.c6 g {
  fill: inherit;
  stroke: inherit;
}

.c6 *:not([stroke])[fill='none'] {
  stroke-width: 0;
}

.c6 *[stroke*='#'],
.c6 *[STROKE*='#'] {
  stroke: inherit;
  fill: none;
}

.c6 *[fill-rule],
.c6 *[FILL-RULE],
.c6 *[fill*='#'],
.c6 *[FILL*='#'] {
  fill: inherit;
  stroke: none;
}

.c13 {
  display: inline-block;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  fill: #666666;
  stroke: #666666;
}

.c13 g {
  fill: inherit;
  stroke: inherit;
}

.c13 *:not([stroke])[fill='none'] {
  stroke-width: 0;
}

.c13 *[stroke*='#'],
.c13 *[STROKE*='#'] {
  stroke: inherit;
  fill: none;
}

.c13 *[fill-rule],
.c13 *[FILL-RULE],
.c13 *[fill*='#'],
.c13 *[FILL*='#'] {
  fill: inherit;
  stroke: none;
}

.c0 {
  font-size: 18px;
  line-height: 24px;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

.c1 {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  flex: 0 0 auto;
}

.c2 {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
  margin: 0px;
  align-items: center;
  min-width: 0;
  min-height: 0;
  flex-direction: row;
  padding: 0px;
}

.c7 {
  flex: 0 0 auto;
  align-self: stretch;
  width: 3px;
}

.c9 {
  font-size: 18px;
  line-height: 24px;
}

.c4 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 4px;
  padding: 4px 4px;
  font-size: 18px;
  line-height: 0;
  color: #000000;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c4 >svg {
  display: flex;
  align-self: center;
  vertical-align: middle;
}

.c4:hover {
  background-color: rgba(51, 51, 51, 0.06274509803921569);
}

.c4:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c4:focus >circle,
.c4:focus >ellipse,
.c4:focus >line,
.c4:focus >path,
.c4:focus >polygon,
.c4:focus >polyline,
.c4:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c4:focus ::-moz-focus-inner {
  border: 0;
}

.c4:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c4:focus:not(:focus-visible) >circle,
.c4:focus:not(:focus-visible) >ellipse,
.c4:focus:not(:focus-visible) >line,
.c4:focus:not(:focus-visible) >path,
.c4:focus:not(:focus-visible) >polygon,
.c4:focus:not(:focus-visible) >polyline,
.c4:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c4:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c8 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 4px;
  padding: 4px 4px;
  font-size: 18px;
  line-height: 24px;
  color: #000000;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c8:hover {
  background-color: rgba(51, 51, 51, 0.06274509803921569);
}

.c8:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c8:focus >circle,
.c8:focus >ellipse,
.c8:focus >line,
.c8:focus >path,
.c8:focus >polygon,
.c8:focus >polyline,
.c8:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c8:focus ::-moz-focus-inner {
  border: 0;
}

.c8:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c8:focus:not(:focus-visible) >circle,
.c8:focus:not(:focus-visible) >ellipse,
.c8:focus:not(:focus-visible) >line,
.c8:focus:not(:focus-visible) >path,
.c8:focus:not(:focus-visible) >polygon,
.c8:focus:not(:focus-visible) >polyline,
.c8:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c8:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c11 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  background-color: rgba(221, 221, 221, 0.4);
  color: #000000;
  border: none;
  border-radius: 4px;
  padding: 4px 4px;
  font-size: 18px;
  line-height: 24px;
  background-color: rgba(51, 51, 51, 0.06274509803921569);
  color: #444444;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c11:hover {
  background-color: rgba(51, 51, 51, 0.06274509803921569);
}

.c11:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c11:focus >circle,
.c11:focus >ellipse,
.c11:focus >line,
.c11:focus >path,
.c11:focus >polygon,
.c11:focus >polyline,
.c11:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c11:focus ::-moz-focus-inner {
  border: 0;
}

.c11:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c11:focus:not(:focus-visible) >circle,
.c11:focus:not(:focus-visible) >ellipse,
.c11:focus:not(:focus-visible) >line,
.c11:focus:not(:focus-visible) >path,
.c11:focus:not(:focus-visible) >polygon,
.c11:focus:not(:focus-visible) >polyline,
.c11:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c11:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c12 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 4px;
  padding: 4px 4px;
  font-size: 18px;
  line-height: 0;
  text-align: center;
  opacity: 0.3;
  cursor: default;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c12 >svg {
  display: flex;
  align-self: center;
  vertical-align: middle;
}

.c12:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c12:focus >circle,
.c12:focus >ellipse,
.c12:focus >line,
.c12:focus >path,
.c12:focus >polygon,
.c12:focus >polyline,
.c12:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c12:focus ::-moz-focus-inner {
  border: 0;
}

.c12:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c12:focus:not(:focus-visible) >circle,
.c12:focus:not(:focus-visible) >ellipse,
.c12:focus:not(:focus-visible) >line,
.c12:focus:not(:focus-visible) >path,
.c12:focus:not(:focus-visible) >polygon,
.c12:focus:not(:focus-visible) >polyline,
.c12:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c12:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c5 {
  font-size: 18px;
  line-height: 0;
}

.c5 >svg {
  margin: 0 auto;
}

.c3 {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  height: 36px;
  min-width: 36px;
}

.c10 {
  font-weight: bold;
  font-size: 18px;
  line-height: 0;
}

@media only screen and (max-width: 768px) {
  .c2 {
    margin: 0px;
  }
}

@media only screen and (max-width: 768px) {
  .c2 {
    padding: 0px;
  }
}

@media only screen and (max-width: 768px) {
  .c7 {
    width: 2px;
  }
}

<div
  class="c0"
>
  <div
    class="c1 Pagination__StyledPaginationContainer-sc-rnlw6m-0"
  >
    <nav
      aria-label="Pagination Navigation"
      class="c1"
    >
      <ul
        class="c2"
      >
        <li
          class="c3"
        >
          <button
            aria-label="Go to previous page"
            class="c4 c5"
            type="button"
          >
            <svg
              aria-label="Previous"
              class="c6"
              viewBox="0 0 24 24"
            >
              <path
                d="M17 2 7 12l10 10"
                fill="none"
                stroke="#000"
                stroke-width="2"
              />
            </svg>
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 1"
            class="c8 c5"
            type="button"
          >
            1
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <span
            class="c9 c10"
          >
            …
          </span>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 6"
            class="c8 c5"
            type="button"
          >
            6
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 7"
            class="c8 c5"
            type="button"
          >
            7
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 8"
            class="c8 c5"
            type="button"
          >
            8
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-label="Go to page 9"
            class="c8 c5"
            type="button"
          >
            9
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-current="page"
            aria-label="Go to page 10"
            class="c11 c5"
            type="button"
          >
            10
          </button>
        </li>
        <div
          class="c7"
        />
        <li
          class="c3"
        >
          <button
            aria-disabled="true"
            aria-label="Go to next page"
            class="c12 c5"
            disabled=""
            type="button"
          >
            <svg
              aria-label="Next"
              class="c13"
              viewBox="0 0 24 24"
            >
              <path
                d="m7 2 10 10L7 22"
                fill="none"
                stroke="#000"
                stroke-width="2"
              />
            </svg>
          </button>
        </li>
      </ul>
    </nav>
  </div>
</div>
`;