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

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

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

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

.van-grid-item__content:after {
  border-width: 0 1px 1px 0;
  z-index: 1
}

.van-grid-item__content--surround:after {
  border-width: 1px
}

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

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

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

.van-grid-item__content--horizontal .van-grid-item__text {
  margin: 0 0 0 8px
}

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

.van-grid-item__content--reverse .van-grid-item__text {
  margin: 0 0 8px
}

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

.van-grid-item__content--horizontal.van-grid-item__content--reverse .van-grid-item__text {
  margin: 0 8px 0 0
}

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

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

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

.van-grid-item__icon+.van-grid-item__text {
  margin-top: 8px
}