.editor {
  display: flex;
  flex-direction: column;

  .editor-item {
    background: #fff;
    border-radius: 4px;
    border: 1px solid #bec2c5;
    margin-right: 50px;
    display: flex;
    flex-direction: column;
    margin-top: 14px;
    position: relative;

    :global(.editor-fixed) {
      display: none;
    }

    &:hover {
      background: #f3f9fd;
      // border-color: #f3f9fd;
      border-color: #e0e6e9;

      .editor-item-bottom {
        border-top-color: #c8d8e8;
      }

      :global(.editor-fixed) {
        display: flex;
      }
    }

    .editor-item-top,
    .editor-item-bottom {
      padding: 12px;
      display: flex;
      align-items: flex-start;
    }

    .editor-item-top {
    }

    .editor-item-label {
      width: 6.5em;
      line-height: 3em;
    }

    .editor-item-right {
      flex: 1;
      margin-right: 10px;
      position: relative;

      &:before {
        position: absolute;
        top: 0;
        right: 0;
        display: inline-block;
        padding: 5px;
        background-color: #f0f0f0;
        color: #999;

      }

      .form-option {
        &:global(.form-option-radio) {
          .form-option-li:before {
            border-radius: 50%;
          }
        }

        &:global(.form-option-checkbox) {
          .form-option-li:before {
            border-radius: 5px;
          }
        }

        .form-option-li {
          display: flex;
          align-items: center;
          margin: 8px 0;

          &:before {
            content: '';
            display: inline-block;
            width: 18px;
            height: 18px;
            border: 1px solid #bfcbd9;
            flex: 0 0 auto;
            margin-right: 10px;
          }

          .other-opts {
            flex: 1;
            line-height: 2em;
          }

          :global(.cos-upload) {
            flex: 0 0 auto;
            width: 52px;
            height: 52px;
            margin-right: 8px;
            border: 1px solid #e3e3e3;
          }

          :global(.item-clean) {
            background-color: #e5e5e5;
            color: #999;
            width: 1.5em;
            height: 1.5em;
            line-height: 1.5;
            margin-left: 6px;
            text-align: center;
            border-radius: 3px;
            cursor: pointer;
            flex-shrink: 0;
            display: none;

            &:hover {
              color: #333;
            }
          }

          &:hover {
            :global(.item-clean) {
              display: block;
            }
          }
        }
      }


      :global(.el-radio-group) {
        display: block;
      }

      .other-contorl {
        display: flex;
        align-items: center;
        cursor: pointer;

        .other-contorl-item {
          display: flex;
          justify-content: center;
          align-items: center;

          &:not(:first-child) {
            margin-left: 4em;
          }

          &:hover {
            color: #3f8cff;
          }

          :global(.item-add) {
            margin-right: .5em;
          }
        }

        .other-contorl-item-disabled, .other-contorl-item-disabled:hover {
          color: #ccc;
          cursor: no-drop;
        }
      }
    }

    .editor-item-bottom {
      border-top: 1px dashed #ccc;

      .editor-item-label {
        line-height: 2em;
      }
    }
  }
}
