: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;
}

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

      @media (width <= 768px) {
        padding: 5px;
      }
    }
  }
}

.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%;

  &[disabled] {
    background-color: var(--button--link-disabled-colour);
    pointer-events: none;
    border-color: var(--button--link-disabled-colour);
  }
}

.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;
}