:root {
  /* Pagination - Container */
  --pagination--pagination-container--margin: 40px 0 0;
  --pagination--pagination-container--padding: 40px;
  --pagination--pagination-container--border_size: 1px;
  --pagination--pagination-container--border_style: solid;
  --pagination--pagination-container--border_colour: rgba(0, 0, 0, 0.1);
  --pagination--pagination-container--border_radius: 11px;
  /* Pagination - Item container */
  --pagination--pagination-item-container--padding: 16px;
  --pagination--pagination-item-container--border_size: 0;
  --pagination--pagination-item-container--border_style: solid;
  --pagination--pagination-item-container--border_colour: var(--light_2, #f2f0f0);
  /* Pagination - Items */
  --pagination--pagination--text-colour: var(--dark_2, #61615f);
  --pagination--pagination--margin: 0;
  --pagination--pagination--padding: 0;
  --pagination--pagination--font_family: 'Roboto';
  --pagination--pagination--font_size: 20px;
  --pagination--pagination--font_weight: 500;
  --pagination--pagination--font_style: normal;
  --pagination--pagination--line_height: 24px;
  --pagination--pagination--border_size: 0;
  --pagination--pagination--border_style: none;
  --pagination--pagination--border_colour: transparent;
  /* Pagination - Active */
  --pagination--pagination-active--text-colour: var(--dark_1, #1d42a6);
  --pagination--pagination-active--margin: 0;
  --pagination--pagination-active--padding: inherit;
  --pagination--pagination-active--font_family: 'Roboto';
  --pagination--pagination-active--font_size: 20px;
  --pagination--pagination-active--font_weight: 500;
  --pagination--pagination-active--font_style: normal;
  --pagination--pagination-active--line_height: 24px;
  --pagination--pagination-active--border_size: 0;
  --pagination--pagination-active--border_style: solid;
  --pagination--pagination-active--border_colour: transparent;
  /* Pagination - Button */
  --pagination--pagination-button--text-colour: var(--light_1, #ffffff);
  --pagination--pagination-button--background-colour: var(--dark_2, #61615f);
  --pagination--pagination-button--margin: 0;
  --pagination--pagination-button--padding: 20px;
  --pagination--pagination-button--font_family: 'Roboto';
  --pagination--pagination-button--font_size: 20px;
  --pagination--pagination-button--font_weight: 500;
  --pagination--pagination-button--font_style: normal;
  --pagination--pagination-button--line_height: 24px;
  --pagination--pagination-button--border_size: 0;
  --pagination--pagination-button--border_style: solid;
  --pagination--pagination-button--border_colour: transparent;
  --pagination--pagination-button--border_radius: 6px;
  /* Pagination - Button - Active */
  --pagination--pagination-button-active--text-colour: var(--light_1, #ffffff);
  --pagination--pagination-button-active--background-colour: var(--dark_1, #1d42a6);
  --pagination--pagination-button-active--margin: 0;
  --pagination--pagination-button-active--padding: 20px;
  --pagination--pagination-button-active--font_family: 'Roboto';
  --pagination--pagination-button-active--font_size: 20px;
  --pagination--pagination-button-active--font_weight: 500;
  --pagination--pagination-button-active--font_style: normal;
  --pagination--pagination-button-active--line_height: 24px;
  --pagination--pagination-button-active--border_size: 0;
  --pagination--pagination-button-active--border_style: solid;
  --pagination--pagination-button-active--border_colour: transparent;
}
/* Pagination */
.pager {
  .pagination {
    margin: var(--pagination--pagination-container--margin);
    padding: var(--pagination--pagination-container--padding);
    border-width: var(--pagination--pagination-container--border_size);
    border-style: var(--pagination--pagination-container--border_style);
    border-color: var(--pagination--pagination-container--border_colour);
    border-radius: var(--pagination--pagination-container--border_radius);
    ul {
      padding: var(--pagination--pagination-item-container--padding);
      border-width: var(--pagination--pagination-item-container--border_size);
      border-style: var(--pagination--pagination-item-container--border_style);
      border-color: var(--pagination--pagination-item-container--border_colour);
      li {
        a {
          color: var(--pagination--pagination--text-colour);
          background-color: var(--pagination--pagination--background-colour);
          margin: var(--pagination--pagination--margin);
          padding: var(--pagination--pagination--padding);
          font-family: var(--pagination--pagination--font_family);
          font-size: var(--pagination--pagination--font_size);
          font-weight: var(--pagination--pagination--font_weight);
          font-style: var(--pagination--pagination--font_style);
          line-height: var(--pagination--pagination--line_height);
          border-width: var(--pagination--pagination--border_size);
          border-style: var(--pagination--pagination--border_style);
          border-color: var(--pagination--pagination--border_colour);
        }
        &.is-active, &:hover, &:focus-within {
          a {
            color: var(--pagination--pagination-active--text-colour);
            background-color: var(--pagination--pagination-active--background-colour);
            margin: var(--pagination--pagination-active--margin);
            padding: var(--pagination--pagination-active--padding);
            font-family: var(--pagination--pagination-active--font_family);
            font-size: var(--pagination--pagination-active--font_size);
            font-weight: var(--pagination--pagination-active--font_weight);
            font-style: var(--pagination--pagination-active--font_style);
            line-height: var(--pagination--pagination-active--line_height);
            border-width: var(--pagination--pagination-active--border_size);
            border-style: var(--pagination--pagination-active--border_style);
            border-color: var(--pagination--pagination-active--border_colour);
          }
        }
      }
    }
    .pagination-button {
      a {
        color: var(--pagination--pagination-button--text-colour);
        background-color: var(--pagination--pagination-button--background-colour);
        margin: var(--pagination--pagination-button--margin);
        padding: var(--pagination--pagination-button--padding);
        font-family: var(--pagination--pagination-button--font_family);
        font-size: var(--pagination--pagination-button--font_size);
        font-weight: var(--pagination--pagination-button--font_weight);
        font-style: var(--pagination--pagination-button--font_style);
        line-height: var(--pagination--pagination-button--line_height);
        border-width: var(--pagination--pagination-button--border_size);
        border-style: var(--pagination--pagination-button--border_style);
        border-color: var(--pagination--pagination-button--border_colour);
        border-radius: var(--pagination--pagination-button--border_radius);
        word-break: keep-all;
        &:hover, &:focus-within {
          color: var(--pagination--pagination-button-active--text-colour);
          background-color: var(--pagination--pagination-button-active--background-colour);
          margin: var(--pagination--pagination-button-active--margin);
          padding: var(--pagination--pagination-button-active--padding);
          font-family: var(--pagination--pagination-button-active--font_family);
          font-size: var(--pagination--pagination-button-active--font_size);
          font-weight: var(--pagination--pagination-button-active--font_weight);
          font-style: var(--pagination--pagination-button-active--font_style);
          line-height: var(--pagination--pagination-button-active--line_height);
          border-width: var(--pagination--pagination-button-active--border_size);
          border-style: var(--pagination--pagination-button-active--border_style);
          border-color: var(--pagination--pagination-button-active--border_colour);
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .pager {
    --pagination--pagination-container--padding: 30px;
  }
}