@import '../../styles/index.less';

@paddingWrapper: 14 * @hd;

@prefixClsExtends: alitajs-dform-card-extends;

.@{prefixCls} {
  background-color: @fill-base;
  border-radius: 6 * @hd;
  &-header {
    display: flex;
    flex-direction: row;
    padding: 16 * @hd 16 * @hd 0;
    &-title {
      flex: 1;
      margin-right: 10 * @hd;
      color: @color-text-base;
      font-weight: 600;
      font-size: 17 * @hd;
    }
    &-icon {
      padding-left: 10 * @hd;
    }
  }
}

.@{prefixCls}-group {
  // 子元素下如果还有嵌套group的话，应该在子元素增加padding-bottom;
  .@{prefixCls}-group:last-child {
    padding-bottom: @paddingWrapper;
  }
}
.@{prefixCls}-card {
  // margin: 0 12 * @hd;
  padding-top: @paddingWrapper;
  overflow: hidden;
  background: #fff;
  border-radius: 6 * @hd;

  &-border {
    border: 1 * @hd solid rgb(237, 240, 245);
  }

  &-title-box {
    display: flex;
    flex-direction: row;
    padding: 0 12 * @hd;
  }
  &-require {
    color: #ff4848;
    font-size: 17 * @hd;
  }
  &-title {
    flex: 1;
    color: #333;
    font-weight: bold;
    font-size: 18 * @hd;
  }

  .@{prefixCls}-content:last-child {
    .@{prefixCls}-cell {
      border-bottom: none !important;
    }
  }

  &-extends-icon {
    font-size: 10 * @hd;
    display: flex;
    align-items: center;
    padding-left: 5 * @hd;
  }
}

.@{prefixClsExtends} {
  &-animation {
    display: none;
  }
  &-entered {
    display: block;
  }
  &-body {
    margin-top: 12 * @hd;
    &-enter {
      .@{prefixClsExtends}-animation {
        display: block;
        max-height: 0;
      }
      &-active {
        .@{prefixClsExtends}-animation {
          display: block;
          max-height: 100vh;
          transition: max-height 200ms linear;
        }
      }
      &-done {
        .@{prefixClsExtends}-animation {
          display: block;
          max-height: 100vh;
        }
      }
    }

    &-exit {
      .@{prefixClsExtends}-animation {
        display: block;
        max-height: 100vh;
      }
      &-active {
        .@{prefixClsExtends}-animation {
          display: block;
          max-height: 1px;
          transition: max-height 200ms linear;
        }
      }
      &-done {
        .@{prefixClsExtends}-animation {
          display: none;
          max-height: 0;
        }
      }
    }
  }
}
