@mixin normal_buttons($bg, $fg, $br) {
  padding: 4px 8px;
  border: none;
  border-radius: $button_radius;
  color: $fg;
  background-color: $bg;
  outline-style: none;
  -gtk-outline-radius: $button_radius;

  &:hover {}
  
  &:focus {
    background-color: $base_color;
    color: $fg;
    
    @if $variant != 'dark' {
      box-shadow: 0 9px 6px 0 gtkalpha($dark_shadow, 0.3);
    }
    @else {
      box-shadow: 0 9px 6px 0 gtkalpha($light_shadow, 0.3);
    }
  }

  &:active, &:checked {
    color: $selected_fg_color;
    background-color: $selected_bg_color;

    &:backdrop {
      color: $unfocused_selected_fg_color;
      background-color: $unfocused_selected_bg_color;
    }
    
    &:disabled {
      color: $disabled_fg_color;
      background-color: gtkshade($disabled_bg_color, 0.9);
      &:backdrop {
        color: $unfocused_disabled_fg_color;
        background-color: gtkshade($unfocused_disabled_bg_color, 0.9);
      }
    }
  }

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

    &:backdrop { color: $unfocused_disabled_fg_color; }
  }

  &:backdrop { color: $unfocused_fg_color; }
}

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

  &:hover {
    color: $fg;
    background-color: $bg;
  }

  &:active, &:checked {
    color: $selected_fg_color;
    background-color: $selected_bg_color;

    &:backdrop {
      color: $unfocused_selected_fg_color;
      background-color: gtkshade($unfocused_selected_bg_color, 0.6);
    }
  }

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

    &:backdrop {
      color: gtkalpha($fg, 0.7);
      background-color: transparent;
    }
  }

  &:backdrop { color: $unfocused_fg_color; }
}

@mixin button() {
  button {
    @include normal_buttons(gtkalpha($bg_color, 0.25), $fg_color, $borders);
    
    &.flat {
      @include flat_buttons(transparent, $fg_color, $borders);
    }
  }
}
