@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;
    background-image: linear-gradient(to bottom, gtkshade($bg, 1.2), gtkshade($bg, 0.8));
    box-shadow: inset 0 1px gtkalpha($light_shadow, 0.1), inset 0 -1px gtkalpha($dark_shadow, 0.1);

    &:hover {
    }

    &:active, &:checked {
      background-color: $selected_bg_color;
      background-image: linear-gradient(to top, gtkshade($bg, 1.2), gtkshade($bg, 0.8));
      box-shadow: inset 0 -1px gtkalpha($light_shadow, 0.1), inset 0 1px gtkalpha($dark_shadow, 0.1);

      &:backdrop {
        border-color: gtkshade($unfocused_bg_color, 0.85);
        background-color: gtkshade($unfocused_bg_color, 0.85);
        background-image: linear-gradient(to bottom, gtkshade($unfocused_bg_color, 1.2), gtkshade($unfocused_bg_color, 0.8));
      }
      
      &:disabled {
        color: gtkmix($fg_color, $disabled_fg_color, 0.5);
        background-color: gtkshade($disabled_bg_color, 0.9);
        background-image: none;
      }
    }

    &:disabled {
      color: gtkmix($fg, $disabled_fg_color, 0.1);
      border-color: gtkmix($bg, $disabled_bg_color, 0.6);
      background-color: gtkmix($bg, $disabled_bg_color, 0.1);
      background-image: none;
      
      &:backdrop {
        color: gtkmix($fg, $unfocused_disabled_fg_color, 0.1);
        border-color: gtkmix($bg, $unfocused_disabled_bg_color, 0.6);
        background-color: $unfocused_disabled_bg_color;
      }
    }

    &:backdrop {
      border-color: $unfocused_borders;
      color: $unfocused_fg_color;
      background-color: $unfocused_bg_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: $br;
      background-color: $bg;
      background-image: linear-gradient(to bottom, gtkshade($bg, 1.2), gtkshade($bg, 0.8));
      box-shadow: inset 0 1px gtkalpha($light_shadow, 0.1), inset 0 -1px gtkalpha($dark_shadow, 0.1);
    }

    &:active, &:checked {
      background-color: $selected_bg_color;
      background-image: linear-gradient(to top, gtkshade($bg, 1.2), gtkshade($bg, 0.8));
      box-shadow: inset 0 -1px gtkalpha($light_shadow, 0.1), inset 0 1px gtkalpha($dark_shadow, 0.1);
      
      &:backdrop {
        border-color: gtkshade($unfocused_bg_color, 0.85);
        background-color: gtkshade($unfocused_bg_color, 0.85);
        background-image: linear-gradient(to bottom, gtkshade($unfocused_bg_color, 1.2), gtkshade($unfocused_bg_color, 0.8));
      }
    }

    &:disabled {
      border-color: transparent;
      color: $disabled_fg_color;
      background-color: transparent;
      
      &:backdrop {
        border-color: transparent;
        color: $unfocused_disabled_fg_color;
        background-color: transparent;
      }
    }

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

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