.we-variable{
 border: 1px solid #eee;
 box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
 border-radius: 10px 10px 3px 3px;
 color: #515a6e;
 margin: 5px 0;

 .we-variable-header {
 height: 30px;
 line-height: 30px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 .we-variable-header-title {
 font-size: 14px;
 background: #2d8cf0;
 padding: 2px 12px;
 border-radius: 10px 0;
 display: inline-block;
 color: #fff;
 }
 .we-variable-header-control{
 display: inline-block;
 padding: 0 6px;
 color: #ccc;
 cursor: pointer;
 }
 }
 .we-variable-content{
 padding: 10px;
 .we-variable-content-item {
 margin: 8px 0;
 line-height: 24px;
 display: flex;
 align-items: center;
 @media only screen and (max-width: 1480px){
 .we-variable-content-label-group {
 display: flex !important;
 flex-direction: column;
 margin-right: 20px;
 align-items: flex-end;
 }
 }
 .we-variable-content-label-group {
 width: 30%;
 display: inline-block;
 text-align: right;
 margin-right: 20px;
 }
 .we-variable-content-label {
 margin: 0 6px;
 }
 .we-variable-content-input {
 width: 70%;
 min-width: 40%;
 border: none;
 border: 1px solid #dcdee2;
 border-radius: 4px;
 background-color: #fff;
 padding: 4px 7px;
 line-height: 1.5;
 transition: border .2s ease-in-out,background .2s ease-in-out,box-shadow .2s ease-in-out;
 position: relative;
 cursor: text;
 height: 34px;
 outline: none;
 &.un-valid {
 border: 1px solid red;
 }
 }
 .we-variable-content-input[disabled] {
 background-color: #f3f3f3;
 opacity: 1;
 cursor: not-allowed;
 color: #ccc;
 }
 .we-variable-content-icon {
 cursor: pointer;
 }
 .we-warning-bar {
 color: red;
 padding-left: 20px;
 display: flex;
 justify-content: center;
 align-items: center;
 white-space: nowrap;
 }
 }
 }
 .we-variable-bottom {
 padding: 10px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 cursor: pointer;
 .we-variable-bottom-add {
 color: #2d8cf0;
 }
 }
}