@import '../../base.less';

@import './_var.less';

@import './_mixin.less';

@import '../../mixins/_reset.less';

.@{prefix}-descriptions {
  .reset;

  @root: ~'.@{prefix}-descriptions';

  &__header {
    color: @text-color-primary;
    font: @font-title-medium;
    margin-bottom: @descriptions-header-margin;
    font-weight: 600;
  }

  &__body {
    border-collapse: collapse;
    font: @font-body-medium;
    width: 100%;

    .generate-padding(l, @descriptions-borderless-padding-l);
    .generate-padding(m, @descriptions-borderless-padding-m);
    .generate-padding(s, @descriptions-borderless-padding-s);

    & @{root}__label {
      color: @text-color-placeholder;
    }

    &--fixed {
      table-layout: fixed;
    }

    &--border {
      > tbody {
        > tr {
          > td {
            border: @descriptions-td-border;
          }
        }
      }

      .generate-padding(l, @descriptions-border-padding-l);
      .generate-padding(m, @descriptions-border-padding-m);
      .generate-padding(s, @descriptions-border-padding-s);

      @{root}__label {
        background-color: @bg-color-secondarycontainer;

        &:hover {
          background-color: @bg-color-container-hover;
        }
      }
    }

    :not(&--fixed):not(&--border) {
      @{root}__label {
        padding-right: @comp-paddingLR-l;
      }
    }
  }
}