@import './common/var.css';

.van-pagination {
  display: flex;
  text-align: center;
  line-height: 40px;
  font-size: 14px;

  &__item {
    flex: 1;
    height: 40px;
    min-width: 36px;
    color: $blue;
    background-color: $white;
    box-sizing: border-box;
    user-select: none;

    &:active {
      background-color: $blue;
      color: $white;
      opacity: 0.8;
    }

    &::after {
      border-width: 1px 0 1px 1px;
    }

    &:last-child::after {
      border-right-width: 1px;
    }
  }

  &__prev,
  &__next {
    &.van-pagination__item {
      padding: 0 5px;
    }
  }

  &__page {
    flex-grow: 0;

    &.van-pagination--active {
      background-color: $blue;
      color: $white;
    }
  }

  &--disabled {

    &.van-pagination__item {
      background-color: $background-color;
      color: $gray-darker;
      opacity: 0.6;
    }
  }

  &__page-desc {
    flex: 1;
    height: 40px;
    color: $gray-darker;
  }
}

.van-pagination-simple {

  .van-pagination__prev,
  .van-pagination__next {

    &.van-pagination__item::after {
      border-width: 1px;
    }
  }
}