.up-professional-btn{


  $this : &;

  text-transform: uppercase;
  display: inline-block;
  background-color:nth($base-color,1);
  color:#fff;
  border-radius:3px;
  font-size:1em;
  padding:5px 20px;
  margin:5px 15px;
  overflow: hidden;
  box-shadow: 0 2px 5px -3px nth($grey-color,2);
  @include transition(0.2s);
  p{
    display: inline-block;
    color:#fff;
  }
  &:hover{
    background-color: nth($base-color,3);
    @include transition(0.2s);
  }
  &.loading{
    position: relative;

    &.up-professional-btn{
      span{
        opacity: 0;
        transition: all .3s ease;
      }
    }

    &:before{
      position: absolute;
      content: '';
      width: 15px;
      height: 15px;
      top: 50%;
      left: 0;
      right:0;
      margin:-9px auto 0 auto;
      border: solid 2px;
      -webkit-animation: rotateloader 1s infinite linear;
      -o-animation: rotateloader 1s infinite linear;
      animation: rotateloader 1s infinite linear;
      border-radius: 50%;
      border-top-color: transparent;
    }
  }


  &.error{
    background-color: #E74C3C;
    &.loading{
      &:before{
        display: none;
      }
    }
  }

  &--small{
    font-size:1em;
  }
  &--extra-small{
    padding: 2px 10px;
    font-size: 0.8em;
    flex:1;
    text-align: center;
  }
  &--large{
    font-weight: 600;
    padding:10px 25px;
    font-size: 1.3em;
  }
  &--full-width{
    width:100%;
    text-align: center;
    margin:0;
  }

  &--transparent{
    background-color:transparent;
    color:#515151;
    border:1px solid #e6e4e5;

    &:hover{
      background-color:transparent;
    }
  }
  span{
      opacity: 1;
      transition: all .3s ease;

    i{
      margin:0 10px 0 0;
    }
  }
}

@keyframes rotateloader {
  from{
    transform: rotate(0deg);
  }
  to{
    transform: rotate(360deg);
  }
}