.mmui-pagination {
  .page-item.active .page-link {
    background-color: $mm-core-digital-blue-70;
  }

  .page-link {
    font-size: 1.2rem;
    color: $mm-core-digital-blue-70;
    height: 3rem;
    line-height: 2rem; //3rem - 1.2rem which is top&bottom padding&border in a page-link
    min-width: 3rem;
    text-align: center;
    border: none;
    &:hover {
      background-color: $mm-neutral-gray-30;
    }
    &:focus {
      box-shadow: none;
    }

    i {
      pointer-events: none;
    }
  }

  .pagination-prev {
    border: none;
    padding-left: 1.25rem;
    padding-right: 1.25rem; //20-7.5=12.5 desired distance 20px, each page has 7.5 padding
    &:hover {
      background-color: transparent;
      color: $mm-core-digital-blue-70;
    }
  }

  .pagination-next {
    border: none;
    background-color: transparent; //to let neighbor's border show through
    padding-left: 1.25rem; //20-7.5=12.5 desired distance 20px, each page has 7.5 padding
    &:hover {
      background-color: transparent;
      color: $mm-core-digital-blue-70;
    }
  }

  .pagination-first,
  .pagination-last {
    border: none;
    background-color: transparent;
    &:hover {
      background-color: transparent;
      color: $mm-core-digital-blue-70; //because normally color is white on hover
      a {
        text-decoration: none;
      }
    }
    a:visited {
      color: $mm-core-digital-blue-70;
    }
  }
}