@mixin normal_buttons($bg, $fg, $br) {
  padding: 3px;
  border-style: solid;
  border-width: 1px;
  border-radius: $button_radius;
  color: $fg;
  border-color: $br;
  background-color: $bg;
  background-image: linear-gradient(to bottom, gtkshade($bg, 1.1), gtkshade($bg, 0.985) 50%, gtkshade($bg, 0.95) 51%, gtkshade($bg, 0.94));
  box-shadow: inset 0 0 0 1px gtkalpha($light_shadow, 0.6);

  &:hover {
    color: $fg;
    border-color: gtkshade($selected_bg_color, 0.7);
    background-color: gtkshade($selected_bg_color, 1.02);
    background-image: linear-gradient(to bottom, gtkshade($selected_bg_color, 1.12), $selected_bg_color 50%, gtkshade($selected_bg_color, 0.95) 51%);
  }

  &:active, &:checked {
    color: $fg;
    border-color: gtkshade($selected_bg_color, 0.6);
    background-color: gtkshade($selected_bg_color, 0.95);
    background-image: linear-gradient(to bottom, gtkshade($selected_bg_color, 1.07), gtkshade($selected_bg_color, 0.95) 50%, gtkshade($selected_bg_color, 0.9) 51%);

    &:backdrop {
      color: $unfocused_fg_color;
      border-color: gtkshade($unfocused_bg_color, 0.85);
      background-color: gtkshade($unfocused_bg_color, 0.85);
      background-image: linear-gradient(to bottom, gtkshade($unfocused_selected_bg_color, 1.07), gtkshade($unfocused_selected_bg_color, 0.95) 50%, gtkshade($unfocused_selected_bg_color, 0.9) 51%);
    }
    
    &:disabled {
      color: gtkmix($fg, $unfocused_disabled_fg_color, 0.1);
      
      &:backdrop {
        color: $unfocused_disabled_fg_color;
      }
    }
  }
  
  &:disabled {
    color: gtkmix($fg, $unfocused_disabled_fg_color, 0.1);

    &:backdrop {
      color: $unfocused_disabled_fg_color;
    }
  }

  &:backdrop {
    color: $unfocused_fg_color;
  }
}

@mixin flat_buttons($bg, $fg, $br)
{
  border-color: transparent;
  border-radius: $button_radius;
  color: $fg;
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  
  &:hover {
    color: $fg;
    border-color: gtkshade($selected_bg_color, 0.7);
    background-color: gtkshade($selected_bg_color, 1.02);
    background-image: linear-gradient(to bottom, gtkshade($selected_bg_color, 1.12), $selected_bg_color 50%, gtkshade($selected_bg_color, 0.95) 51%);
  }

  &:active, &:checked {
    color: $fg;
    border-color: gtkshade($selected_bg_color, 0.6);
    background-color: gtkshade($selected_bg_color, 0.95);
    background-image: linear-gradient(to bottom, gtkshade($selected_bg_color, 1.07), gtkshade($selected_bg_color, 0.95) 50%, gtkshade($selected_bg_color, 0.9) 51%);

    &:backdrop {
      color: $unfocused_fg_color;
      border-color: gtkshade($unfocused_bg_color, 0.85);
      background-color: gtkshade($unfocused_bg_color, 0.85);
      background-image: linear-gradient(to bottom, gtkshade($unfocused_selected_bg_color, 1.07), gtkshade($unfocused_selected_bg_color, 0.95) 50%, gtkshade($unfocused_selected_bg_color, 0.9) 51%);
    }
    
    &:disabled {
      color: gtkmix($fg, $unfocused_disabled_fg_color, 0.1);
      
      &:backdrop {
        color: $unfocused_disabled_fg_color;
      }
    }
  }

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

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

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