@import '../../style/themes/default';
@import '../../style/mixins/index';

@descriptions-prefix-cls: ~'@{ant-prefix}-descriptions';

@descriptions-default-padding: 16px 24px;
@descriptions-middle-padding: 12px 24px;
@descriptions-small-padding: 8px 16px;

.@{descriptions-prefix-cls} {
  &-title {
    margin-bottom: 20px;
    color: @heading-color;
    font-weight: bold;
    font-size: @font-size-lg;
    line-height: @line-height-base;
  }

  &-view {
    width: 100%;
    overflow: hidden;
    border-radius: @border-radius-base;
    table {
      width: 100%;
    }
  }

  &-row {
    > td {
      padding-bottom: 16px;
    }
    &:last-child {
      border-bottom: none;
    }
  }

  &-item-label {
    color: @heading-color;
    font-size: @font-size-base;
    line-height: @line-height-base;
    white-space: nowrap;
    &::after {
      position: relative;
      top: -0.5px;
      margin: 0 8px 0 2px;
      content: ':';
    }
  }

  &-item-content {
    display: table-cell;
    color: @text-color;
    font-size: @font-size-base;
    line-height: @line-height-base;
  }

  &-item {
    padding-bottom: 0;
    > span {
      display: inline-block;
    }
    .@{descriptions-prefix-cls}-item-label {
      float: left;
      padding: 0 !important;
    }
    .@{descriptions-prefix-cls}-item-content {
      float: left;
      padding: 0 !important;
    }
  }

  // padding setting
  .@{descriptions-prefix-cls}-item-label,
  .@{descriptions-prefix-cls}-item-content {
    padding: @descriptions-default-padding;
  }

  &.bordered.middle {
    .@{descriptions-prefix-cls}-item-label,
    .@{descriptions-prefix-cls}-item-content {
      padding: @descriptions-middle-padding;
    }
  }
  &.bordered.small {
    .@{descriptions-prefix-cls}-item-label,
    .@{descriptions-prefix-cls}-item-content {
      padding: @descriptions-small-padding;
    }
  }
  &.bordered {
    .@{descriptions-prefix-cls}-view {
      border: 1px solid @border-color-split;
    }
    .@{descriptions-prefix-cls}-item-label,
    .@{descriptions-prefix-cls}-item-content {
      border-right: 1px solid @border-color-split;
    }

    .@{descriptions-prefix-cls}-item-label:last-child,
    .@{descriptions-prefix-cls}-item-content:last-child {
      border-right: none;
    }

    .@{descriptions-prefix-cls}-row {
      border-bottom: 1px solid @border-color-split;
      &:last-child {
        border-bottom: none;
      }
    }

    .@{descriptions-prefix-cls}-item-label {
      background-color: #fafafa;
      &::after {
        display: none;
      }
    }
  }
}