/* 图标组件 */
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32rpx;
  height: 32rpx;
}

.icon-text {
  display: inline-flex;
  align-items: center;
}

.icon-text .icon {
  margin-right: 8rpx;
}

/* 图标尺寸 */
.icon-xs { width: 24rpx; height: 24rpx; }
.icon-sm { width: 32rpx; height: 32rpx; }
.icon-md { width: 40rpx; height: 40rpx; }
.icon-lg { width: 48rpx; height: 48rpx; }
.icon-xl { width: 64rpx; height: 64rpx; }

/* 图标颜色 */
.icon-primary { color: #07C160; }
.icon-danger { color: #FA5151; }
.icon-warning { color: #FFC300; }
.icon-info { color: #10AEFF; }
.icon-dark { color: #333333; }
.icon-light { color: #999999; }
.icon-white { color: #FFFFFF; }

/* 图标容器 */
.icon-circle {
  border-radius: 50%;
  background-color: #F7F7F7;
  padding: 8rpx;
}

.icon-circle-primary { background-color: #E8F7ED; color: #07C160; }
.icon-circle-danger { background-color: #FEECEC; color: #FA5151; }
.icon-circle-warning { background-color: #FEF7E6; color: #FFC300; }
.icon-circle-info { background-color: #E8F6FE; color: #10AEFF; }