:root {
  --pagination-border: 1px solid #f1eee9;
  --pagination-item-active-colour: var(--dark_1);
  --pagination-item-colour: #61615f;
  --button--link-colour_background: #1d42a6;
  --button--link-colour_text: white;
  --button--link-font: 500 1rem "Arial", sans-serif;
  --button--link-active-colour_background: white;
  --button--link-active-colour_text: darkblue;
  --button--link-active-font: 700 1rem "Arial", sans-serif;
  --button--link-border_style: solid;
  --button--link-border_colour: inherit;
  --button--link-border-radius: 0;
  --button--link-active-border_style: solid;
  --button--link-active-border_colour: inherit;
  --button--link-active-border-radius: 0;
  --button--link-disabled-colour: #61615f;
}

.pager {
  container-name: pager;
  container-type: inline-size;
}

.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: var(--pagination-border);
  padding: var(--space-lg);
  gap: var(--space-sm);

  ul {
    padding: 0;
    margin: 0;

    li {
      display: inline;
      padding: 8px;
      color: var(--pagination-item-colour);
      margin: 2px;
    }
  }
}

.pagination__item {
  font-size: var(--step-md);
  font-weight: 500;
  color: var(--pagination-item-colour);

  a {
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }

  &.is-active {
    color: var(--pagination-item-active-colour);

    a {
      text-decoration: underline;
    }
  }
}

.pagination-button a, .pagination-button a:visited {
  background-color: var(--button--link-colour_background);
  color: var(--button--link-colour_text);
  font: var(--button--link-font);
  font-weight: 500;
  text-decoration: none;
  padding-top: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  display: inline-flex;
  gap: var(--space-2xs);
  align-items: center;
  justify-content: space-between;
  border: 2px solid var(--button--link-active-colour_text);
  width: 100%;
  cursor: pointer;

  &[aria-disabled="true"] {
    background-color: var(--button--link-disabled-colour);
    pointer-events: none;
    border-color: var(--button--link-disabled-colour);
    cursor: default;
  }
}

.pagination-button a:hover,
.pagination-button a:focus {
  background-color: var(--button--link-active-colour_background);
  color: var(--button--link-active-colour_text);
  transition: .3s;
}

/* Narrow container responsive pagination */
@container pager (width < 768px) {
  .pagination {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-sm);
    padding: var(--space-md);
    justify-content: center;
  }

  .pagination ul {
    order: 1;
    width: 100%;
    flex: 0 0 100%;
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    gap: var(--space-3xs, 0.25rem);
    margin: 0;
    padding: 0;
  }

  .pagination ul li {
    padding: 4px;
    margin: 0;
  }

  .pagination .pagination-button {
    order: 2;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
  }

  .pagination .pagination-button a,
  .pagination .pagination-button a:visited {
    display: flex;
    white-space: nowrap;
    width: 100%;
    justify-content: center;
  }
}

/* Extra small containers */
@container pager (width < 481px) {
  .pagination {
    gap: var(--space-xs);
    padding: var(--space-sm);
  }

  .pagination ul {
    gap: var(--space-4xs, 0.125rem);
  }

  .pagination ul li {
    padding: 3px;
    margin: 0;
  }
}