@mixin normal_buttons($bg, $fg, $br) {
  padding: 5px 6px;
  border-style: solid;
  border-width: 1px;
  border-radius: $button_radius;
  color: $fg;
  border-color: gtkshade($borders, 0.95);
  border-left-color: gtkshade($borders, 0.925);
  border-right-color: gtkshade($borders, 0.925);
  border-bottom-color: gtkshade($borders, 0.78);
  background-color: $bg;
  background-image: linear-gradient(to bottom, gtkshade($bg, 1.05), gtkshade($bg, 0.975));
  -gtk-outline-radius: $button_radius;
  
  @if $variant != 'dark' {
    box-shadow: inset 0 0 0 1px gtkalpha($light_shadow, 0.3);
  }
  @else {
    box-shadow: inset 0 0 0 1px gtkalpha($light_shadow, 0.08);
  }
  
  outline-offset: -1px;
  outline-style: solid;
  outline-color: gtkshade($selected_bg_color, 0.9);
  -gtk-outline-radius: $button_radius;

  &:hover {
    box-shadow: 0 1px gtkalpha($dark_shadow, 0.085), 1px 0 gtkalpha($dark_shadow, 0.055), -1px 0 gtkalpha($dark_shadow, 0.055);
    
    &:focus:not(:checked) {
      box-shadow: 0 1px gtkalpha($selected_bg_color, 0.3), 1px 0 gtkalpha($selected_bg_color, 0.25), -1px 0 gtkalpha($selected_bg_color, 0.25);
    }
  }

  &:active, &:checked:active {
    background-image: linear-gradient(to bottom, gtkshade($bg, 0.92), gtkshade($bg, 0.975));
  }
  
  &:backdrop {
    background-image: none;
    @if $variant != 'dark' {
      box-shadow: inset 0 0 0 1px gtkalpha($light_shadow, 0.25);
    }
    @else {
      box-shadow: inset 0 0 0 1px gtkalpha($light_shadow, 0.07);
    }
    
    &:hover {
      background-color: gtkshade($bg, 1.065);
    }
  }
  
  &:checked {
    border-color: gtkshade($borders, 0.8);
    border-left-color: gtkshade($borders, 0.725);
    border-right-color: gtkshade($borders, 0.725);
    border-top-color: gtkshade($borders, 0.65);
    background-color: gtkmix($bg, $fg, 0.1);
    background-image: linear-gradient(to bottom, gtkshade($bg, 0.8), gtkshade($bg, 0.95));
    box-shadow: inset 0 2px 2px 0 gtkalpha($dark_shadow, 0.1);

    &:backdrop {
      box-shadow: inset 0 2px 2px 0 gtkalpha($dark_shadow, 0.075);
      background-image: linear-gradient(to bottom, gtkshade($bg, 0.8), gtkshade($bg, 0.95));
      
      &:hover {
        background-color: gtkshade($bg, 1.065);
        background-image: none;
      }
    }
    
    &: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);
      box-shadow: inset 0 2px 2px 0 gtkalpha($dark_shadow, 0.025);
      background-image: linear-gradient(to bottom, gtkshade($disabled_bg_color, 0.95), gtkshade($disabled_bg_color, 0.99));
      
      &:backdrop {
      }
    }
  }

  &:disabled {
    color: gtkmix($fg, $unfocused_disabled_fg_color, 0.5);
    background-color: gtkshade($disabled_bg_color, 0.98);
    background-image: none;
    box-shadow: none;
    border-color: gtkshade($unfocused_borders, 0.96);
    
    &:backdrop {
      background-color: gtkshade($disabled_bg_color, 0.96);
      border-color: $unfocused_borders;
    }
  }
}

@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 {
    border-color: $br;
    color: $fg;
    background-color: $bg;
  }

  &:active, &:checked {
    color: $fg_color;
    background-color: gtkmix($bg_color, $fg_color, 0.1);
    
    &:backdrop {
    }
  }

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

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

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