@import (reference) "../style/themes/default.less";

.am-container {
  box-sizing: border-box;
  width: 100%;
  border-radius: @corner-radius-lg;
  border-radius: var(--am-container-corner-radius, @corner-radius-lg);
  padding: @v-spacing-large 0;
  padding: var(--am-container-padding-v, @v-spacing-large) 0;
  background: @color-fill-grey-inverse;
  background: var(--am-container-background, @color-fill-grey-inverse);

  &-content-box {
    padding: 0 @h-spacing-large;
    padding: 0 var(--am-container-padding-h, @h-spacing-large);
  }

  &-content {
    display: flex;
    flex-wrap: wrap;
    // 设置子元素的 margin 以及 borderRadius
    > :nth-child(1n + 1) {
      flex-grow: 1;
      width: 0;
      margin-left: @v-spacing-standard;
      margin-left: var(--am-container-padding-item, @v-spacing-standard);
      border-radius: @corner-radius-md;
      border-radius: var(--am-container-item-corner-radius, @corner-radius-md);
    }
    > :nth-child(1) {
      margin-left: 0;
    }
  }

  // 如果 container 嵌套，则重置margin及padding
  & &-content & {
    flex: 0 0 100%;
    margin-top: @h-spacing-large;
    margin-top: var(--am-container-padding-h, @h-spacing-large);
    margin-left: 0;
    padding: 0;
  }

  // 一个比较特殊的一拖二布局，用户设定主元素的高度和宽度，两个副元素的的高宽，随着主元素的高宽做相应调整
  // 副元素的高度为 (主元素高度 - padding) / 2
  // 副元素的宽度为 （100% - 主元素的宽度 - padding）
  &-content-grid {
    display: flex;
    > :nth-child(1) {
      width: 432 * @pixelSize;
      border-radius: @corner-radius-md;
      border-radius: var(--am-container-item-corner-radius, @corner-radius-md);
    }
  }

  &-content-grid-sub {
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    padding-left: @v-spacing-standard;
    padding-left: var(--am-container-padding-item, @v-spacing-standard);
    flex-grow: 1;
    > :nth-child(1n + 1) {
      flex-grow: 1;
      margin-top: @v-spacing-standard;
      margin-top: var(--am-container-padding-item, @v-spacing-standard);
      border-radius: @corner-radius-md;
      border-radius: var(--am-container-item-corner-radius, @corner-radius-md);
    }
    > :nth-child(1) {
      margin-top: 0;
    }
  }
}
