@import '../../styles-new/mixins.less';
@import '../../theme/components/card.less';

@cardPrefixCls: im-card;

.@{cardPrefixCls} {
  padding: 0 @card-padding-horizontal;
  min-height: 44 * @hd;
  // padding-bottom: 10*@hd;
  display: flex;
  flex-direction: column;
  background-color: @fill-base;
  border-radius: @card-border-radius ;

  &:not(.@{cardPrefixCls}-full) {
    .hairline('all', @card-divider-color, @radius-model);
    // border: 0.5px solid @card-divider-color;
  }

  &&-full {
    position: relative;
    // .hairline('top');
    // .hairline('bottom');

    &-seperator-line {
      &:after {
        content: '';
        position: absolute;
        // background-color: @border-color-base;
        display: block;
        z-index: 1;
        bottom: 0;
        left: @h-spacing-lg;
        width: calc(100% - 30*@hd);
        height: 1px;
        border-bottom: 0.5px solid @card-divider-color;
        // transform-origin: 50% 50%;
        // transform: scaleY(0.33);
        // .hairline('bottom',  @border-color-base)
      }
    }
  }

  &-header {
    display: flex;
    align-items: center;
    font-size: @font-size-base;
    font-weight: 400;
    padding: @v-spacing 0;
    position: relative;
    // margin: 0 @h-spacing-lg;

    &-line {
      // .hairline('bottom', red)
      border-bottom: 0.5px solid @card-divider-color;
      position: relative;
    }

    // &-line::after {
    //   background-color: @card-divider-color;
    //   bottom: 0;
    //   content: "";
    //   display: block;
    //   height: 1PX;
    //   left: 0;
    //   position: absolute;
    //   right: auto;
    //   top: auto;
    //   width: 100%;
    //   transform: scaleY(.5);
    //   transform-origin: 0 0;
    // }

    &-content {
      flex: 1;
      text-align: left;
      color: @card-title-color;
      display: flex;
      align-items: center;
      font-size: @card-title-font-size;
      line-height: 28 *@hd;

      img {
        margin-right: 5px;
        width: @card-icon;
        height: @card-icon;
      }
    }

    &-extra {
      flex: 1;
      text-align: right;
      font-size: @card-sec-title-font-size;
      //font-size: @font-size-heading;
      color: @card-sec-title-color;
    }
  }

  &-body-full {
    position: relative;
    // .hairline('top');
    padding: 10px 0px 0px;
    font-size: @font-size-base-sm;
    color: @color-text-secondary;
    min-height: 40 * @hd;
    flex: 1;

  }

  &-body {
    position: relative;
    padding: @v-spacing-sm 0px 0px;
    font-size: @card-content-font-size;
    color: @card-content-color;
    min-height: 40 * @hd;
    flex: 1;
    // &:before {
    //   content: '';
    //   position: absolute;
    //   background-color: @border-color-base;
    //   display: block;
    //   z-index: 1;
    //   top: 0;
    //   right: auto;
    //   bottom: auto;
    //   left: @h-spacing-lg;
    //   width: calc(100% - 30px);
    //   height: 1px;
    //   transform-origin: 50% 50%;
    //   transform: scaleY(0.33);
    // }
  }

  // 没有分割线
  //  &-noline {
  //   position: relative;
  //   padding: @v-spacing-sm @h-spacing-lg  0px @h-spacing-lg;
  //   font-size: @font-size-base-sm;
  //   color: @color-text-secondary;
  //   min-height: 40 * @hd;
  //   flex: 1;

  // }

  &-footer {
    font-weight: 400;
    padding-bottom: 10px;
    display: flex;

    &-content {
      flex: 1;
      font-size: @card-bottom-title-font-size;
      color: @card-bottom-title-color;
    }

    &-extra {
      flex: 1;
      text-align: right;
      font-size: @card-bottom-sec-title-font-size;
      color: @card-bottom-sec-title-color;
    }
  }
}