
.pager {
  margin-top: 1rem;
  a {
    display: inline-block;
    height: 2.25rem;
    min-width: 1.75rem;
    padding-top: 0.3rem;
    transition: none;
    text-align: center;
  }

  .pager__item:not(.pager__item--first, .pager__item--previous, .pager__item--next, .pager__item--last) {
    & a:hover,
    & a:focus,
    &.is-active a {
      background-color: #000 !important;
      border-radius: 5px;
      color: var(--color-white) !important;
      border-style: none;
    }
  }

}

nav.pager {
  --pager-success: var(--color-success, #dfc322);
}

.pager{
  .pager__item--first a span[aria-hidden="true"],
  .pager__item--previous a span[aria-hidden="true"],
  .pager__item--next a span[aria-hidden="true"],
  .pager__item--last a span[aria-hidden="true"] {
    display: none;
  }

  .pager__item--first a,
  .pager__item--previous a,
  .pager__item--next a,
  .pager__item--last a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    color: transparent;
    background-color: var(--color-white);
    box-shadow:
      0 1px 2px rgba(0,0,0,.08),
      0 2px 4px rgba(0,0,0,.06);
  }

   .pager__item--first a::before,
   .pager__item--previous a::before,
   .pager__item--next a::before,
   .pager__item--last a::before {
    content: '';
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background-color: var(--pager-success);
  }

  .pager__item--first a::before {
    -webkit-mask-image: url('/themes/custom/eastcambs_theme/assets/icons/forward-step-solid.svg');
    mask-image: url('/themes/custom/eastcambs_theme/assets/icons/forward-step-solid.svg');
    transform: rotate(180deg);
  }

  .pager__item--previous a::before {
    -webkit-mask: url('/themes/custom/eastcambs_theme/assets/icons/play-solid.svg') no-repeat center / contain;
    mask: url('/themes/custom/eastcambs_theme/assets/icons/play-solid.svg') no-repeat center / contain;
    transform: rotate(180deg);
  }

  .pager__item--next a::before {
    -webkit-mask: url('/themes/custom/eastcambs_theme/assets/icons/play-solid.svg') no-repeat center / contain;
    mask: url('/themes/custom/eastcambs_theme/assets/icons/play-solid.svg') no-repeat center / contain;
  }

  .pager__item--last a::before {
    -webkit-mask: url('/themes/custom/eastcambs_theme/assets/icons/forward-step-solid.svg') no-repeat center / contain;
    mask: url('/themes/custom/eastcambs_theme/assets/icons/forward-step-solid.svg') no-repeat center / contain;
  }

  .pager__item--first a:hover,
  .pager__item--first a:focus,
  .pager__item--first a:focus-visible,
  .pager__item--previous a:hover,
  .pager__item--previous a:focus,
  .pager__item--previous a:focus-visible,
  .pager__item--next a:hover,
  .pager__item--next a:focus,
  .pager__item--next a:focus-visible,
  .pager__item--last a:hover,
  .pager__item--last a:focus,
  .pager__item--last a:focus-visible {
    background-color: var(--pager-success);
    border-radius: 1rem;
    transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
  }

   .pager__item--first a:hover::before,
   .pager__item--first a:focus::before,
   .pager__item--first a:focus-visible::before,
   .pager__item--previous a:hover::before,
   .pager__item--previous a:focus::before,
   .pager__item--previous a:focus-visible::before,
   .pager__item--next a:hover::before,
   .pager__item--next a:focus::before,
   .pager__item--next a:focus-visible::before,
   .pager__item--last a:hover::before,
   .pager__item--last a:focus::before,
   .pager__item--last a:focus-visible::before {
    background-color: var(--color-white);
  }
}
