@mixin normal_buttons($bg, $fg, $br, $radius : $normal_button_radius) {
  padding: 4px 8px;
  border-style: solid;
  border-width: 1px;
  border-radius: $radius;
  color: $fg;
  border-color: gtkshade($br, 0.85);
  border-bottom-color: gtkshade($br, 0.6);
  background-color: $bg;
  background-image: linear-gradient(to bottom, $bg_color 40%, $base_color 75%);
  box-shadow: 0 2px 3px 0px gtkalpha($dark_shadow, 0.3), inset 0 0 0 1px gtkalpha($light_shadow, 0.3), inset 1px 0 2px 0 gtkalpha($dark_shadow, 0.2), inset -1px 0 2px 0 gtkalpha($dark_shadow, 0.2), inset 0 6px 3px -2px $light_shadow;
  -gtk-outline-radius: $radius;

  &:hover {}

  &:active, &:checked {
    background-image: linear-gradient(to bottom, #b6d2ed, #8ebbe8 35%, #63a1df 36%, #b9edff);
    border-color: #07067b;
    border-left-color: gtkshade($selected_bg_color, 1.15);
    border-right-color: gtkshade($selected_bg_color, 1.15);
    border-bottom-color: gtkshade($selected_bg_color, 1.3);
    box-shadow: 0 2px 3px 0px gtkalpha($dark_shadow, 0.3), inset 1px 0 2px 0 gtkalpha($dark_shadow, 0.4), inset -1px 0 2px 0 gtkalpha($dark_shadow, 0.4), inset 0 4px 3px -2px gtkalpha($light_shadow, 0.8);

    &:backdrop {
      color: $unfocused_fg_color;
      border-color: gtkshade($unfocused_bg_color, 0.85);
      background-image: linear-gradient(to bottom, $base_color 20%, $unfocused_bg_color 40%, $base_color 75%);
      background-color: gtkshade($unfocused_bg_color, 0.85);
      box-shadow: inset 0 2px 3px 1px gtkalpha($dark_shadow, 0.25), inset 0 1px gtkshade($bg_color, 0.55);
    }
    
    &:disabled {
      color: gtkmix($fg, $unfocused_disabled_fg_color, 0.1);
      border-color: gtkmix($fg, $disabled_bg_color, 0.85);
      background-image: linear-gradient(to bottom, $base_color 20%, $unfocused_bg_color 40%, $base_color 75%);
      background-color: gtkshade($disabled_bg_color, 0.9);
      box-shadow: inset 0 2px 3px 1px gtkalpha($dark_shadow, 0.2), inset 0 1px gtkshade($bg_color, 0.55);
      
      &:backdrop {
        color: $unfocused_disabled_fg_color;
        border-color: $unfocused_borders;
        background-color: gtkshade($unfocused_disabled_bg_color, 0.9);
        box-shadow: inset 0 2px 3px 1px gtkalpha($dark_shadow, 0.15), inset 0 1px gtkshade($bg_color, 0.55);
      }
    }
  }

  &:disabled {
    color: gtkmix($fg, $unfocused_disabled_fg_color, 0.5);
    box-shadow: 0 2px 3px 0px gtkalpha($dark_shadow, 0.2), inset 0 0 0 1px gtkalpha($light_shadow, 0.3), inset 1px 0 2px 0 gtkalpha($dark_shadow, 0.2), inset -1px 0 2px 0 gtkalpha($dark_shadow, 0.2), inset 0 6px 3px -2px $light_shadow;
    
    &:backdrop {
      color: $unfocused_disabled_fg_color;
      box-shadow: 0 2px 3px 0px gtkalpha($dark_shadow, 0.15), inset 0 0 0 1px gtkalpha($light_shadow, 0.3), inset 1px 0 2px 0 gtkalpha($dark_shadow, 0.2), inset -1px 0 2px 0 gtkalpha($dark_shadow, 0.2), inset 0 6px 3px -2px $light_shadow;
    }
  }

  &:backdrop {
    color: $unfocused_fg_color;
    background-color: $unfocused_base_color;
    box-shadow: 0 2px 3px 0px gtkalpha($dark_shadow, 0.1), inset 0 0 0 1px gtkalpha($light_shadow, 0.3), inset 1px 0 2px 0 gtkalpha($dark_shadow, 0.2), inset -1px 0 2px 0 gtkalpha($dark_shadow, 0.2), inset 0 6px 3px -2px $light_shadow;
  }
}

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

  &:hover {
    color: $fg;
    border-color: gtkshade($br, 0.6);
    background-color: $bg;
    background-image: linear-gradient(to bottom, $base_color 15%, $bg_color 40%, $base_color 75%);
    box-shadow: 0 2px 3px 0px gtkalpha($dark_shadow, 0.3), inset 0 0 0 1px gtkalpha($light_shadow, 0.3), inset 1px 0 2px 0 gtkalpha($dark_shadow, 0.2), inset -1px 0 2px 0 gtkalpha($dark_shadow, 0.2), inset 0 6px 3px -2px $light_shadow;
  }

  &:active, &:checked {
    background-image: linear-gradient(to bottom, #b6d2ed, #8ebbe8 35%, #63a1df 36%, #b9edff);
    border-color: #07067b;
    border-left-color: gtkshade($selected_bg_color, 1.15);
    border-right-color: gtkshade($selected_bg_color, 1.15);
    border-bottom-color: gtkshade($selected_bg_color, 1.3);
    box-shadow: 0 2px 3px 0px gtkalpha($dark_shadow, 0.3), inset 1px 0 2px 0 gtkalpha($dark_shadow, 0.4), inset -1px 0 2px 0 gtkalpha($dark_shadow, 0.4), inset 0 4px 3px -2px gtkalpha($light_shadow, 0.8);
    
    &:backdrop {
      color: $unfocused_fg_color;
      border-color: gtkshade($unfocused_bg_color, 0.85);
      background-color: gtkshade($unfocused_bg_color, 0.85);
      box-shadow: inset 0 2px 3px 1px gtkalpha($dark_shadow, 0.25), inset 0 1px gtkshade($bg_color, 0.55);
    }
  }

  &:disabled {
    border-color: transparent;
    color: gtkalpha($fg, 0.8);
    background-color: transparent;
    box-shadow: none;
    
    &:backdrop {
      border-color: transparent;
      color: gtkalpha($fg, 0.7);
      background-color: transparent;
      box-shadow: none;
    }
  }

  &:backdrop {
    border-color: transparent;
    background-color: transparent;
    color: $unfocused_fg_color;
    box-shadow: none;
  }
}

@mixin button() {
  button {
    @include normal_buttons($base_color, $fg_color, $borders);
    
    &.flat {
      @include flat_buttons($base_color, $fg_color, $borders);
    }
  }
}
