nav {
  .pagination {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    font-size: 14px;

    .pagination-prev, .pagination-next {
      cursor: pointer;

      &:after, &:before {
        font-size: 2em;
        position: relative;
        top: 3px;
      }

      &.inactive {
        cursor: default;
        color: $disabled-dark;
      }
    }

    .pagination-prev {
      margin-left: 10px;

      &:before {
        content: "‹";
        margin-left: 10px;
        margin-right: 10px;
      }
    }

    .pagination-next {
      margin-right: 10px;

      &:after {
        content: "›";
        margin-left: 10px;
        margin-right: 10px;
      }
    }


    .pagination-pages {
      display: flex;
      align-items: flex-end;

      .pagination-gap, .pagination-page {
        padding: 0 0.5rem;
        margin-left: 10px;
        margin-right: 10px;
      }

      .pagination-gap {
        color: $disabled-dark;
      }

      .pagination-page {
        color: $color-4;
        cursor: pointer;
        &.active {
          border-top: 3px solid $spree-blue;
          color: $spree-blue;
          cursor: default;
        }
      }
    }
  }
}