@use './variables.scss' as *;

// 富文本样式
@mixin rich-text($font-size: 16pt) {
  font-family: 'Arial', 'Helvetica', sans-serif;
  font-size: $font-size;

  :deep ul {
    padding-inline-start: 40px;

    li {
      list-style: disc;
    }
  }
}

// 设置基础样式
@mixin setting-base {
  .serial-number {
    :deep .el-form-item__content {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .svg-icon {
      cursor: pointer;
    }
  }

  .el-input {
    margin-right: 16px;
  }

  .el-divider {
    margin: 16px 0;
  }
}

// 预览基础样式
@mixin preview-base {
  display: grid;
  gap: 6px;
  padding: 8px;

  :deep .rich-text {
    @include rich-text;

    &.mce-content-body {
      padding-top: 4px;
    }

    &:not(.mce-edit-focus) {
      p {
        margin: 0;
      }
    }

    &.mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before {
      top: 6px;
    }
  }

  .main {
    grid-area: main;
    width: 100%;
  }
}

// 序号样式
@mixin serial-number($height: 36px) {
  width: 40px;
  height: $height;
  padding: 4px 8px;
  font-size: 14px;
  color: $text-color;
  background-color: $fill-color;
  border-radius: 2px;
}