@mixin normal_buttons($bg, $fg, $br) {
  & {
    padding: 6px 6px;
    border-style: solid;
    border-width: 1px;
    border-radius: $button_radius;
    color: $fg;
    border-color: gtkmix(gtkshade($br, 0.3), $selected_bg_color, 0.25);
    background-color: $bg;
    background-image: linear-gradient(to top, #90acd0, #90acd0 1px, transparent 1px), linear-gradient(to right, rgba(147, 175, 209, 0.75), rgba(147, 175, 209, 0.75) 1px, rgba(249, 251, 253, 0.45) 1px, rgba(249, 251, 253, 0.45) 2px, transparent 2px), linear-gradient(to left, rgba(147, 175, 209, 0.75), rgba(147, 175, 209, 0.75) 1px, rgba(249, 251, 253, 0.45) 1px, rgba(249, 251, 253, 0.45) 2px, transparent 2px), linear-gradient(to bottom, #d4dfed 1px, #f9fbfd 1px, #f9fbfd 2px, #f3f6fa 2px, #f3f6fa 3px, transparent 3px), linear-gradient(to top, #91add0 1px, #d0dceb 40%, #e3eaf3 45%, #e9eff6 50%, #f1f5f9 60%, #fdfdfe);
    box-shadow: 0px 1px rgba(255, 255, 255, 0.6), 1px 0px rgba(255, 255, 255, 0.2), 0px -1px rgba(0, 0, 0, 0.04), -1px 0px rgba(0, 0, 0, 0.03);
    -gtk-outline-radius: $button_radius;

    &:hover, &:focus {
      box-shadow: inset 0 0 1px 2px #ffc73c;
      border-color: gtkmix(gtkshade($br, 0.3), $selected_bg_color, 0.3);
    }

    &:active, &:checked {
      border-color: shade($br, 0.3);
      background-color: gtkshade($bg_color, 0.95);
      background-image: linear-gradient(to bottom, #d4dfed 1px, #6f94c2 1px, #6f94c2 2px, transparent 2px), linear-gradient(to right, #6f94c2 1px, transparent 1px), linear-gradient(to left, #6f94c2 1px, transparent 1px), linear-gradient(to top, #f9fbfd 1px, #f3f6fa 1px, #f3f6fa 2px, #fdfdfe 2px, #e3eaf3 50%, #91add0 95%);
     
      &:backdrop {
      }
      
      &:disabled {
        color: gtkmix($fg, $unfocused_disabled_fg_color, 0.1);
        border-color: gtkmix($fg, $disabled_bg_color, 0.5);
        background-color: gtkshade($disabled_bg_color, 0.9);
        
        &:backdrop {
        }
      }
    }

    &:disabled {
      color: $disabled_fg_color;
      border-color: gtkshade($br, 0.75);
      background-color: $disabled_bg_color;
        
      &:backdrop {
      }
    }

    &:backdrop {
    }
  }
}

@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: gtkmix(gtkshade($br, 0.3), $selected_bg_color, 0.3);
      background-color: $bg;
      background-image: linear-gradient(to top, #90acd0, #90acd0 1px, transparent 1px), linear-gradient(to right, rgba(147, 175, 209, 0.75), rgba(147, 175, 209, 0.75) 1px, rgba(249, 251, 253, 0.45) 1px, rgba(249, 251, 253, 0.45) 2px, transparent 2px), linear-gradient(to left, rgba(147, 175, 209, 0.75), rgba(147, 175, 209, 0.75) 1px, rgba(249, 251, 253, 0.45) 1px, rgba(249, 251, 253, 0.45) 2px, transparent 2px), linear-gradient(to bottom, #d4dfed 1px, #f9fbfd 1px, #f9fbfd 2px, #f3f6fa 2px, #f3f6fa 3px, transparent 3px), linear-gradient(to top, #91add0 1px, #d0dceb 40%, #e3eaf3 45%, #e9eff6 50%, #f1f5f9 60%, #fdfdfe);
      box-shadow: 0px 1px rgba(255, 255, 255, 0.6), 1px 0px rgba(255, 255, 255, 0.2), 0px -1px rgba(0, 0, 0, 0.04), -1px 0px rgba(0, 0, 0, 0.03);
    }

    &:active, &:checked {
      border-color: gtkshade($br, 0.3);
      background-color: gtkshade($bg_color, 0.95);
      background-image: linear-gradient(to bottom, #d4dfed 1px, #6f94c2 1px, #6f94c2 2px, transparent 2px), linear-gradient(to right, #6f94c2 1px, transparent 1px), linear-gradient(to left, #6f94c2 1px, transparent 1px), linear-gradient(to top, #f9fbfd 1px, #f3f6fa 1px, #f3f6fa 2px, #fdfdfe 2px, #e3eaf3 50%, #91add0 95%);
      
      &:backdrop {
      }
    }

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

    &:backdrop {
    }
  }
}

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