@import (less) 'variables.less';
@import (less) 'mixins.less';

.button{
  .box-shadow(none);
  .roundedcorners(5px);
  border: 1px solid @light-border;
  color: @grey-700;
  background-color: @white;
  font-size: 15px;
  text-shadow: none;
  font-size: 15px;
  text-shadow: none;
  padding: 3px 15px;

  i {
    margin-right: 3px;
  }

  &.remove, &.add  {
    i {
      margin-right: 0;
    }
  }

  &.button-primary, 
  &.button-success, 
  &.button-info, 
  &.button-danger, 
  &.button-pink, 
  &.button-warning, 
  &.button-teal,
  &.button-indigo, 
  &.button-violet,
  &.button-slate,
  &.button-logo {
    border-width: 0 !important;
    color: @white;
    .box-shadow(none);
    &:hover, &:focus{
      color: @white;
      .box-shadow(none);
    }
  }
  &.button-success{
    background: @success-300;
    border-color: @success-400;    
    &:hover, &:focus{
      background: @success-400;
      border-color: @success-500; 
    }
  }
  &.button-primary{
    background: @primary-400;
    border-color: @primary-500;    
    &:hover, &:focus{
      background: @primary-500;
      border-color: @primary-600; 
    }
  }
  &.button-info{
    background-color: @info-300;
    border-color: @info-500;
    &:hover, &:focus{
      background-color: @info-500;
      border-color: @info-700; 
    }
  }
  &.button-pink{
    background: @pink-300;
    border-color: @pink-400;    
    &:hover, &:focus{
      background: @pink-400;
      border-color: @pink-500; 
    }
  }
  &.button-danger{
    background: @danger-300;
    border-color: @danger-400;
    &:hover, &:focus{
      background: darken(@danger-300, 5%);
      border-color: darken(@danger-400, 5%); 
    }
  }
  &.button-indigo{
    background-color: @indigo-300;
    border-color: @indigo-400;
    &:hover, &:focus{
      background-color: @indigo-400;
      border-color: @indigo-500; 
    }
  }
  &.button-violet{
    background-color: @violet-300;
    border-color: @violet-400;
    &:hover, &:focus{
      background-color: @violet-400;
      border-color: @violet-500; 
    }
  }
  &.button-teal{
    background-color: @teal-300;
    border-color: @teal-400;
    &:hover, &:focus{
      background-color: @teal-400;
      border-color: @teal-500; 
    }
  }
  &.button-slate{
    background-color: @slate-300;
    border-color: @slate-400;
    &:hover, &:focus{
      background-color: @slate-400;
      border-color: @slate-500; 
    }
  }
  &.button-warning{
    background-color: @warning-300;
    border-color: @warning-400;
    &:hover, &:focus{
      background-color: @warning-400;
      border-color: @warning-500; 
    }
  }
  &.button-logo{
    background-color: fade(@logo-color1, 70);
    border-color: fade(@logo-color1, 70);
    &:hover, &:focus{
      background-color: @logo-color1;
      border-color: @logo-color1; 
    }
  }
}

.bcf-oh {
  overflow: hidden;
}

.clickable {
  cursor: pointer;
}