@import (reference) './variable.less';
@import '../style/mixins/hairline.less';

@containerPrefix: ant-container;

.@{containerPrefix} {
  border-radius: @container-radius;
  margin-bottom: 24 * @rpx;
  &-headerInBox {
    background-color: @container-background-color;
    .@{containerPrefix}-header {
      padding: 0 @container-spacing;
      .@{containerPrefix}-header-title,
      .@{containerPrefix}-header-right {
        position: relative;
        .hairline('bottom');
      }
    }
  }
  &-content {
    padding: @container-spacing;
    background-color: @container-background-color;
    border-radius: @container-radius;
  }
  &-header {
    display: flex;
    &-title {
      font-size: @container-header-size;
      font-weight: bold;
      color: @container-header-color;
      display: flex;
      align-items: center;
      height: 96 * @rpx;
      flex: 1;
      &:empty {
        display: none;
      }
    }

    &-right {
      color: @COLOR_TEXT_ASSIST;
      display: flex;
      align-items: center;
      height: 96 * @rpx;
      justify-content: flex-end;
      &:empty {
        display: none;
      }
    }
    .@{containerPrefix}-header-title:empty
      + .@{containerPrefix}-header-right:not(:empty) {
      flex: 1;
    }
  }
}