@import '../../../styles/mixins'
@import '../../../styles/colors'
@import 'root'

.vs-pagination-content
  position: relative
  display: flex
  align-self: center
  justify-content: center
  &.notMargin
    .vs-pagination
      &__dotted
        background: vs-color('gray-3')
        margin: 0px
      &__arrow
        margin: 0px !important
        border-radius: 0px
        &:first-of-type
          border-radius: 12px 0px 0px 12px
        &:last-of-type
          border-radius: 0px 12px 12px 0px
      &__button
        border-radius: 0px
        margin: 0px !important
  &.disabled
    opacity: .5
    pointer-events: none
    user-select: none
  &.square
    .vs-pagination
      &__active
        border-radius: 0px
      &__button
        border-radius: 0px
      &__arrow
        border-radius: 0px
  &.circle
    .vs-pagination
      &__active
        border-radius: 50%
      &__button
        border-radius: 50%
      &__arrow
        border-radius: 50%
  &.buttonsDotted
    .vs-pagination
      &__arrow
        width: 15px
        height: 12px
        min-width: 15px
        padding: 0px
        background: transparent
        i
          width: 6px
          height: 6px
          &:before
            width: 1px
          &:after
            height: 1px
      &__dotted
        width: 12px
        height: 12px
        font-size: .9rem
        letter-spacing: 1px
      &__button
        width: 12px
        height: 12px
        &.active
          transform: scale(1)
      &__active
        width: 12px
        height: 12px
        box-shadow: 0px 2px 10px 0px vs-color('color', .4)
        transform: scale(1)
        &.move
          transform: scale(1.2)
.vs-pagination
  display: flex
  align-self: center
  justify-content: center
  position: relative
  &__progress
    width: calc(100% - 16px)
    height: 3px
    background: vs-color('gray-3')
    position: absolute
    bottom: -8px
    border-radius: 10px
    .progress
      width: 0px
      background: vs-color('color', 1)
      height: 100%
      position: relative
      border-radius: inherit
      transition: all .25s ease
      max-width: 100%
  &__slot
    min-height: 36px
    min-width: 36px
    position: relative
    display: block
    display: flex
    align-items: center
    justify-content: center
  &__arrow
    position: relative
    width: auto
    height: 36px
    min-width: 36px
    border-radius: 12px
    display: flex
    align-items: center
    justify-content: center
    margin: 0px 2px
    background: vs-color('gray-3')
    transition: all .25s ease
    &:disabled
      opacity: .4
      pointer-events: none
    &:hover
      background: vs-color('gray-4')
    i
      width: 10px
      height: 10px
      position: relative
      display: block
      margin-left: 4px
      transform: rotate(-45deg) scale(.8)
      &:before
        width: 2px
      &:after
        height: 2px
    &.next
      i
        margin-left: -4px
        transform: rotate(135deg) scale(.8)


  &__active
    position: absolute
    left: 50%
    top: 0px
    width: 36px
    height: 36px
    background: vs-color('color')
    border-radius: 12px
    z-index: 100
    display: flex
    align-items: center
    justify-content: center
    font-size: .9rem
    transition: all .25s ease
    color: #fff
    box-shadow: 0px 5px 20px 0px vs-color('color', .3)
    cursor: default
    &.move
      transform: scale(1.1)
  &__dotted
    width: 36px
    height: 36px
    position: relative
    display: flex
    align-items: center
    justify-content: center
    font-size: 1.4rem
    letter-spacing: 2px
    margin: 0px 2px
    cursor: pointer
    &:hover
      span.dotted
        opacity: 0
        margin-left: -1px
        transition: all .25s ease
      .con-arrows
        opacity: 1
        margin-left: -1px
        transition: all .25s ease
    &.next
      &:hover
        span.dotted
          opacity: 0
          margin-left: 1px
          transition: all .25s ease
        .con-arrows
          opacity: 1
          margin-left: 1px
          transition: all .25s ease
    span.dotted
      margin-right: -2px
      text-align: center
    &.next
      .con-arrows
        transform: rotate(180deg)
        margin-left: -5px
    .con-arrows
      width: 10px
      height: 10px
      position: absolute
      display: flex
      align-items: center
      justify-content: center
      margin-left: 5px
      opacity: 0
      transition: all .1s ease
      i
        width: 10px
        height: 10px
        position: relative
        display: block
        transform: rotate(-45deg) scale(.8)
        &:before
          width: 2px
        &:after
          height: 2px
        &:last-child
          position: absolute
          top: 0px
          margin-left: 6px
  &__button
    width: 36px
    height: 36px
    border-radius: 12px
    padding: 0px
    background: vs-color('gray-3')
    margin: 0px 2px
    display: flex
    align-items: center
    justify-content: center
    font-size: .9rem
    transition: all .25s ease
    color: vs-color('text')
    position: relative
    &.loading
      border-radius: 50%
      opacity: .5
      pointer-events: none
      user-select: none
      &:after
        content: ''
        position: absolute
        width: 100%
        height: 100%
        border-radius: 50%
        border: 2px solid vs-color('color', 1)
        border-top: 2px solid vs-color('background', 0)
        border-left: 2px solid vs-color('background', 0)
        border-bottom: 2px solid vs-color('background', 0)
        box-sizing: border-box
        transition: all .25s ease
        display: block
        box-shadow: 0px 0px 0px 0px vs-color('color',1)
        animation: loadingPagination .6s ease infinite
      &:before
        content: ''
        position: absolute
        width: 100%
        height: 100%
        border-radius: 50%
        border: 2px dashed vs-color('color',1)
        border-top: 2px solid vs-color('background', 0)
        border-left: 2px solid vs-color('background', 0)
        border-bottom: 2px solid vs-color('background', 0)
        box-sizing: border-box
        transition: all .25s ease
        display: block
        box-shadow: 0px 0px 0px 0px vs-color('color',1)
        animation: loadingPagination .6s linear infinite

    &.disabled
      opacity: .4
      pointer-events: none
      user-select: none
    &:hover
      background: vs-color('gray-4')
    &:active
      transform: scale(.9)

@keyframes loadingPagination
  0%
    transform: rotate(0)
  100%
    transform: rotate(360deg)