@mixin check() {
  border-radius: $button_radius + 1px;

  &:checked { -gtk-icon-source: -gtk-recolor(url("assets/check-symbolic.symbolic.png")); }
  &:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/dash-symbolic.symbolic.png")); }
}

@mixin radio() {
  border-radius: 100%;

  &:checked { -gtk-icon-source: -gtk-recolor(url("assets/bullet-symbolic.symbolic.png")); }
  &:indeterminate { -gtk-icon-source: -gtk-recolor(url("assets/dash-symbolic.symbolic.png")); }
}

@mixin checkradio() {
  checkbutton, radiobutton { padding: 0 2px; outline-offset: 2px; }

  check, radio {
    margin: 4px;
    padding: 0;
    min-width: $check_size;
    min-height: $check_size;

    // sourced from buttons.scss
    border: 1px solid gtkshade($borders, 0.9);
    color: $fg_color;
    border-color: $borders;
    border-bottom-color: gtkshade($borders, 0.75);
    background-color: $dark_bg_color;
    background-image: linear-gradient(to bottom, gtkshade($dark_bg_color, 1.01), gtkshade($dark_bg_color, 0.92));
    box-shadow: inset 0 1px gtkalpha($light_shadow, 0.5), inset 0 -1px gtkalpha($dark_shadow, 0.025);

    &:hover {
      background-image: linear-gradient(to bottom, gtkshade($dark_bg_color, 1.075), gtkshade($dark_bg_color, 0.945));
      box-shadow: inset 0 1px gtkalpha($light_shadow, 0.5), inset 0 -1px gtkalpha($dark_shadow, 0.025);
    }

    &:active {
      border-color: $borders;
      background-color: gtkshade($dark_bg_color, 0.9);
      background-image: none;
      box-shadow: none;
    }
      
    &:checked {
      color: $fg_color;
      background-color: $bg_color;
      background-image: linear-gradient(to bottom, gtkshade($dark_bg_color, 1.01), gtkshade($dark_bg_color, 0.92));
      box-shadow: inset 0 1px gtkalpha($light_shadow, 0.5), inset 0 -1px gtkalpha($dark_shadow, 0.025);
      
      &:backdrop {
        color: $unfocused_fg_color;
        border-color: gtkshade($unfocused_bg_color, 0.85);
        background-color: $unfocused_bg_color;
        box-shadow: none;
      }

      &:disabled {
        color: $disabled_fg_color;
        background-color: $disabled_bg_color;
        box-shadow: none;

        &:backdrop {
          color: $unfocused_disabled_fg_color;
          background-color: $unfocused_disabled_bg_color;
          box-shadow: none;
        }
      }
    }

    &:disabled {
      color: $disabled_fg_color;
      border-color: $borders;
      background-color: $disabled_bg_color;
      background-image: none;

      &:backdrop {
        color: $unfocused_disabled_fg_color;
        border-color: $unfocused_borders;
        background-color: $unfocused_disabled_bg_color;
        box-shadow: none;
      }
    }

    &:backdrop {
      border-color: $unfocused_borders;
      color: $unfocused_fg_color;
      background-color: $unfocused_bg_color;
      background-image: none;
      box-shadow: none;
    }
  }
  
  check, .check { @include check(); }
  
  radio, .radio { @include radio(); }
  
  menuitem, .menuitem {
    check:hover, radio:hover {
      color: $selected_fg_color;
      background-color: $selected_bg_color;
      background-image: none;
      border-color: $selected_fg_color;
    }
  }
  
  treeview.view check, treeview.view radio {
    &:selected {
      &:focus, & {
        color: $fg_color;
        background-color: $bg_color;
        border-color: gtkshade($borders, 0.8);
      }
      
      &:disabled {
        color: $disabled_fg_color;

        &:backdrop { color: $unfocused_disabled_fg_color; }
      }
    }

    &:backdrop { &:selected, & { color: $unfocused_fg_color; background-color: $unfocused_bg_color; }}
  }

  treeview.view radio:selected { &:focus, & { @include radio(); }} // This is a workaround
}
