@mixin normal_buttons($bg, $fg, $br) {
  padding: 4px 8px;
  border-style: solid;
  border-width: 1px;
  border-radius: $button_radius;
  color: $fg;
  border-color: $br;
  background-color: $bg;
  box-shadow: inset -2px 0 gtkshade($bg, 0.65), inset 0 -2px gtkshade($bg, 0.65), inset 1px 0 $light_shadow, inset 0 1px $light_shadow;
  outline-offset: -5px;

  &:hover {
  }
  
  &:focus {
    box-shadow: inset -3px 0 gtkshade($bg, 0.65), inset 0 -3px gtkshade($bg, 0.65), inset 2px 0 $light_shadow, inset 0 2px $light_shadow, inset 0 0 0 1px $dark_shadow;
  }

  &:active {
    color: $fg;
    border-color: $br;
    background-color: $bg;
    background-image: none;
    box-shadow: inset 2px 0 gtkshade($bg, 0.65), inset 0 2px gtkshade($bg, 0.65), inset -1px 0 $light_shadow, inset 0 -1px $light_shadow;
  }

  &:checked {
    color: $fg;
    border-color: $br;
    box-shadow: none;
    background-color: $bg;
    background-image: linear-gradient(to bottom left, $base_color 33%, $bg 34%, $bg 66%, $base_color 67%);
    background-size: 3px 3px, auto;
    
    &:focus { box-shadow: inset 0 0 0 1px $dark_shadow; }

    &:disabled {
      color: gtkmix($fg, $unfocused_disabled_fg_color, 0.1);
      border-color: gtkmix($fg, $disabled_bg_color, 0.85);
      background-color: gtkshade($disabled_bg_color, 0.9);
    }
  }

  &:disabled {
    color: gtkmix($fg, $unfocused_disabled_fg_color, 0.5);
  }
}

@mixin flat_buttons($bg, $fg, $br)
{
  border-color: transparent;
  border-radius: $button_radius;
  color: $fg;
  box-shadow: none;
  background-color: transparent;

  &:hover {
    color: $fg;
    border-color: $br;
    background-color: $bg;
    box-shadow: inset -2px 0 gtkshade($bg, 0.65), inset 0 -2px gtkshade($bg, 0.65), inset 1px 0 $light_shadow, inset 0 1px $light_shadow;
  }

  &:active {
    color: $fg;
    border-color: $br;
    background-color: $bg;
    background-image: none;
    box-shadow: inset 2px 0 gtkshade($bg, 0.65), inset 0 2px gtkshade($bg, 0.65), inset -1px 0 $light_shadow, inset 0 -1px $light_shadow;
  }

  &:checked {
    color: $fg;
    border-color: $br;
    box-shadow: none;
    background-color: $bg;
    background-image: linear-gradient(to bottom left, $base_color 33%, $bg 34%, $bg 66%, $base_color 67%);
    background-size: 3px 3px, auto;
  }

  &:disabled {
    border-color: transparent;
    color: gtkalpha($fg, 0.8);
    background-color: transparent;
  }
}

@mixin button() {
  button {
    @include normal_buttons($bg_color, $fg_color, $borders);

    &.flat {
      @include flat_buttons($bg_color, $fg_color, $borders);
    }
  }
}
