@import '../scss/base';

.r-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  height: $height;
  padding: 0 15px;
  color: $color-white;
  white-space: nowrap;
  text-align: center;
  border: 1px solid $color-border;
  border-radius: $radius;
  cursor: pointer;
  outline: 0;
  -webkit-appearance: none;
  transition: all .2s;
  font-size: $font-size!important;

  &:hover{
    opacity: .6;
  }

  &:active{
    opacity: 1;
    transition: none;
  }

  .r-button-icon{
    margin: 0 3px;
  }

  .r-icon-only{
    margin: 0;
  }
}

.r-btn-primary{
  border-color: $color-primary;
  background-color: $color-primary;
}

.r-btn-success{
  background-color: $color-success;
  border-color: $color-success;
}

.r-btn-danger{
  background-color: $color-danger;
  border-color: $color-danger;
}

.r-btn-warning{
  background-color: $color-warning;
  border-color: $color-warning;
}

.r-btn-default{
  background-color: $color-white;
  color: $color-black-light;
}

.r-btn-disabled{
  border-color: $color-border;
  background-color: $color-white;
  color: $color-gray-light;
  cursor: not-allowed;
}

.r-btn-small, .r-btn-group-small .r-btn{
  height: $minHeight;
  line-height: $minHeight;
  padding: 0 10px;
  font-size: $font-size-small!important;
}

.r-btn-long{
  display: flex;
  width: 100%;
}

.r-btn-group{
  display: flex;
}
.r-btn-group-align-center{
  justify-content: center;
}
.r-btn-group-align-right{
  justify-content: flex-end;
}