.excel-codeWrap {
  width: 100%;
  display: flex;
  justify-content: space-around;
  padding: 0 0 8px;

  .excel-codeBox {
    flex: 1;
    overflow: auto;
    background: #fff;
    box-sizing: content-box;
    border: 1px solid #e5e5e5;

    span {
      font-family: Liberation Mono, LiberationMonoRegular, Courier New, monospace;
    }

    .CodeMirror-code {
      font-size: 16px;


    }

    .CodeMirror-scroll {
      overflow-x: visible !important;
      padding: 4px;
    }

    .CodeMirror-sizer {
      margin-left: 0 !important;
    }

    .CodeMirror-gutters {
      border-right: none;
      background-color: #f7f7f7;
      opacity: 0;
      display: none;
    }
  }

  .excel-codeBox-keyboard {
    width: 272px;
    min-height: 232px;
    padding: 20px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-left: none;

    .excel-codeBox-keyboard-operate {
      display: flex;

      .excel-codeBox-keyboard-operate-content {
        display: flex;
        flex-wrap: wrap;
        flex: 1;

        .excel-codeBox-keyboard-base {
          width: 30px;
          height: 30px;
          text-align: center;
          margin: 0 10px 10px 0;
        }

        .excel-codeBox-keyboard-space {
          width: 70px;
          height: 30px;
        }
      }

      .excel-codeBox-keyboard-operate-clear {
        width: 30px;

        .excel-codeBox-keyboard-del {
          width: 30px;
          height: 70px;
        }

        .excel-codeBox-keyboard-clear {
          width: 30px;
          height: 30px;
          margin-top: 10px;
        }
      }
    }
  }
}

.excel-codeAction {
  width: 100%;
  display: flex;
  justify-content: space-between;

  .excel-codeAction-item:last-child {
    margin-right: 0;

    .excel-codeAction-header-title {
      color: rgb(217, 82, 189);
    }
  }

  .excel-codeAction-item {
    width: 33%;
    min-height: 317px;
    flex: 1;
    background: #fff;
    border: 1px solid #e5e5e5;
    margin-right: 16px;
    display: flex;
    flex-direction: column;

    .excel-codeAction-header {
      display: flex;
      padding: 10px 16px;
      border-bottom: 1px solid #e5e5e5;

      .excel-codeAction-header-title {
        flex: 1;
        font-weight: 600;
      }
    }

    .excel-codeAction-content {
      flex: 1;
      overflow: hidden auto;
      padding: 0 16px;
      max-height: 280px;
      position: relative;

      .variableOuterInput {
        width: 100%;
        margin-top: 10px;
        position: sticky;
        top: 10px;
        background-color: #fff;
        z-index: 1;
      }

      .variableTree {
        li a:hover, li a.ant-tree-node-selected {
          background: transparent;
        }

        li:first-child {
          a {
            padding: 2px 5px;
          }
        }

        li a {
          width: calc(100% - 16px);
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;

          .ant-tree-title {
            display: inline-block;
            width: 100%;

            .funcListTitle {
              width: 100%;
              display: flex;
              justify-content: space-between;

              & > span {
                display: inline-block;
                flex: 1 1;
                overflow: hidden;
                text-overflow: ellipsis;
                word-break: keep-all;
                white-space: nowrap;
              }

              .functionName {
                max-width: 100px;
              }

              .functionDesc {
                max-width: 100px;
                text-align: right;
                color: #999;
              }
            }
          }
        }
      }

      .code-action-list {
        padding: 10px 0;

        .code-action-tips-title {
          height: 22px;
          line-height: 22px;
        }

        .code-action-tips-info {
          color: #999
        }
      }

      .weapp-excel-code-action-list-variable {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .weapp-excel-code-action-list-variable-name {
          height: 20px;
          line-height: 18px;
          -webkit-flex: 1 1;
          flex: 1 1;
          overflow: hidden;
          text-overflow: ellipsis;
          word-break: keep-all;
          white-space: nowrap;
          cursor: pointer;
        }

        .danger {
          color: rgb(255, 102, 106)!important;
          border: 1px solid rgb(255, 193, 195)!important;
          background-color: rgb(255, 223, 224)!important;
        }

        .weapp-excel-code-action-list-variable-tip {
          width: 40px;
          height: 20px;
          line-height: 18px;
          text-align: center;
          vertical-align: middle;
          color: rgb(255, 205, 80);
          border: 1px solid rgb(255, 222, 138);
          background-color: rgb(255, 245, 219);
          border-radius: 2px;
        }
      }
    }
  }
}