.hugerte-variable{
  border-radius: 6px;
  cursor: pointer !important;
  padding: 0 4px;
  outline: 2px dashed #006ce788;
  transition-duration: 200ms;
  display: inline;
  width: fit-content;
  &::before{
    vertical-align: center;
    pointer-events: none;
    transition-duration: 200ms;
    margin-right: -24px;
    opacity: 0;
    line-height: 1.6;
    content: '变量';
    font-weight: normal;
    font-size: 10px;
    height: fit-content;
    background: #77B1F2;
    color: white;
    padding: 0 3px;
    border-radius: 4px;
  }
  &:hover,&[data-mce-selected]{
    background: #006ce71a;
    outline: 2px solid #006ce788 !important;
    &::before{
      opacity: 1;
      margin-right: 2px;
    }
  }
  &.e{
    outline: 2px dashed #E71B0087;
    &::before{
      background: #e82309;
      content: '失效';
    }
    &:hover,&[data-mce-selected]{
      background: #E71B001a;
      outline: 2px solid #E71B0087 !important;
      &::before{
        opacity: 1;
        margin-right: 2px;
      }
    }
  }
}