<script setup>
import { descriptionsItemProps } from "./descriptions";
defineOptions({
  name: "YhDescriptionsItem"
});
defineProps(descriptionsItemProps);
</script>

<template>
  <slot />
</template>

<style>
@charset "UTF-8";
/**
 * YH-UI Sass Variables
 * 原具体的 CSS 变量输出规则 (:root, html.dark 等) 已移至 root.scss，以防止各组件样式编译时产生重复的全局变量 CSS 冗余。
 */
.yh-descriptions {
  --yh-descriptions-item-font-size: var(--yh-component-size-default-font, 14px);
  --yh-descriptions-padding: var(--yh-component-size-default-padding, 16px);
  --yh-descriptions-border-color: var(--yh-border-color-lighter, #ebeef5);
  box-sizing: border-box;
  color: var(--yh-text-color-primary, #303133);
}
.yh-descriptions--large {
  --yh-descriptions-item-font-size: var(--yh-component-size-large-font);
  --yh-descriptions-padding: var(--yh-component-size-large-padding);
}

.yh-descriptions--small {
  --yh-descriptions-item-font-size: var(--yh-component-size-small-font);
  --yh-descriptions-padding: var(--yh-component-size-small-padding);
}

.yh-descriptions__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--yh-spacing-md, 16px);
}

.yh-descriptions__title {
  color: var(--yh-text-color-primary);
  font-weight: 700;
  font-size: var(--yh-font-size-md, 16px);
}

.yh-descriptions__body {
  background-color: transparent;
  border-radius: 0;
}

.yh-descriptions__table {
  width: 100%;
  margin: 0;
  padding: 0;
  border-radius: 0;
  table-layout: auto;
  border-collapse: collapse;
  border-spacing: 0;
}
.yh-descriptions__table.is-fixed {
  table-layout: fixed;
}

.yh-descriptions__label {
  box-sizing: border-box;
  color: var(--yh-text-color-regular);
  font-weight: 400;
  font-size: var(--yh-descriptions-item-font-size);
  padding: var(--yh-descriptions-padding);
  text-align: left;
  vertical-align: middle;
  background-color: transparent;
  border-radius: 0;
  white-space: nowrap;
}

.yh-descriptions__content {
  box-sizing: border-box;
  color: var(--yh-text-color-primary);
  font-size: var(--yh-descriptions-item-font-size);
  padding: var(--yh-descriptions-padding);
  vertical-align: middle;
  word-break: normal;
  overflow-wrap: break-word;
  border-radius: 0;
}

.yh-descriptions:not(.is-bordered) .yh-descriptions__label {
  padding-left: 0;
}

.yh-descriptions.is-bordered .yh-descriptions__table {
  border: 1px solid var(--yh-descriptions-border-color);
}

.yh-descriptions.is-bordered .yh-descriptions__label, .yh-descriptions.is-bordered .yh-descriptions__content {
  border: 1px solid var(--yh-descriptions-border-color);
}

.yh-descriptions.is-bordered .yh-descriptions__label {
  background-color: var(--yh-fill-color-light, #f5f7fa);
  font-weight: 700;
  color: var(--yh-text-color-primary);
  width: 150px;
}

.yh-descriptions.is-bordered .yh-descriptions__content {
  background-color: var(--yh-fill-color-blank, #ffffff);
}

.yh-descriptions.is-vertical .yh-descriptions__label {
  width: auto;
  padding-left: var(--yh-descriptions-padding);
}
</style>
