@import '../../style/mixins';
@import '../../style/themes/default';

@flexPrefixCls: am-flexbox;
@gridPrefixCls: am-grid;
/* flexbox */
.@{gridPrefixCls} {
  .@{flexPrefixCls} {
    background: @fill-base;
    .@{flexPrefixCls}-item {
      margin-left: 0;
      &.@{gridPrefixCls}-item {
        &:active {
          background-color: @fill-tap;
        }
      }
      .@{gridPrefixCls}-item-contain {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        .@{gridPrefixCls}-icon {
          margin-top: @v-spacing-md;
          height: 28%;
        }
        .@{gridPrefixCls}-text {
          margin-top: @v-spacing-md;
          font-size: @font-size-caption-sm;
          color: @color-text-base;
          text-align: center;
        }
        &.column-num-3 {
          .@{gridPrefixCls}-text {
            font-size: @font-size-caption;
          }
        }
        &.column-num-2 {
          .@{gridPrefixCls}-text {
            margin-top: @v-spacing-lg;
            font-size: @font-size-display-sm;
          }
        }
      }
    }
  }
  &.@{gridPrefixCls}-line {
    .@{flexPrefixCls} {
      position: relative;
      .hairline-bottom(@border-color-base);
      &:last-child {
        .hairline-remove-right-bottom();
      }
      .@{flexPrefixCls}-item {
        position: relative;
        .hairline-right(@border-color-base);
        &:last-child {
          .hairline-remove-right-bottom();
        }
      }
    }
    .@{gridPrefixCls}-carousel-page {
      border-right: @border-width-sm solid @border-color-base;
      &:first-child {
        border-left: @border-width-sm solid @border-color-base;
      }
    }
  }

}