#{$biz-css-prefix}block {
  background: var(--color-surface);
  border-color: var(--block-border-color);
  border-width: var(--block-border-width);
  border-radius: var(--block-border-radius);
  border-style: solid;
  display: flex;
  flex-direction: column;

  & > * {
    display: none;
  }

  & > #{$biz-css-prefix}card,
  &-cell > #{$biz-css-prefix}card {
    flex-grow: 1;
  }

  &:not(:first-child) {
    margin-top: var(--page-gutter-row);
  }

  &-header {
    display: block;
    padding: var(--block-padding);
  }

  &-body {
    display: grid;
    grid-row-gap: var(--block-padding);
    grid-column-gap: var(--block-padding);
    padding: var(--block-padding);
    flex: 1;
  }

  &-no-padding {
    padding: 0;
    #{$biz-css-prefix}block-title,
    #{$biz-css-prefix}block-body {
      padding: 0;
    }
  }

  &-no-border {
    border: none;
  }

  &-lining {
    background: var(--color-lining);
  }

  &-transparent {
    background: transparent;
  }

  &-title#{$biz-css-prefix}p {
    margin: 0;
  }

  &-title {
    padding-bottom: 0;
    height: var(--box-container-large-min-height);
  }

  &-cell {
    display: flex;
    flex-direction: column;
  }

  & &-cell {
    &#{$biz-css-prefix}block-cell-transparent {
      background: transparent;
      border-width: 0;
      padding: 0;
    }
    &#{$biz-css-prefix}block-cell-card {
      background: var(--color-surface);
      border-color: var(--block-border-color);
      border-width: var(--block-border-width);
      border-radius: var(--block-border-radius);
      border-style: solid;
      padding: var(--page-padding-ver) var(--page-padding-hoz);
    }
  }

  &-cell-hoz,
  &-cell-ver,
  &-cell-flow {
    display: grid;
    grid-row-gap: var(--block-padding);
    grid-column-gap: var(--block-padding);
  }

  & &-cell-item {
    &#{$biz-css-prefix}block-cell-item-transparent {
      background: transparent;
      border-width: 0;
      padding: 0;
    }
    &#{$biz-css-prefix}block-cell-item-card {
      background: var(--color-surface);
      border-color: var(--block-border-color);
      border-width: var(--block-border-width);
      border-radius: var(--block-border-radius);
      border-style: solid;
      padding: var(--page-padding-ver) var(--page-padding-hoz);
    }
  }

  &-cell-body {
    padding-top: 0;
    flex: 1;
  }

  &-divider {
    display: block;
    margin: 0;
    width: 100%;
    height: 0;
    border-top: 0;
    border-right: 0;
    border-left: 0;
    border-bottom: 1px solid var(--block-border-color);

    &-ver {
      display: inline-block;
      vertical-align: top;
      height: 100%;
      width: 0;
      border-bottom: 0;
      border-right: 1px solid var(--block-border-color);
    }
  }

  &-card {
    background: transparent;
    border: none;
    #{$biz-css-prefix}block-header {
      padding: 0;
      margin-bottom: var(--s-2);
    }

    #{$biz-css-prefix}block-body {
      padding: 0;
      grid-row-gap: var(--page-gutter-row);
      grid-column-gap: var(--page-gutter-column);
    }

    #{$biz-css-prefix}block-cell {
      background: var(--color-surface);
      border-color: var(--block-border-color);
      border-width: var(--block-border-width);
      border-radius: var(--block-border-radius);
      border-style: solid;
      padding: var(--page-padding-ver) var(--page-padding-hoz);
    }
  }
  // 不写mode 默认就是inset，也就是外围样式
  &-inset {
  }
  &-transparent {
    background: transparent;
    border: none;

    #{$biz-css-prefix}block-header,
    #{$biz-css-prefix}block-body {
      padding: 0;
    }

    #{$biz-css-prefix}block-header {
      margin-bottom: var(--s-2);
    }
  }
}