.search-body-footer {
  .paging-wrapper {
    display: flex;
    align-items: center;
    padding-bottom: 0.8em;
    border-bottom: 2px solid @midGray;
  }

  .prev-next-paging {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ui.button.pagination-item {
    padding: 0.5em 0.7em;
    border: none;
    margin: 0;
    background: none;
    color: @deepBlue;
    font-size: 23px;
    font-weight: 400;

    &.active {
      position: relative;
      background: none;
      color: @secondaryColor;

      &:after {
        position: absolute;
        bottom: -16px;
        left: 0;
        display: inline-block;
        width: 100%;
        border-bottom: 5px solid @secondaryColor;
        color: @blue-grey-5;
        content: '';
      }
    }

    &.active:hover,
    &:hover,
    &:active,
    &:focus {
      background: none;
      color: @secondaryColor;
    }
  }

  .ui.button.prev.single-angle {
    margin-right: 15px;
  }

  .ui.button.next.single-angle {
    margin-left: 15px;
  }

  .ui.button.prev.single-angle,
  .ui.button.next.single-angle {
    width: 30px;
    height: 30px;
  }

  .ui.button.prev.double-angle,
  .ui.button.next.double-angle {
    width: 28px;
    height: 28px;
  }

  .ui.button.prev,
  .ui.button.next {
    position: relative;
    padding: 0;
    margin: 0;
    background: none;

    &:hover {
      background: none;
      color: @secondaryColor;
    }

    &.single-angle:hover:after,
    &.double-angle:hover:after,
    &.double-angle:hover:before {
      color: @secondaryColor;
    }
  }

  .ui.button.next.single-angle:after,
  .ui.button.prev.single-angle:after {
    position: absolute;
    top: 5px;
    display: inline-block;
    width: 18px;
    height: 18px;
    border-right: 2px solid;
    border-bottom: 2px solid;
    color: @deepBlue;
    content: '';
  }

  .ui.button.next.single-angle:after {
    left: 0;
    transform: rotate(-45deg);
  }

  .ui.button.prev.single-angle:after {
    right: 0;
    transform: rotate(-225deg);
  }

  .ui.button.next.double-angle:after,
  .ui.button.prev.double-angle:after,
  .ui.button.next.double-angle:before,
  .ui.button.prev.double-angle:before {
    position: absolute;
    top: 7px;
    left: 10px;
    display: inline-block;
    width: 15px;
    height: 15px;
    border-right: 2px solid;
    border-bottom: 2px solid;
    color: @deepBlue;
    content: '';
  }

  .ui.button.prev.double-angle:after {
    left: 2px;
  }

  .ui.button.next.double-angle:after {
    left: 2px;
  }

  .ui.button.next.double-angle:after,
  .ui.button.next.double-angle:before {
    transform: rotate(-45deg);
  }

  .ui.button.prev.double-angle:after,
  .ui.button.prev.double-angle:before {
    transform: rotate(-225deg);
  }
}

@media only screen and (max-width: @largestMobileScreen) {
  .search-body-footer {
    .ui.button.pagination-item {
      font-size: 14px;
    }

    .ui.button.prev.single-angle,
    .ui.button.next.single-angle,
    .ui.button.prev.double-angle,
    .ui.button.next.double-angle {
      width: 20px;
      height: 20px;
    }

    .ui.button.next.single-angle:after,
    .ui.button.prev.single-angle:after,
    .ui.button.next.double-angle:after,
    .ui.button.prev.double-angle:after,
    .ui.button.next.double-angle:before,
    .ui.button.prev.double-angle:before {
      top: 5px;
      width: 10px;
      height: 10px;
    }
  }
}