@import '../../styles/color.less';

@prefixCls : doo-btn;
.@{prefixCls} {
  position: relative;
  font-size: 0.875rem;
  outline: none;
  border-radius: 4px;
  color: #FFF;
  font-weight: 500;
  padding: 0 16px;
  height: 32px;
  min-width: 64px;
  overflow: hidden;
  box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
  cursor: pointer;
  &-ripple {
    color: inherit;
    position: absolute;
    z-index: 0;
    pointer-events: none;
    transition: 30s linear;
    animation-name: ripple;
    animation-timing-function: linear;
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
    transform: scale(0);
    border-radius: 50%;
    background-color: rgba(255,255,255,0.4);
  }
  &:hover {
    opacity: 0.85;
  }
  &-primary {
    border: 1px solid @sky-blue;
    background-color: @sky-blue;
  }
  &-default {
    border: 1px solid @default-border-color;
    background-color: #FFF;
    color: @default-color;
  }
  &-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    &:hover {
      opacity: 0.45;
    }
  }
}

@keyframes ripple {
  100% {
    opacity: 0;
    transform: scale(2);
  }
}