@-webkit-keyframes loading {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes shake{
  0%{
    transform:translate(0.2rem);
  }
  25%{
    transform:translate(-0.2rem);
  }
  50%{
    transform:translate(0px);
  }
  75%{
    transform:translate(0.2rem);
  }
  100%{
    transform:translate(-0.2rem);
  }
}

@keyframes mask-layer-fade-in{
   0%{
     opacity:0;
   }
   100%{
     opacity:1;
   }
 }
@keyframes mask-layer-fade-out{
  0%{
    opacity:1;
  }
  100%{
    opacity:0;
  }
}
.mask-layer{
  position: fixed;
  left: 0;
  top:0;
  width: 100%;
  height: 100%;
  z-index: $zindex-masker;
  opacity: 1;
  background-color: $mask-color;
}
.mask-layer.fade-in{
  @include animation(mask-layer-fade-in 0.3s);
}
.mask-layer.fade-out{
  @include animation(mask-layer-fade-out 0.3s);
  opacity: 0;
  display: none;
}
.common-masker{
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: $mask-color;
  height: 100%;
  z-index: $zindex-masker;
}

.mask{
  @include user-select-none;
  &:after{
    content: "";
    display: block;
    @extend .common-masker;
  }
}
.caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-top: 4px dashed;
  border-top: 4px solid\9;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}

.withpoint{
  position: relative;
  &:after {
    @extend [class*="icon-"];
    @extend .icon-arrow-right-circle;
    font-size: $font-size*1.5;
    color: $icon-color;
    display: block;
    width: $component-size-small;
    height:$component-size-small;
    line-height: $component-size-small;
    text-align: center;
    border-radius: 100%;
    position:absolute;
    right:$content-padding;
    top:50%;
    margin-top: -$component-size-small/2;
  }
}

.circle {
  border-radius: 100%;
}
.vertical-scrollable{
  overflow-y:scroll;
}