@image-url: '/src/assets/images/editor/icon_link_editor.png';

.wangeditor-customer-container {
  display: flex;
  justify-content: space-between;
  height: 100%;
  .editor-content-container {
    height: 100%;
    overflow-y: hidden;
    flex: 3;
    padding: 10px;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    .w-e-scroll {
      line-height: 1.5;
      font-family: "黑体";
    }

    .w-e-scroll div[role='textarea'] > div {
      margin: 15px 0 !important;
      font-size: 18px;
      line-height: 1.65;
      font-family: "黑体";
      span {
        font-size: 18px;
      }
    }

    .w-e-text-container [data-slate-editor] h1.chapter-item-header,
    .w-e-text-container [data-slate-editor] h2.chapter-item-section {
      margin: 0 !important;
    }
    .ant-spin-nested-loading,
    .ant-spin-container,
    .w-e-text-container {
      height: 100%;
    }
    .ant-spin-container > div,
    #w-e-textarea-1 {
      min-height: 99%;
    }
    .w-e-text-container [data-slate-editor] p:not(:empty) {
      margin: 15px 0;
      span[data-slate-node='text'] {
        padding-top: 0px;
      }
    }
    .w-e-text-container [data-slate-editor] p {
      line-height: 1.5;
      font-size: 18px;
      font-family: '黑体';
      margin-block: 0;
      
      span[data-slate-node='text'], span[data-slate-node='element'] {
        vertical-align: middle;
        height: 100%;
        line-height: 100%;
      }
      span[data-slate-node='text'] {
        padding-top: 3px;
      }
    }

    .w-e-text-container [data-slate-editor] .w-e-image-container {
      vertical-align: middle;
      display: inline-block;
      + span {
        padding-top: 8px;
      }
    }

    p {
      span[data-slate-zero-width] {
        display: inline-block;
        width: 2px;
      }
      > span:last-child {
        span[data-slate-zero-width] {
          display: inline-block;
          width: 2px;
          // &:not(:empty) {
          //   display: inline;
          // }
        }
        
      }
      > span:first-child {
        span[data-slate-zero-width] {
          display: inline;
        }
      }
    }

    .w-e-text-container [data-slate-editor] a,
    .w-e-text-container [data-slate-editor] .chapter-item-link {
      position: relative;
      &:link,
      &:hover,
      &:visited {
        color: #aa1941;
        span {
          color: #aa1941 !important;
        }
      }
      &::after {
        content: '';
        background-size: cover;
        background-image: url(@image-url); // 使用 Less 变量
        width: 14px;
        height: 14px;
        display: inline-block;
        margin: 0 5px;
        vertical-align: text-bottom;
      }
      img {
        max-width: 14px;
        max-height: 14px;
        min-width: 14px;
        min-height: 14px;
        width: 14px;
        height: 14px;
      }
    }

    .w-e-text-container [data-slate-editor] .chapter-item-link {
      &::after {
        content: '';
        background-size: cover;
        background-image: none; // 使用 Less 变量
        width: 0px;
        height: 0px;
        display: inline-block;
        margin: 0;
        vertical-align: text-bottom;
      }
    }

    video {
      max-width: 100%;
    }

    li, dd, dt, blockquote {
      font-size: 18px;
      font-family: "黑体";
      line-height: 1.5;
      margin: 15px 0;
    }
    table {
      td, th {
        font-size: 18px;
        line-height: 1.5;
      }
    }

    .w-e-text-container [data-slate-editor] .chapter-gallery-inline {
      margin: 0 4px;
      height: 18px;
      cursor: pointer;
      img {
        min-width: 18px;
        min-height: 18px;
      }
    }

    .title-head {
      text-align: center;
      font-size: 18px;
      color: #333333;
      line-height: 40px;
      display: flex;
      justify-content: space-between;
      height: 52px;
      padding-bottom: 10px;
      .ant-divider {
        margin-top: 0;
      }
      .left {
        flex: 1;
        width: calc(100% - 480px);
        h4 {
          font-size: 16px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          text-align: left;
          padding-right: 10px;
        }
      }
      .right {
        display: flex;
        right: 0;
        top: 0;
        align-items: flex-start;
        flex: 0 0 480px;
        justify-content: flex-end;
        .save-time {
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          .img {
            color: #ab1941;
            font-size: 12px;
            display: flex;
            align-items: center;
            height: 22px;
            line-height: 22px;
            text-align: right;
            display: block;
            img {
              width: 20px;
              margin-right: 8px;
              vertical-align: middle;
            }
          }
          .time {
            font-size: 12px;
            color: #999;
            line-height: 14px;
          }
        }
        .view {
          &:disabled {
            color: #666666 !important;
          }
        }
        .history {
          color: #666666;
          &:hover {
            .ant-btn-icon {
              color: #ab1941;
            }
          }
        }
      }
    }
  }
  .editor-toolbar-container {
    flex: 0 0 306px;
    border: none !important;
    .w-e-bar {
      background-color: transparent;
      padding: 5px 15px;
    }
    .w-e-bar-boxitem {
      background-color: #fff;
      width: 100%;
      display: flex;
      justify-content: space-around;
      &.you {
        flex-flow: row wrap;
        .w-e-bar-item {
          width: 16.6%;
          flex: 0 0 16.6%;
        }
      }
      &.line-height {
        justify-content: flex-start;
      }
    }
    .custom-bar-box {
      background-color: #fff;
      width: 100%;
      display: flex;
      justify-content: flex-start;
      flex-flow: row wrap;

      .w-e-menu-tooltip-v5 {
        height: 50px;
      }
      &.two {
        .w-e-bar-item {
          width: 33%;
          flex: 0 0 33%;
          justify-content: flex-start;
          text-align: left;
          display: block;
          p {
            color: #333;
            font-weight: bold;
          }
          button {
            padding-left: 0;
          }
        }
      }
      &.input {
        justify-content: space-around;
        padding: 10px 0;
        height: 62px;
        .input-item {
          flex: 1;
          padding: 0 10px;
          text-align: center;
          input {
            width: 100%;
            color: #333;
            text-align: center;
            border: 1px solid #d9d9d9;
            border-radius: 5px;
            height: 30px;
            line-height: 30px;
            &:hover {
              border-color: #b83956;
            }
          }
          .text {
            color: #999;
            font-size: 12px;
            margin-top: 8px;
          }
        }
      }
      &.media {
        .w-e-bar-item {
          width: 20%;
          flex: 0 0 20%;
          p {
            font-size: 10px;
            -webkit-transform: scale(1.2);
            -moz-transform: scale(1.2);
            -o-transform: scale(1.2);
            -ms-transform: scale(1.2);
            transform: scale(1.2);
          }
        }
      }
      &.hight {
        .w-e-bar-item {
          width: 20%;
          flex: 0 0 20%;
          p {
            font-size: 10px;
            -webkit-transform: scale(1.2);
            -moz-transform: scale(1.2);
            -o-transform: scale(1.2);
            -ms-transform: scale(1.2);
            transform: scale(1.2);
          }
        }
      }
      &.media,
      &.hight {
        .w-e-bar-item {
          button {
            display: block;
            flex-direction: column;
            padding: 10px;
            height: 50px;
            svg {
              font-size: 22px;
            }
          }
          p {
            display: block;
            width: 100%;
            margin: 0px;
          }
        }
      }
      .w-e-bar-item {
        width: 25%;
        flex: 0 0 25%;
        display: flex;
        flex-direction: column;
        height: 60px;
      }
    }
    .w-e-bar-divider {
      display: block;
      height: 1px;
      width: 100%;
      margin: 8px 0;
      &:nth-of-type(16) {
        height: 0;
      }
      // &:nth-child(odd) {
      //   height: 0;
      // }
    }

    .w-auto {
      display: block;
      width: 100%;
      height: 40px;
      line-height: 40px;
      &.type-heading {
        font-weight: 600;
      }
    }
    .w-e-bar {
      svg {
        width: 18px;
        height: 18px;
        &:nth-child(2) {
          display: none;
        }
      }
    }
    .w-e-select-list {
      z-index: 10001;
      width: 180px !important;
    }
    .w-e-menu-tooltip-v5:before {
      z-index: 10001;
    }
  }
  .ant-spin-nested-loading,
  .ant-spin-container {
    width: 100%;
  }
  .toolbar-customer {
    flex: 1;
  }

  .menu-tabs-key {
    flex: 1;
    background: #fafafa;
    border: 1px solid #e5e5e5;
    min-width: 300px;
    margin-left: 10px;
    border-radius: 6px;

    height: 100%;
    overflow: hidden;
    .tabs {
      height: 50px;
      display: flex;
      width: 100%;
      justify-content: center;
      .tabs-item {
        flex: 1;
        text-align: center;
        border-bottom: 1px solid #e5e5e5;
        color: #333;
        font-size: 16px;
        line-height: 50px;
        box-sizing: border-box;
        cursor: pointer;
        position: relative;
        &.active {
          span {
            width: 60px;
            display: block;
            height: 2px;
            background-color: #ab1941;
            position: absolute;
            left: 50%;
            margin-left: -30px;
            bottom: -1px;
          }
        }
      }
    }

    .menu-tabs-content {
      overflow-y: auto;
      overflow-x: hidden;
      max-height: calc(100% - 50px);
      .styletem {
        padding: 0 11px;
        p {
          font-weight: 600;
          color: #333333;
          line-height: 22px;
          font-size: 16px;
          margin-top: 24px;
          margin-bottom: 34px;
        }
        ul {
          padding-left: 0;
        }
        ul li {
          display: flex;
          border-bottom: 1px solid #cccccc;
          padding: 10px 0;
          justify-content: space-between;
          align-items: center;
          .left {
            flex: 1;
            display: flex;
          }
          img {
            width: 23px;
            margin-right: 20px;
            vertical-align: middle;
          }
          .color {
            display: inline-block;
            width: 22px;
            height: 22px;
            border-radius: 3px;
            &.color1 {
              background-color: #ab1941;
            }
            &.color2 {
              background-color: #2970f6;
            }
            &.color3 {
              background-color: #2ad882;
            }
            &.color4 {
              background-color: #eb3351;
            }
          }
          .type {
            font-size: 14px;
            color: #333333;
            line-height: 20px;
            vertical-align: middle;
          }
          b {
            font-weight: 600;
            font-size: 14px !important;
            margin-left: 15px;
          }
          .use {
            flex: 0 0 60px;
            text-align: right;
            color: #1672ec;
          }
        }
      }
      .toolbox-parent {
        position: relative;

        .custom-bar-box-input {
          position: absolute;
          z-index: 101;
          height: 48px;
          padding: 10px 15px;
          width: 298px;
          top: 165px;
          box-sizing: border-box;
          .box {
            justify-content: space-around;
            display: flex;
            width: 268px;
          }
          .customer-box-input-item {
            box-sizing: border-box;
            text-align: center;
            width: 60px;
            p {
              width: 60px;
              text-align: center;
            }
            .ant-input-number-outlined {
              border: none;
              outline: none;
              width: 60px;
              &:hover,
              &:focus {
                border: none;
                outline: none;
              }
            }
            input {
              width: 60px;
              color: #333;
              text-align: center;
              border: 1px solid #d9d9d9;
              border-radius: 5px;
              height: 30px;
              line-height: 30px;
              background-color: #fff;
              &:hover,
              &:focus {
                border-color: #b83956;
              }
            }
            .text {
              color: #999;
              font-size: 12px;
              margin-top: 4px;
            }
          }
        }
      }
    }
  }
}

/*
['bold', 'underline', 'italic', 'through', 'code', 'sub', 'sup', 'clearStyle', 'color', 'bgColor', 'fontSize', 'fontFamily', 'indent', 'delIndent', 'justifyLeft', 'justifyRight', 'justifyCenter', 'justifyJustify', 'lineHeight', 'insertImage', 'deleteImage', 'editImage', 'viewImageLink', 'imageWidth30', 'imageWidth50', 'imageWidth100', 'divider', 'emotion', 'insertLink', 'editLink', 'unLink', 'viewLink', 'codeBlock', 'blockquote', 'headerSelect', 'header1', 'header2', 'header3', 'header4', 'header5', 'todo', 'redo', 'undo', 'fullScreen', 'enter', 'bulletedList', 'numberedList', 'insertTable', 'deleteTable', 'insertTableRow', 'deleteTableRow', 'insertTableCol', 'deleteTableCol', 'tableHeader', 'tableFullWidth', 'insertVideo', 'uploadVideo', 'editVideoSize', 'uploadImage', 'codeSelectLang']


['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', 'deleteImage', 'editImage', 'viewImageLink', 'imageWidth30', 'imageWidth50', 'imageWidth100', '', '', '', 'editLink', 'unLink', 'viewLink', '', '', 'headerSelect', 'header1', 'header2', 'header3', 'header4', 'header5', '', '', '', '', '', '', '', '', 'deleteTable', 'insertTableRow', 'deleteTableRow', 'insertTableCol', 'deleteTableCol', 'tableHeader', 'tableFullWidth', '', 'codeSelectLang', 'editVideoSize', '', '']
*/
