.pagination {
  font-size: $spacing-element-16;

  .page-item {
    background-color: $pagination-bg-color; //TODO: Look into background-color for every state

    &.active {

      .page-link {
        background-color: $pagination-bg-color;
        color: get-colour(blue);
        text-decoration: underline;
        font-weight: bold;
      }
    }

    //TODO: Focus state interaction with page-link
    .page-link {
      //FIXME: Add correct rem
      padding: 1.25rem 1.875rem;
      border: none;
      color: #909090;
      text-decoration: none;
      background-color: $pagination-bg-color;


      &:hover {
        background-color: $pagination-bg-color;
        color: get-colour(blue);
      }
    }

  }
}