@card-prefix: ~'@{icecream-prefix}-card';
@card-padding: @icecream-gap-md;
@card-small-padding: @icecream-gap-sm;

.@{card-prefix} {
  display: flex;
  flex-direction: column;
  box-shadow: @icecream-box-shadow-sm;
  background: @icecream-white;

  &-title {
    .extendBaseEnhanced();

    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: @card-padding;
    .setFontSize(@icecream-font-size-title);
    font-weight: @icecream-bold;

    &-extra {
      position: relative;
      display: flex;
      align-items: center;
      font-weight: 400;
      .setFontSize(@icecream-font-size-sm);
    }
  }

  &-content {
    flex: 1;
    padding: @card-padding;
    .setFontSize(@icecream-font-size-main);
  }

  &-title + &-content {
    padding-top: 0;
  }

  &-small {
    .@{card-prefix} {
      &-title {
        .extendBaseEnhanced();

        padding: @card-small-padding;
        .setFontSize(@icecream-font-size-md);
      }

      &-content {
        padding: @card-small-padding;
        .setFontSize(@icecream-font-size-sm);
      }
    }

    .@{card-prefix}-title + .@{card-prefix}-content {
      padding-top: 0;
    }
  }
}

.@{card-prefix}-bordered {
  border: 1px solid @icecream-color-grey-5;
  box-shadow: none;

  .@{card-prefix} {
    &-title {
      border-bottom: 1px solid @icecream-color-grey-5;

      &-no-border {
        // 为了保持高度不变
        border-bottom: 1px solid transparent;
      }
    }

    &-content {
      padding-top: @card-padding;
    }
  }

  .@{card-prefix}-title-no-border + .@{card-prefix}-content {
    padding-top: 0;
  }

  &.@{card-prefix}-small {
    .@{card-prefix}-content {
      padding-top: @card-small-padding;
    }
  }
}