<template>
  <div class="properties-box">
    <a-form
      name="basic"
      :label-col="labelCol"
      autocomplete="off"
      labelAlign="left"
      :colon="false"
      :wrapperCol="{
        style: { paddingRight: '10px' },
      }"
    >
      <slot></slot>
    </a-form>
  </div>
</template>

<script setup lang="ts">
  const labelCol = { style: { width: '110px', paddingLeft: '10px' } };
</script>

<style lang="less" scoped>
  .properties-box {
    // height: 90vh;
    height: calc(100% - 80px);
    position: relative;
    overflow: auto;
    padding-bottom: 80px;
  }

  :deep(.ant-collapse-ghost > .ant-collapse-item) {
    border-bottom: 1px solid #f5f5f5;
    position: relative;
  }

  :deep(.ant-collapse-icon-position-right > .ant-collapse-item > .ant-collapse-header) {
    padding: 10px;
  }

  :deep(
      .ant-collapse-icon-position-right
        > .ant-collapse-item
        > .ant-collapse-header
        .ant-collapse-arrow
    ) {
    right: 10px;
  }

  :deep(.ant-collapse-content-box .ant-form-item) {
    margin-bottom: 10px;
  }

  :deep(.ant-input-number) {
    width: 100%;
  }

  :deep(
      .ant-collapse-ghost > .ant-collapse-item > .ant-collapse-content > .ant-collapse-content-box
    ) {
    padding: 0;
  }

  :deep(.ant-table.ant-table-middle .ant-table-thead > tr > th:first-child) {
    border-top-left-radius: 0 !important;
  }

  :deep(.ant-table.ant-table-middle .ant-table-thead > tr > th:last-child) {
    border-top-right-radius: 0 !important;
  }

  :deep(.ant-slider-step) {
    height: 8px;
  }

  :deep(.ant-slider-track) {
    height: 8px;
    background-color: @primary-color;
    border-radius: 6px;
  }

  :deep(.ant-slider-rail) {
    height: 8px;
    background-color: #f3f3f3;
  }

  :deep(.ant-slider-handle) {
    width: 18px;
    height: 18px;
    border: solid 4px @primary-color;
  }

  :deep(.card-box) {
    .card-item {
      position: relative;
      margin: 0 0 12px;
      padding: 12px 10px 10px;
      background: #f3f3f3;
      border-radius: 4px;

      &:last-child {
        margin-bottom: 2px;
      }
    }

    .close-icon {
      position: absolute;
      top: -6px;
      right: -6px;

      .iconfont-svg {
        fill: rgb(255 84 97 / 50%);
      }
    }
  }

  :deep(.rule-input) {
    background: #fff;
    margin-right: 10px;
  }

  :deep(input[type='color']) {
    margin: 0 !important;
  }

  :deep(.ant-form-item) {
    margin-bottom: 10px;
  }
</style>
