@mixin button($size) {
  @include button-layout($size);
  @include shape-style($size);
  @include button-hover();
  font-weight: $fontweight_base;
}

@mixin button-layout($size) {
    padding: $size;
    padding-top: $size/3;
    padding-bottom: $size/3;
    margin:$size/2;
    margin-top: $size/3;
    margin-bottom: $lineheight;
    //font-size: 4.75mm;
    line-height:$lineheight;
    height:auto;
}

@mixin button-hover() {
  transition: background-color .2s, border .2s, box-shadow .2s, color .2s;
  &:hover, &:active, &:focus {
      background-color:transparent;
  }

  &:focus {
    outline: none;
    box-shadow: $narrow-shadow, $inset-shadow, 0px 0px 0px 2px rgba(0, 0, 0, 0);
      &:before {
        box-shadow: $narrow-shadow, $inset-shadow, 0px 0px 0px 2px rgba(0, 0, 0, 0.3);
        outline: none;
      }
  }
}

@mixin button-fullcontrol($background-color, $hover-color, $text-color) {
    @include colorize-shape($background-color);
    color:$text-color;
    &:visited {
      @include colorize-shape($background-color);
      color:$text-color;
    }
    &, &:visited, &:not(.disabled):not(:disabled) {
        &:hover, &:active, &:focus {
          @include colorize-shape($hover-color);
          color:lighten($text-color, 5%);
        }
    }
}

@mixin button-color($background-color) {
    @include button-fullcontrol($background-color, mix($background-color, getTextColorFromBackground($background-color), 85%), getTextColorFromBackground($background-color));
    box-shadow: $narrow-shadow;
}