.paginator
  height: 60px
  text-align: center

  ul
    width: 50%
    line-height: 1rem
    font-size: 1rem
    font-weight: bold
    list-style: none
    +inline-flex(center, center)
    padding: 0

    li
      height: 30px
      cursor: pointer
      position: relative
      +inline-flex(center, center)

      a, span
        text-decoration: none
        padding: 12px 17px
        color: rgba(white, 0.5)
        transition: color 0.2s

        &:hover
          color: rgba(white, 0.75)

        .on-light &
          color: rgba($pastelBlue, 0.5)

          &:hover
            color: $pastelBlue


      &:before
        content: ''
        display: block
        height: 45%
        width: 1px
        position: absolute
        top: 25%
        left: 0
        border-left: solid 1px $neutral-400
        opacity: 0.5

      &:first-child
        &:before
          border: none

      &.next
        &:before
          border: none

      &.previous
        transform: rotate(180deg)

      &.disabled
        opacity: 0.2
        pointer-events: none

      &.active
        a, span
          color: white

          .on-light &
            color: $blue

    &.pagination
      & > li
        &:first-child
          margin-right: auto
          border-left: none
        &:last-child
          margin-left: auto

        a, span
          font-size: 1.5rem
          font-weight: normal