@import '../common/index.wxss';

.van-grid-item {
  position: relative;
  float: left;
  box-sizing: border-box;
}

.van-grid-item--square {
  height: 0;
}

.van-grid-item__content {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  box-sizing: border-box;
  height: 100%;
  padding: 32rpx 16rpx;
  padding: var(--grid-item-content-padding,32rpx 16rpx);
  background-color: #fff;
  background-color: var(--grid-item-content-background-color,#fff);
}

.van-grid-item__content:after {
  z-index: 1;
  border-width: 0 2rpx 2rpx 0;
  border-bottom-width: var(--border-width-base,2rpx);
  border-right-width: var(--border-width-base,2rpx);
  border-top-width: 0;
}

.van-grid-item__content--surround:after {
  border-width: 2rpx;
  border-width: var(--border-width-base,2rpx);
}

.van-grid-item__content--center {
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}

.van-grid-item__content--square {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
}

.van-grid-item__content--horizontal {
  -webkit-flex-direction: row;
  flex-direction: row;
}

.van-grid-item__content--horizontal .van-grid-item__text {
  margin: 0 0 0 16rpx;
}

.van-grid-item__content--reverse {
  -webkit-flex-direction: column-reverse;
  flex-direction: column-reverse;
}

.van-grid-item__content--reverse .van-grid-item__text {
  margin: 0 0 16rpx;
}

.van-grid-item__content--horizontal.van-grid-item__content--reverse {
  -webkit-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

.van-grid-item__content--horizontal.van-grid-item__content--reverse .van-grid-item__text {
  margin: 0 16rpx 0 0;
}

.van-grid-item__content--clickable:active {
  background-color: #f2f3f5;
  background-color: var(--grid-item-content-active-color,#f2f3f5);
}

.van-grid-item__icon {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  font-size: 52rpx;
  font-size: var(--grid-item-icon-size,52rpx);
  height: 52rpx;
  height: var(--grid-item-icon-size,52rpx);
}

.van-grid-item__text {
  word-wrap: break-word;
  color: #646566;
  color: var(--grid-item-text-color,#646566);
  font-size: 24rpx;
  font-size: var(--grid-item-text-font-size,24rpx);
}

.van-grid-item__icon+.van-grid-item__text {
  margin-top: 16rpx;
}