@import 'variable';

#{$biz-css-prefix} {
  @each $bgType in $backgroundTypes {
    &-bg--#{$bgType} {
      background: var(--color-#{$bgType});
    }
  }

  &cell {
    box-sizing: border-box;
    // 1.去掉 flex 场景： cell 单独定高，如果有 flex 属性会影响高度
    // 2. 保留 flex 场景：在 block 容器中，放入希望 cell 容器可以撑满父级容器的高度
    // flex: 1 1 auto;

    &-align {
      &--left {
        align-items: flex-start;
      }
      &--center {
        align-items: center;
      }
      &--right {
        align-items: flex-end;
      }

      &-stretch {
        & > *,
        & > text {
          margin-left: 0;
          margin-right: 0;
        }
      }
    }
  }

  &row-flex {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    flex: 1 1 auto;
    gap: var(--page-grid-gap);
    // 行容器下的子容器 flex 属性，只在 validWidth 时生效
    // 并且只有前两个参数 0 0，第三个参数需要根据 validWidth 设置，所以单独在子容器里面设置
    > #{$biz-css-prefix}flex-item-valid-width {
      flex: 0 0;
    }

    > #{$biz-css-prefix}fixed-container#{$biz-css-prefix}flex-item-valid-height {
      flex: 1 1 0;
    }
  }

  &col-flex {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    flex: 1 1;
    gap: var(--page-grid-gap);
    // 列容器下的子容器 flex 属性，只在 validHeight 时生效
    > #{$biz-css-prefix}flex-item-valid-height {
      flex: 0 0 auto;
    }
  }

  &row-flex,
  &col-flex {
    > #{$biz-css-prefix}flex-item {
      &-default {
        flex: 1 1 0 !important;
      }
      &-auto-fit {
        flex: 0 0 auto;
      }
    }
  }
}