%bttn {
  border: none;
  border-radius: rem(8);
  font-size: rem(16);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0 rem(16);
  height: rem(36);
  transition: $transitionValue;
  background:none;
  &:hover {
    background: $gray-1;
  }  
  &[disabled]{
    background:$gray-3;
    color:$gray-4;
    cursor: default;
  }
}

%bttn-lg {
  height: rem(60);
}

%bttn-md {
  height: rem(40);
}

%bttn-icon {
  margin-right: rem(14);
  font-size: rem(16);
}

%bttn-primary {
  background: $bright-blue;
  color: white;
  &:not([disabled]){
    &:hover {
      background: darken($bright-blue, 5);
    }
  }  
}

%bttn-secondary {
  background: $dark-blue;
  color: white;
  &:not([disabled]){
    &:hover {
      background: darken($dark-blue, 5);
    }
  }    
}

%bttn-special {
  background: $eggplant;
  color: white;
  &:not([disabled]){
    &:hover {
      background: darken($eggplant, 5);
    }
  }   
}
