@import (reference) './variable.less';

.@{gridPrefix} {
  padding: 24 * @rpx;
  box-sizing: border-box;
  &-columns-3 {
    padding: 24 * @rpx 0;
  }
  &-default {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  &-scroll {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
  }
  &-item {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex-shrink: 0;
    position: relative;
    &-line {
      .hairline('right',@border-color);
    }
    &-vertical-space {
      margin-bottom: @vertical-space;
    }
    &-columns-5 {
      width: 20%;
    }
    &-columns-4 {
      width: 25%;
    }
    &-columns-3 {
      width: 33.3%;
    }
    &-columns-2 {
      width: 50%;
    }
    &-horizontal {
      justify-content: center;
      text-align: left;
      position: relative;
      min-height: @icon-size;
      padding-left: 80 * @rpx;
      .@{gridPrefix}-item-img,
      .@{gridPrefix}-item-icon {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        margin: auto;
      }
      .@{gridPrefix}-item-title {
        margin-top: 0;
      }
    }
    &-columns-scroll {
      width: @columnsscroll-width;
    }
    &-icon {
      &-circle {
        border-radius: 50%;
        overflow: hidden;
      }
      &-icon {
        font-size: @icon-size;
      }
      &-image {
        width: @icon-size;
        height: @icon-size;
      }
    }
    &-title {
      font-size: 26 * @rpx;
      color: @title-color;
      line-height: 37 * @rpx;
      width: 100%;
      margin-top: 16 * @rpx;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    &-description {
      font-size: @description-size;
      color: @description-color;
      line-height: 33 * @rpx;
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      &:empty {
        display: none;
      }
    }
  }
}