@import 'mixins/mixins';
@import 'common/var';
@import 'descriptions-item';

@include b(descriptions) {
  box-sizing: border-box;
  font-size: $--font-size-body-3;
  color: $--color-text-1;

  @include e(header) {
    display: flex;
    justify-content: space-between;
    align-items: left;
    margin-bottom: $--descriptions-header-margin-bottom;

    @include e(title) {
      font-size: $--descriptions-title-font-size;
      font-weight: $--font-weight-700;
    }
  }

  @include e(body) {
    color: $--color-text-1;
    background-color: $--color-white;

    table {
      border-collapse: collapse;
      width: 100%;

      th {
        color: $--badge-disabled-font-color;
        font-weight: $--font-weight-400;
      }
      td {
        font-weight: $--font-weight-400;
      }
      th, td {
        box-sizing: border-box;
        line-height: 22px;
        height: 22px;
        padding-bottom: 16px;
      }
    }
  }

  .is-vertical {
    th{
      padding: 12px 12px 2px;
    }
    td {
      padding: 0px 12px 0px;
      height: 22px;
      line-height: 22px;

    }
  }

  .is-bordered {
    border: $--descriptions-table-border;
    // border-radius: 4px;
    border-radius: $--border-radius-medium;
    overflow: hidden;
    tr.el-descriptions-row {
      border-bottom: $--descriptions-table-border;
    }
    tbody:last-child {
      tr.el-descriptions-row:last-child {
        border-bottom: none;
      }
    }
    th, td {
      padding: 7px 20px;
      border-right: $--descriptions-table-border;
    }
    th.el-descriptions-item__label:last-child,
    td.el-descriptions-item__content:last-child {
      border-right: none;
    }
  }

  .is-left.is-bordered {
    .el-descriptions-item__label, .el-descriptions-item__content {
      text-align: left;
    }
  }
  .is-center.is-bordered {
    .el-descriptions-item__label, .el-descriptions-item__content {
      text-align: center;
    }
  }
  .is-right.is-bordered {
    .el-descriptions-item__label, .el-descriptions-item__content {
      text-align: right;
    }
  }

  .left.el-descriptions-item__content{
    text-align: left!important;
  }
  .center.el-descriptions-item__content{
    text-align: center!important;
  }
  .right.el-descriptions-item__content{
    text-align: right!important;
  }
}