@import '../bootstrap'
@import '../theme'

v-pagination($material)
  .v-pagination__item
    background: $material.cards
    color: $material.fg-color
    width: auto
    min-width: 34px
    padding: 0 5px

    &--active
      color: $material.text.theme

  .v-pagination__navigation
    background: $material.cards

    .v-icon
      color: rgba($material.fg-color, $material.active-icon-percent)

theme(v-pagination, "v-pagination")

.v-pagination
  align-items: center
  display: inline-flex
  list-style-type: none
  margin: 0
  max-width: 100%
  padding: 0

  > li
    align-items: center
    display: flex

  &--circle
    .v-pagination__item,
    .v-pagination__more,
    .v-pagination__navigation
      border-radius: 50%

  &--disabled
    pointer-events: none
    opacity: .6

  &__item
    elevation(2)
    border-radius: 4px
    font-size: $button-font-size
    background: transparent
    height: 34px
    width: 34px
    margin: .3rem
    text-decoration: none
    transition: .3s $transition.linear-out-slow-in

    &--active
      elevation(4)

    >a
      text-decoration: none

  &__navigation
    elevation(2)
    display: inline-flex
    justify-content: center
    align-items: center
    text-decoration: none
    height: 2rem

    border-radius: 4px
    width: 2rem
    margin: .3rem 10px

    .v-icon
      font-size: 2rem
      transition: $secondary-transition
      vertical-align: middle

    &--disabled
      opacity: .6
      pointer-events: none

  &__more
    margin: .3rem
    display: inline-flex
    align-items: flex-end
    justify-content: center
    height: 2rem
    width: 2rem