@import "./global.less";
.k-digital {
   display:inline-block;
   font-size: 0;
   width:86px;
   height: 30px;
   position:relative;
   .k-digital-btn{
      position:absolute;
      top:0;
      display:inline-block;
      width: 24px;
      height: 30px;
      line-height: 30px;
      font-size: 12px;
      color: #aaa;
      border:1px solid #ccc;
      text-align: center;
      &:hover{
         background: @primary;
         border-color: @primary;
         color: #fff;
      }
   }
   .k-digital-left{
      border-right:none;
      left:0;
      border-radius: 2px 0 0 2px;
   }
   .k-digital-right{
      border-left:none;
      right: 0;
      border-radius: 0 2px 2px 0;
   }
   .k-digital-input{
      font-size: 14px;
      display:inline-block;
      width: 38px;
      height: 30px;
      line-height: 30px;
      border:1px solid #ccc;
      text-align: center;
      vertical-align: middle;
      position:absolute;
      left:24px;
      top:0;
      &:focus{
         box-shadow: 0 0 3px fade(@main, 30%);
         border-color: @lightBlue;
      }
   }
}
.k-digital-vertical {
   .k-digital-btn{
      left:62px;
      height: 15px;
      line-height: 15px;
      font-size: 24px;
      border:1px solid #ccc;
      border-left:none;
      &:hover{
         color: @primary;
         background: none;
         border-color: #ccc;
      }
   }
   .k-digital-left{
      top: 15px;
      border-radius: 0 0 2px 0;
      &:before{
         content: '\e604';
      }
   }
   .k-digital-right{
      top: 0px;
      border-bottom:none;
      border-radius: 0 2px 0 0;
      &:before{
         content: '\e600';
      }
   }
   .k-digital-input{
      left:0;
      width: 62px;
      border-radius: 2px 0 0 2px;
   }
}

.k-digital-disabled{
   background: #e4e4e4;
   opacity: .5;
   cursor: not-allowed;
}