@charset "UTF-8";
@import "./common/var.css";

@component-namespace el {
  @b tree {

    @e extra {
      .el-tree-node__content:hover{
        .el-tree__extra-control{
          display: inline-block;
        }
      }
	  .el-tree-node__content:hover .el-tree__extra-name.is-edit ~ .el-tree__extra-control{
          display: none;
        }
	  .el-tree-node__content{

		  .el-tree__extra-name {
			 .name-value{
				 display: inline-block;
        @when disabled {
          color: var(--disabled-color-base);
        }
			 }
			 .el-tree__extra-edit{
				 display: none;
			 }

			 @when edit {
         .el-tree__extra-icon{
           display: none;
         }
				 .name-value{
					display: none;
				 }
				 .el-tree__extra-edit{
					 display: inline-block;
				 }
			 }

	       }

	  .el-tree__extra-name {
		  position: relative;
	  }
	  .el-tree__extra-name.is-saving {
		  .name-loader{
			  display:inline-block;
			  position:absolute;
			  top: -2px;
			  left:0;
			  width:100%;
			  height:22px;
			  line-height:22px;
			  background:rgba(0,0,0,0.7);
			  text-align:center;
			  &:before{
				  content:'';
				  display:inline-block;
				  width: 3px;
					height: 3px;
					border-radius: 50%;
					-webkit-animation: typing 1s linear infinite alternate;
					-moz-animation: Typing 1s linear infinite alternate;
					animation: typing 1s linear infinite alternate;
					position: relative;
					left: -12px;
			  }
		  }
	  }

	  }
    }


    @e extra-icon {
      margin-right: 3px;
      display: inline-block;
    }


    @e extra-name {
      font-size: var(--tree-extra-font-size);
      position: relative;
      @when mark {
        &:before {
   /*     position: absolute;
        top: 2px;
        left: -20px;
        font-size: 12px;
        content: "\E620";
        font-family: 'element-icons' !important;
        speak: none;
        font-style: normal;
        font-weight: 400;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        vertical-align: baseline;
        display: inline-block;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;*/
        }
      }
    }
    @e extra-control{
      display:none;
       & > i{
        font-size:12px;
        padding: 0 3px;
       line-height: inherit;
      }
    }
    @e extra-action{
      & > i{
        font-size:12px;
        padding: 0 3px;
      }
    }
    @e extra-edit{
      appearance: none;
      background-color: var(--input-fill);
      background-image: none;
      border-radius: var(--input-border-radius);
      border: var(--input-border);
      box-sizing: border-box;
      color: var(--input-color);
      display: inline-block;
      font-size: 12px;
      width:80px;
      height: 22px;
      outline: none;
      padding: var(--input-inner-padding);
      transition: var(--border-transition-base);

      &::placeholder {
       color: var(--input-placeholder-color);
      }

      &:hover {
       border-color: var(--input-hover-border);
      }

      &:focus {
        outline: none;
        border-color: var(--input-focus-border);
      }
    }
  }

}


@-webkit-keyframes typing{
    0%{
        background-color: rgba(255,255,255, 1);
        box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2),
                    24px 0px 0px 0px rgba(255,255,255,0.2);
      }
    25%{
        background-color: rgba(255,255,255, 0.4);
        box-shadow: 12px 0px 0px 0px rgba(255,255,255,2),
                    24px 0px 0px 0px rgba(255,255,255,0.2);
    }
    75%{ background-color: rgba(255,255,255, 0.4);
        box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2),
                    24px 0px 0px 0px rgba(255,255,255,1);
      }
}

@-moz-keyframes typing{
   0%{
        background-color: rgba(255,255,255, 1);
        box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2),
                    24px 0px 0px 0px rgba(255,255,255,0.2);
      }
    25%{
        background-color: rgba(255,255,255, 0.4);
        box-shadow: 12px 0px 0px 0px rgba(255,255,255,2),
                    24px 0px 0px 0px rgba(255,255,255,0.2);
    }
    75%{ background-color: rgba(255,255,255, 0.4);
        box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2),
                    24px 0px 0px 0px rgba(255,255,255,1);
      }
}

@keyframes typing{
   0%{
        background-color: rgba(255,255,255, 1);
        box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2),
                    24px 0px 0px 0px rgba(255,255,255,0.2);
      }
    25%{
        background-color: rgba(255,255,255, 0.4);
        box-shadow: 12px 0px 0px 0px rgba(255,255,255,2),
                    24px 0px 0px 0px rgba(255,255,255,0.2);
    }
    75%{ background-color: rgba(255,255,255, 0.4);
        box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2),
                    24px 0px 0px 0px rgba(255,255,255,1);
      }
}