@use '@style/theme/index.scss' as theme;
@use 'sass:meta';
@use 'sass:string';
@use 'sass:map';
@use '@components/descriptions/style/token.scss' as token;
@use '@components/descriptions/style/token.scss' as *;

$descriptions-prefix-cls: string.unquote('#{theme.$prefix}-descriptions');

@function token-var($name, $fallback: null) {
  $value: map.get(meta.module-variables('token'), $name);

  @if $value == null {
    @return $fallback;
  }

  @return $value;
}

@mixin descriptions-size($size) {
  &-size-#{$size} &-title {
    margin-bottom: token-var('descriptions-size-#{$size}-title-margin-bottom');
  }

  &-size-#{$size} &-item-label-block,
  &-size-#{$size} &-item-value-block {
    padding-right: token-var('descriptions-border-item-size-#{$size}-padding-horizontal');
    padding-bottom: token-var('descriptions-item-size-#{$size}-spacing-bottom');
    font-size: token-var('descriptions-size-#{$size}-font-size-text');
  }

  &-size-#{$size}#{&}-border &-item-label-block,
  &-size-#{$size}#{&}-border &-item-value-block {
    padding: token-var('descriptions-border-item-size-#{$size}-padding-vertical')
      token-var('descriptions-border-item-size-#{$size}-padding-horizontal');
  }

  &-size-#{$size}#{&}-border#{&}-layout-inline-vertical &-item {
    $_descriptions-padding-vertical: string.unquote(
      'descriptions-border-item-size-#{$size}-padding-vertical'
    );

    padding: token-var($_descriptions-padding-vertical) + 5px
      token-var('descriptions-border-item-size-#{$size}-padding-horizontal');
  }
}

.#{$descriptions-prefix-cls} {
  &-table {
    width: 100%;
    border-collapse: collapse;
  }

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

  &-title {
    margin-bottom: $descriptions-size-default-title-margin-bottom;
    color: $descriptions-color-title;
    font-weight: $descriptions-font-weight-title;
    font-size: $descriptions-font-size-title;
    line-height: theme.$line-height-base;
  }

  &-item,
  &-item-label,
  &-item-value {
    box-sizing: border-box;
    font-size: $descriptions-size-default-font-size-text;
    line-height: theme.$line-height-base;
    text-align: left;
  }

  &-table-layout-fixed &-item-label {
    width: auto;
  }

  &-item-label-block {
    width: 1px;
    padding: 0 4px $descriptions-item-size-default-spacing-bottom 0;
    color: $descriptions-color-text-label;
    font-weight: $descriptions-font-weight-text-label;
    white-space: nowrap;
  }

  &-item-value-block {
    padding: 0 4px $descriptions-item-size-default-spacing-bottom 0;
    color: $descriptions-color-text-value;
    font-weight: $descriptions-font-weight-text-value;
    white-space: pre-wrap;
    word-break: break-word;
  }

  &-item-label-inline,
  &-item-value-inline {
    box-sizing: border-box;
    font-size: $descriptions-size-default-font-size-text;
    line-height: theme.$line-height-base;
    text-align: left;
  }

  &-item-label-inline {
    margin-bottom: 2px;
    color: $descriptions-color-text-label;
    font-weight: $descriptions-font-weight-text-label;
  }

  &-item-value-inline {
    color: $descriptions-color-text-value;
    font-weight: $descriptions-font-weight-text-value;
  }

  &-layout-inline-horizontal &-item-label-inline {
    margin-right: 4px;
  }

  &-layout-inline-horizontal &-item-label-inline,
  &-layout-inline-horizontal &-item-value-inline {
    display: inline-block;
    margin-bottom: 0;
  }

  &-border#{&}-layout-inline-vertical &-item {
    padding: $descriptions-border-item-size-default-padding-vertical + 5px
      $descriptions-border-item-size-default-padding-horizontal;
  }

  &-border &-body {
    overflow: hidden;
    border: $descriptions-border-width $descriptions-border-style $descriptions-color-border;
    border-radius: $descriptions-border-radius;
  }

  &-border &-row:not(:last-child) {
    border-bottom: $descriptions-border-width $descriptions-border-style $descriptions-color-border;
  }

  &-border &-item,
  &-border &-item-label-block,
  &-border &-item-value-block {
    padding: $descriptions-border-item-size-default-padding-vertical
      $descriptions-border-item-size-default-padding-horizontal;
    border-right: $descriptions-border-width $descriptions-border-style $descriptions-color-border;
  }

  &-border &-item-label-block {
    background-color: $descriptions-border-color-bg-label;
  }

  &-border &-item-value-block:last-child {
    border-right: none;
  }

  &-border &-item:last-child {
    border-right: none;
  }

  &-border#{&}-layout-vertical &-item-label-block:last-child {
    border-right: none;
  }

  &-layout-vertical:not(#{&}-border) &-item-value-block:first-child {
    padding-left: 0;
  }

  // Size
  @include descriptions-size(mini);
  @include descriptions-size(small);
  @include descriptions-size(medium);
  @include descriptions-size(large);
}