/*==========================================================================
  Pagination
  ========================================================================== */

.pagination
  width: 100%
  text-align: center
  font-size: 0.75rem
  font-family: rubik()
  line-height: 1.1

  ul
    width: 100%
    display: inline-block
    list-style: none
    padding: 0
    margin: 0

    li
      display: inline-block
      padding: 0 10px
      color: $purple
      border-right: 2px solid rgba($purple, 0.35)

      a
        opacity: 0.35
        color: $purple
        text-decoration: none
        transition: opacity 0.3s

        &:hover
          opacity: 0.7

      &.active
        opacity: 1


      &.disabled
        opacity: 0



      //previous
      &:first-child
        span
          +translate3dRotate(0,0,0,180deg)

        a
          &:hover
            span
              +translate3dRotate(-3px,0,0,180deg)

      //last index number
      &:nth-last-child(2)
        border-right: 0

      //next
      &:last-child
        span
          +translate3d(0,0,0)
        a
          &:hover
            span
              +translate3d(3px,0,0)


      &:nth-child(1), &:last-child
        border-right: none
        span
          display: inline-block
          +sprite(-33px -100px, 8px, 8px)
          transition: transform 0.3s

    &.text-pagination
      margin-bottom: 20px



      li
        width: 190px

        a
          color: $darkPurple
          opacity: 1

        &:first-child
          text-align: right
          border-right: 2px solid rgba($purple, 0.35)

          span
            margin-right: 10px
            +arrowPurple

        &:last-child
          text-align: left

          span
            margin-left: 10px
            +arrowPurple

        &.disabled
          opacity: 0.35

  +respond-to-width(500)
    .number-pagination
      font-size: 0.9rem


  +respond-to-width(470)
    padding: 20px 0

    .text-pagination
      display: none