.v-pagination {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  user-select: none;

  .v-total {
    margin: 0 10px;
    font-size: 13px;
  }

  .v-sizes {
    margin: 0 5px;
  }

  .v-jumper {
    margin: 0 5px;
  }

  .v-prev {
    margin: 0 5px;
    display: inline-block;
    vertical-align: middle;

    &.v-disabled {
      cursor: not-allowed;
      color: #c0c4cc;
    }

    &:not(.v-disabled):hover {
      color: #409eff;
      cursor: pointer;
    }
  }

  .v-next {
    margin: 0 5px;
    display: inline-block;
    vertical-align: middle;

    &.v-disabled {
      cursor: not-allowed;
      color: #c0c4cc;
    }

    &:not(.v-disabled):hover {
      color: #409eff;
      cursor: pointer;
    }
  }

  .v-content {
    display: inline-block;
    margin: 0;
    padding: 0;
    list-style-type: none;

    & > li {
      display: inline-block;
      width: 30px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      vertical-align: middle;
      color: #606266;
      font-size: 13px;

      &.v-selected {
        color: #409eff;
      }

      &:hover {
        cursor: pointer;
        color: #409eff;
      }

      &.v-btns {
        margin: 0 5px;
        border-radius: 5px;
        background-color: #f4f4f5;
        color: #606266;

        &:hover {
          color: #409eff;
        }

        &.v-selected {
          background-color: #409eff;
          color: #fff;

          &:hover {
            color: #fff;
          }
        }
      }

      & > .v-value-content {
        position: relative;
        width: 100%;
        height: 100%;
      }

      & > .v-leftIcon {

        &:before {
          content: '...'
        }

        &:hover:before {
          content: '<<';
        }
      }

      & > .v-rightIcon {

        &:before {
          content: '...'
        }

        &:hover:before {
          content: '>>';
        }
      }

    }
  }
}