
// 覆盖头部样式
.lc-top-area.engine-actionpane {
  position: relative;
  height: 56px;
  background: #222;
  padding: 0 16px 0 16px;
  margin: 0 !important;
  width: 100vw;
  display: flex;
  justify-content: space-between;
}
.engine-actionitem {
  display: flex !important;
}
.lc-top-area-right {
  .ve-history-pane {
    border: none;
    padding: 0;
    margin: 0 17px 0 0;
    height: 56px;
    display: flex;
    align-items: center;

    &::after {
      content: '';
      height: 16px;
      position: relative;
      top: 2px;
      left: 9px;
      width: 1px;
      background: #666666;
    }

    .ve-history-item {
      color: #fff;
      width: 36px;
      margin: 0 6px;
      height: 36px;
      border-radius: 3px;
      &:hover {
        background-color: #000;
      }
    }

    .done-history-icon {
      display: flex;
      align-items: center;
      height: 100%;
      min-width: 48px;
      max-width: 70px;
      justify-content: center;
      color: #fff;
      cursor: pointer;

      &:hover {
        background: #000;
      }
    }
  }
  .engine-actionitem .save-pane-btn {
    border: 1px solid #ffffff;
    border-radius: 4px;
    background: transparent;
    margin-left: 16px;

    &:hover {
      background: rgba(255, 255, 255, 0.2);
      border: 1px solid #ffffff;
      border-radius: 4px;
    }
  }

  .engine-actionitem .ve-auto-save-pane {
    color: #fff;
    font-size: 14px;
  }

  .engine-actionitem {
    margin: 0 !important;

    .done-pane-icon {
      width: 36px;
      height: 36px;
      margin: 0 6px;
      border-radius: 3px;
      display: flex;
      align-items: center;
      text-align: center;
      justify-content: center;
      cursor: pointer;
      background-color: transparent;
      color: #fff;
      &:hover {
        background-color: #000;
      }
    }
  }
}

// 头部导航区域
.lc-top-area-left .legaoBrand {
  .legaoBrand-title:nth-of-type(1) {
    display: none;
  }

  .legaoBrand-title:nth-of-type(3) {
    color: #aaa;
  }

  a {
    width: 32px;
    height: 32px;
  }

  .brand-link {
    margin-left: 28px;
    color: #7f7f7f;
    border: none;
  }

  .legaoBrand-title-clickable {
    color: #fff;
  }
}

.lc-top-area-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 100%;

  @media screen and (max-width:1620px) {
    left: 40%;
  }
  
  .done-simulator-item {
    &:not(.done-actived) {
      &:hover {
        background: #000;
      }
    }
  }
}

.lc-workbench-center {
  margin: 0 !important;
  background: #e5e5e5;
}

.lc-workbench .lc-workbench-body {
  .lc-left-float-pane {
    left: 60px;
  }
  .lc-left-area {
    left: 0;
    top: 0;
    height: calc(100vh - 56px);
    width: 60px;
    box-shadow: inset -1px 0 0 0 rgba(191, 191, 191, 0.5);
    background-color: #ffffff;
    z-index: 100;

    .lc-left-area-top {
      padding: 0;
      > :nth-child(3)::after {
        display: block;
        content: '';
        height: 1px;
        width: 24px;
        margin: 16px 11px 0 11px;
        background-color: rgba(0, 0, 0, 0.1);
      }
      .lc-title {
        margin-top: 16px;
      }
    }

    .lc-left-area-bottom {
      padding: 0;
      .lc-title {
        margin-bottom: 16px;
      }
    }

    .lc-left-area-top .lc-title,
    .lc-left-area-bottom .lc-title {
      width: auto;
      height: auto;
      color: var(--color-brand1-1, #222);
      .lc-title-icon {
        height: 36px;
        width: 36px;
        margin: 0;
        padding: 8px;
        border-radius: 12px;
        background-color: #fff;
      }
      .lc-title-txt {
        margin-top: 2px;
        color: var(--color-brand1-1, #222);
      }
      &:hover {
        cursor: pointer;
        .lc-title-icon {
          background-color: #f2f2f2;
        }
      }
      &.actived {
        .lc-title-icon {
          background-color: var(--color-brand1-1, #222);
          color: #fff;
        }
        &:hover {
          .lc-title-icon {
            background-color: var(--color-brand1-1, #222);
            color: #fff;
          }
        }
      }
    }
  }
  .lc-tabs-title .lc-tab-title.actived {
    color: var(--color-brand1-1, #222);
    border-bottom-color: var(--color-brand1-1, #222);
  }
}

.lc-left-float-pane.lc-left-float-pane {
  // width: 316px !important;
  position: fixed !important;
  left: 60px !important;
  top: 56px !important;
  height: calc(100vh - 56px) !important;
  box-shadow: none !important;
  border-right: 1px solid #e5e5e5;
}

.lc-left-fixed-pane.lc-left-fixed-pane {
  // width: 316px !important;
  // 低代码中的fixed类型面板为固定位置，非浮动；要设置为浮动需修改面板配置area: 'leftFloatArea',
  // 设计要求完全固定
  position: relative !important;
  z-index: 810;
  height: calc(100vh - 56px) !important;
  box-shadow: none !important;
  border-right: 1px solid #e5e5e5;
  // margin-left: 60px !important;
}

// .lc-settings-main {
//   height: calc(100% - 56px);
// }

// breadcrumb 样式覆盖
.lc-settings-main .lc-settings-navigator {
  .lc-settings-navigator-icon {
    width: 0;
  }
  .lc-settings-node-breadcrumb {
    margin-left: 0;
  }
}

// inline block/accordion/entry 样式覆盖
.lc-field-body .lc-field.lc-accordion-field>.lc-field-head, .lc-field-body .lc-field.lc-block-field>.lc-field-head, .lc-field-body .lc-field.lc-entry-field>.lc-field-head {
  height: 40px!important;
  padding: 0;
  border-bottom: none!important;
  background-color: var(--color-white, transparent)!important;
  .lc-title {
    color: var(--color-text1-5,#222) !important;
  }
  .lc-field-icon {
    font-size: 20px;
    color: #0f0f0f;
    &::before {
      font-size: 20px;
    }
  }
}

.lc-field-body .lc-field.lc-accordion-field>.lc-field-body, .lc-field-body .lc-field.lc-block-field>.lc-field-body, .lc-field-body .lc-field.lc-entry-field>.lc-field-body {
  padding: 12px 0 16px 0;
  .lc-field.lc-inline-field {
    &:first-child {
      margin: 0 0 16px 0 !important;
    }
    &:last-child {
      margin: 0 !important;
    }
    &:not(:first-child):not(:last-child) {
      margin: 16px 0 !important;
    }
  }
}

// 外层 block/accordion/entry 样式覆盖
.lc-field.lc-accordion-field>.lc-field-head, .lc-field.lc-block-field>.lc-field-head, .lc-field.lc-entry-field>.lc-field-head {
  height: 40px!important;
  padding: 0 16px;
  border-bottom: none !important;
  border-top: 1px solid var(--color-line1-2,rgba(31,56,88, .1)) !important;
  background-color: var(--color-fill1-3, transparent)!important;
  .lc-title {
    color: var(--color-text1-5,#222) !important;
  }
  .lc-field-icon {
    font-size: 20px;
    color: #0f0f0f;
    &::before {
      font-size: 20px;
    }
  }
}

// accordion 右侧箭头样式覆盖
.lc-field.lc-accordion-field>.lc-field-head .lc-field-icon{
  transform: rotate(180deg);
}

.lc-field.lc-accordion-field.lc-field-is-collapsed>.lc-field-head .lc-field-icon {
  transform: translate(-3px, -3px) rotate(90deg);
}

.lc-field.lc-inline-field {
  margin: 16px !important;
}

.lc-field.lc-accordion-field>.lc-field-body, .lc-field.lc-block-field>.lc-field-body, .lc-field.lc-entry-field>.lc-field-body {
  padding: 16px;
  .lc-field.lc-inline-field {
    &:first-child {
      margin: 0 0 16px 0 !important;
    }
    &:last-child {
      margin: 0 !important;
    }
    &:not(:first-child):not(:last-child) {
      margin: 16px 0 !important;
    }
  }
}

// 二级配置面板(弹层)样式覆盖
.lc-ballon-title {
  .lc-title {
    color: var(--color-text1-5,#222) !important;
    font-weight: bolder;
    font-size: 14px;
  }
  margin-bottom: 16px;
}

.lc-ballon-content {
  .lc-field.lc-inline-field {
    &:last-child {
      margin: 0 !important;
    }
    &:first-child {
      margin: 0 0 16px 0 !important;
    }
    &:not(:first-child):not(:last-child) {
      margin: 16px 0 !important;
    }
  }
}

.lc-ballon-content .lc-field.lc-accordion-field>.lc-field-body, .lc-ballon-content .lc-field.lc-block-field>.lc-field-body, .lc-ballon-content .lc-field.lc-entry-field>.lc-field-body {
  padding: 12px 0 16px 0;
  .lc-field.lc-inline-field {
    &:first-child {
      margin: 0 0 16px 0 !important;
    }
    &:last-child {
      margin: 0 !important;
    }
    &:not(:first-child):not(:last-child) {
      margin: 16px 0 !important;
    }
  }
}

.lc-ballon-content .lc-field.lc-accordion-field>.lc-field-head, .lc-ballon-content .lc-field.lc-block-field>.lc-field-head, .lc-ballon-content .lc-field.lc-entry-field>.lc-field-head {
  height: 40px!important;
  padding: 0;
  border-bottom: none!important;
  background-color: var(--color-white, transparent)!important;
  .lc-title {
    color: var(--color-text1-5,#222) !important;
  }
  .lc-field-icon {
    font-size: 20px;
    color: #0f0f0f;
    &::before {
      font-size: 20px;
    }
  }
}

.lc-field.lc-accordion-field.lc-field-is-collapsed {
  margin-bottom: 0;
}

// mixed setter icon 样式覆盖
.lc-field.lc-block-field>.lc-field-body>.lc-block-setter>.lc-setter-actions {
  height: 20px;
}

.lc-field.lc-block-field>.lc-field-body>.lc-block-setter>.lc-setter-actions {
  top: 10px !important;
  right: 16px !important;
}

.lc-field-body .lc-field.lc-block-field>.lc-field-body>.lc-block-setter>.lc-setter-actions {
  top: 10px !important;
  right: 0 !important;
}

.lc-accordion-field > .lc-field-body > .lc-setter-mixed > .lc-setter-actions {
  top: 10px !important;
  right: 40px !important;
}

.lc-right-area.engine-tabpane {
  margin: 0 !important;
  right: 0;
  // top: 56px;
  z-index: 100;
  // height: calc(100vh - 56px) !important;
  @media screen and (min-width: 1860px) {
    width: 400px !important;
  }
  width: 300px !important;
  border-left: 1px solid #e5e5e5;
}

.ve-code-control .loading {
  display: block !important;
}

.lowcode-pane-split {
  height: 16px;
  width: 1px;
  background: #666666;
  margin: 0 8px;
}

.lc-simulator-canvas {
  box-shadow: 0 20px 30px 0 rgb(0 0 0 / 15%);
}

:root {
    --dock-pane-width: 316px;
    --dock-fixed-pane-width: 316px;
}