: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 / 10%);
  --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_1, #1d42a6);
  --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 - Hover/Active */
  --pagination--pagination-button-active--text_colour: var(--light_1, #ffffff);
  --pagination--pagination-button-active--background_colour: #002147;
  --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 - Button - Disabled */
  --pagination--pagination-button-disabled--background-colour: var(--dark_2, #61615f);
}
/* 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;
        cursor: pointer;
        &: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);
        }
        &[aria-disabled="true"] {
          background-color: var(--pagination--pagination-button-disabled--background-colour);
          cursor: default;
        }
      }
    }
  }
}

/* Narrow container responsive pagination */
@container pager (width < 768px) {
  .pagination {
    --pagination--pagination-container--padding: var(--space-md, 20px);
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-sm, 15px);
    ul {
      order: 1;
      width: 100%;
      flex: 0 0 100%;
      display: flex;
      justify-content: center;
      flex-wrap: nowrap;
      gap: var(--space-3xs, 0.25rem);
      padding: var(--space-3xs, 0.25rem) 0;
    }
    .pagination-button {
      order: 2;
      flex: 1 1 0;
      min-width: 0;
      a {
        white-space: nowrap;
        width: 100%;
        justify-content: center;
      }
    }
  }
}

/* Extra small containers - further reduce padding and font size */
@container pager (width < 481px) {
  .pagination {
    --pagination--pagination-container--padding: var(--space-xs, 10px);
    --pagination--pagination--font_size: 18px;
    --pagination--pagination--line_height: 22px;
    --pagination--pagination-active--font_size: 18px;
    --pagination--pagination-active--line_height: 22px;
    ul {
      gap: 2px;
    }
  }
}