@charset "utf-8";
@include ns(cascader){ display: inline-block; position: relative;
  //用个标签挡住输入框底边线
  .mask{ content: ''; height: 2px; background: #fff; position: absolute; left: 0; top: 36px; width: 100%; display: block; z-index: 100; border-left: 1px solid #f60; border-right: 1px solid #f60; box-sizing: border-box; }
  @include ns(input-control){ position: relative;
    &:after{ top: 0; content: '\e61a'; display: block; position: absolute; right: 10px; height: 38px; line-height: 38px; transition: all .2s; cursor: pointer; font-family: "iconfont"; font-size: 14px; }
    &.focus{
      &:after{ transform: rotate(180deg); }
    }
    &:hover{
      + .icon-clear{visibility: visible;opacity: 1}
    }
  }
  .icon-close{
    visibility: hidden;
    opacity: 0;
    transition: all .3s;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    cursor: pointer;
    z-index: 50;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    &:after{color: #999;
    }
    &:hover{
      visibility: visible;opacity: 1
    }
  }
  .cascader-down{ position: absolute; left: 0; top: 37px; width: 360px; border: 1px solid #f60; background: #fff; z-index: 99; padding: 10px; overflow: hidden;border-radius: 3px;
    .tips{ margin-bottom: 5px; font-size: 12px; font-weight: 700; color: #666 }
    .cascader-tab{ height: 25px; line-height: 25px; border-bottom: 1px solid #ddd;
      li{ float: left; padding: 0 10px; margin-right: 10px; border: 1px solid #ddd; color: #2d8cf0; font-weight: 700; background: #fff; cursor: pointer; height: 24px; line-height: 24px; border-bottom: 0; overflow-x: hidden;
        &.active{ height: 25px; }
      }
    }
    .cascader-area{ clear: both; padding: 10px 5px 5px; overflow: hidden;
      li{ float: left; width: 85px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-right: 3px; box-sizing: border-box;
        a{ cursor: pointer; font-size: 12px; color: #666;
          &:hover{ color: #f60 }
        }
      }
    }
  }
}
