@import '../../../theme/styles/default';
@ad-desc-list-prefix: ~'.ad-desc-list';
@ad-desc-term-color: @heading-color;
@ad-desc-detail-color: @text-color;
@ad-desc-field-bottom: 16px;

@{ad-desc-list-prefix} + @{ad-desc-list-prefix} {
  margin-top: @ad-desc-field-bottom;
}

@{ad-desc-list-prefix} {
  display: block;
  // offset the padding-bottom of last row
  .ant-row {
    margin-bottom: -16px;
    overflow: hidden;
  }
  &__title {
    font-size: 14px;
    color: @heading-color;
    font-weight: 500;
    margin-bottom: @ad-desc-field-bottom;
  }
  &__term {
    line-height: 22px;
    padding-bottom: @ad-desc-field-bottom;
    margin-right: 8px;
    color: @ad-desc-term-color;
    white-space: nowrap;
    display: table-cell;
    &:after {
      content: ':';
      margin: 0 8px 0 2px;
      position: relative;
      top: -0.5px;
    }
  }
  &__detail {
    line-height: 22px;
    width: 100%;
    padding-bottom: @ad-desc-field-bottom;
    color: @ad-desc-detail-color;
    display: table-cell;
    word-break: break-all;
  }
  &__default {
    &:before {
      content: '-';
    }
  }
  &.small {
    // offset the padding-bottom of last row
    .ant-row {
      margin-bottom: -8px;
    }
    @{ad-desc-list-prefix}__title {
      margin-bottom: 12px;
      color: @text-color;
    }
    @{ad-desc-list-prefix}__term,
    @{ad-desc-list-prefix}__detail {
      padding-bottom: 8px;
    }
  }
  &.large {
    @{ad-desc-list-prefix}__title {
      font-size: 16px;
    }
  }
  &.vertical {
    @{ad-desc-list-prefix}__term {
      padding-bottom: 8px;
      display: block;
    }
    @{ad-desc-list-prefix}__detail {
      display: block;
    }
  }
}