@use 'sass:map';
@use 'sass:math';

@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;

$descriptions-header-margin-bottom: () !default;
$descriptions-header-margin-bottom: map.merge(
  (
    'default': 8px,
    'large': 8px,
    'medium': 8px,
    'small': 8px,
    'mini': 8px,
  ),
  $descriptions-header-margin-bottom
);

$descriptions-title-font-size: () !default;
$descriptions-title-font-size: map.merge(
  (
    'default': 18px,
    'large': 18px,
    'medium': 18px,
    'small': 18px,
    'mini': 18px,
  ),
  $descriptions-title-font-size
);

$descriptions-cell-padding-bottom: () !default;
$descriptions-cell-padding-bottom: map.merge(
  (
    'default': 18px,
    'large': 20px,
    'medium': 18px,
    'small': 14px,
    'mini': 10px,
  ),
  $descriptions-cell-padding-bottom
);

$descriptions-bordered-cell-padding: () !default;
$descriptions-bordered-cell-padding: map.merge(
  (
    'default': 9px 12px 9px 0,
    'large': 10px 12px 10px 0,
    'medium': 9px 12px 9px 0,
    'small': 7px 12px 7px 0,
    'mini': 5px 12px 5px 0,
  ),
  $descriptions-bordered-cell-padding
);

$descriptions-cell-font-size: () !default;
$descriptions-cell-font-size: map.merge(
  (
    'huge': 18px,
    'large': 16px,
    'medium': 12px,
    'default': 12px,
    'small': 12px,
    'mini': 10px,
    'tiny': 8px,
  ),
  $descriptions-cell-font-size
);

@include b(descriptions) {
  @include set-component-css-var('descriptions', $descriptions);

  box-sizing: border-box;
  font-size: getCssVar('font-size', 'base');
  color: getCssVar('text-color', 'primary');

  @include e(header) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: map.get($descriptions-header-margin-bottom, 'default');
    line-height: 22px;

    @include e(title) {
      color: getCssVar('text-color', 'primary');
      font-size: map.get($descriptions-title-font-size, 'default');
      font-weight: 500;
    }
  }

  @include e(body) {
    background-color: getCssVar('fill-color', 'blank');

    .#{$namespace}-descriptions__table {
      border-collapse: collapse;
      width: 100%;
      table-layout: fixed;

      .#{$namespace}-descriptions__cell {
        box-sizing: border-box;
        text-align: left;
        font-weight: normal;
        font-size: map.get($descriptions-cell-font-size, 'default');
        height: map.get($common-component-size, 'default');

        @include when(left) {
          text-align: left;
        }

        @include when(center) {
          text-align: center;
        }

        @include when(right) {
          text-align: right;
        }
      }

      &.is-bordered {
        .#{$namespace}-descriptions__cell {
          border-bottom: 1px solid getCssVar('descriptions-table-border-color');

          // padding: map.get($descriptions-bordered-cell-padding, 'default');

          &.el-descriptions__label:not(:first-of-type) {
            border-left: 22px solid white;
          }
        }

        tr:last-child {
          .#{$namespace}-descriptions__cell {
            border-bottom: none;
          }
        }
      }

      &:not(.is-bordered) {
        .#{$namespace}-descriptions__cell {
          // $padding: math.div(map.get($descriptions-cell-padding-bottom, 'default'), 2);
          // padding: $padding 12px $padding 0;
        }
      }
    }
  }

  @each $size in $sizes {
    @include m($size) {
      font-size: map.get($input-font-size, $size);

      @include e(header) {
        margin-bottom: map.get($descriptions-header-margin-bottom, $size);

        @include e(title) {
          font-size: map.get($descriptions-title-font-size, $size);
        }
      }

      @include e(body) {
        .#{$namespace}-descriptions__table {
          .#{$namespace}-descriptions__cell {
            font-size: map.get($descriptions-cell-font-size, $size);
            height: map.get($common-component-size, $size);
          }

          &.is-bordered {
            .#{$namespace}-descriptions__cell {
              // padding: map.get($descriptions-bordered-cell-padding, $size);
            }
          }

          &:not(.is-bordered) {
            .#{$namespace}-descriptions__cell {
              // $padding: math.div(map.get($descriptions-cell-padding-bottom, $size), 2);
              // padding: $padding 12px $padding 0;
            }
          }
        }
      }
    }
  }

  &.strech {
    .#{$namespace}-descriptions__table {
      .#{$namespace}-descriptions__cell:not(.is-bordered-content):not(.is-bordered-label) {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .#{$namespace}-descriptions__cell.is-bordered-content {
        text-align: right;
      }
    }
  }
}

.description-item {
  align-items: center;
  border-bottom: 1px solid var(--el-color-neutral-light-2);
  display: flex;
  flex-direction: row;
  height: 40px;

  &-label {
    width: 150px;
    @apply text-neutral-9;
    font-weight: 500;
  }

  &-value {
    @apply grow truncate max-w-[227px] text-right;
  }
}