.pagination
  ul
    li
      display: inline-block
      float: left
      margin: 0 20px
      a
        color: white

.pagination-container
  .content-container
    width: 100%
    max-width: 900px
  .pagination-custom
    list-style: none
    padding: 0
    margin-bottom: 0
    margin-top: 0
    text-align: center
    z-index: 10
    li
      display: inline-block
      margin: 0 10px
      border-radius: 999px
      background-color: $blue
      height: 45px
      width: 45px
      +transition(all 0.3s)

      a, p
        color: white
        display: inline-block
        margin: 5px
        width: 35px
        height: 35px
        border: Dashed rgba(255, 255, 255, 0.4) 2px
        border-radius: 999px
        +flex(center, center)

      &:hover
        background-color: darken($blue, 10%)

      &.active
        background-color: $beige

      &.disabled
        visibility: hidden

      &:first-of-type, &:last-of-type
        width: 140px
        height: 45px
        display: inline-block
        background-color: $blue
        border-radius: 12px

        a
          width: 100%
          height: 100%
          display: inline-block
          +flex(center, center)
          border: none
          border-radius: 0
          margin: 0
        p
          border: Dashed rgba(255, 255, 255, 0.4) 2px
          border-radius: 12px
          color: white
          +font-default()
          font-size: 15px !important
          line-height: 16px !important
          margin: 0
          display: inline-block
          width: calc(100% - 12px)
          height: calc(100% - 10px)
          +flex(center, center)
          span
            +arrowWhite
            margin-bottom: -2px
            +translate3dRotate(0,0,0, 0deg)
            +transition(all 0.3s)
        &:first-of-type
          margin-left: 0
          float: left
          p
            span
              margin-right: 15px
              +translate3dRotate(0,0,0, 180deg)
          &:hover
            background-color: darken($blue, 10%)
            p
              span
                +translate3dRotate(-3px,0,0, 180deg)

        &:last-of-type
          margin-right: 0
          float: right
          p
            span
              margin-left: 15px

          &:hover
            background-color: darken($blue, 10%)
            p
              span
                +translate3dRotate(3px,0,0, 0deg)
+media-query(800px)
  .pagination-container
    .pagination-custom
      li
        &:first-of-type, &:last-of-type
          display: none