@import "../../base.less";

@import "./_var.less";

@import "./_mixin.less";

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

@componentName: descriptions;

.@{prefix}-@{componentName} {
  .reset;

  &__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;

    &.@{prefix}-size-l {
      td {
        padding: @descriptions-padding-l;
      }
    }

    &.@{prefix}-size-m {
      td {
        padding: @descriptions-padding-m;
      }
    }

    &.@{prefix}-size-s {
      td {
        padding: @descriptions-padding-s;
      }
    }

    & .@{prefix}-@{componentName}__label {
      color: @text-color-placeholder;
    }

    &--border {
      td {
        border: @descriptions-td-border;
      }

      .@{prefix}-@{componentName}__label {
        background-color: @bg-color-secondarycontainer;

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