.buttonCore{
  font-family: $fontFamily;
  @extend .smallText;
  @include noUserSelect();

  // this sucks -.- thank u mozilla for this awesome bug!
  // -> line-height behaviour differs from other browsers.
  //    font-size and the *non* font sans-serif fix it in all ff.
  @-moz-document url-prefix(){
    .buttonCore{font: ($fontSize - 2) sans-serif;}
  }
  border:none;
  cursor:pointer;
}
.button{
  padding:($space/4) ($space/2);
//  line-height:$fontSize;
  height: 24px;
  line-height: 11px;
  display: inline-block;
  margin:0px;
  text-decoration: none;

  border:1px solid darken($buttonSecondColor, 5%);
  color:$lightFontColor;
  background-color:$buttonFirstColor;
  @extend .buttonCore;
  @include transition(all, 0.3s, ease-in-out);

  outline: none;

  &:hover{background-color:darken($buttonFirstColor, 5%);}
  &:focus {
    box-shadow: 0 0 5px $buttonFirstActiveColor;
  }

  &.critical{
    border:1px solid darken($buttonCriticalSecondColor, 5%);
    color:$lightFontColor;
    background-color:$buttonCriticalFirstColor;
    @extend .buttonCore;
    &:hover{background-color:darken($buttonCriticalFirstColor, 5%);}
  }
}
.linkButton{
  @extend .buttonCore;
  color:$middleFontColor;

  &:before{margin-right:5px;}
  &:hover, &.activeLink, &:active{color:$ciColor;};
}