checkbutton {
  border-spacing: 4px;
  border-radius: $button_radius;
  transition: $focus_transition;

  @include focus-ring();

  &.text-button {
    // this is for a nice focus on check and radios text
    padding: 4px;
  }
}

check,
radio {
  min-height: 14px;
  min-width: 14px;
  border: 1px solid;
  -gtk-icon-source: none;

  & {
    // for unchecked
    $_c: if($variant=='light', white, $bg_color);

    @each $state, $t in ("", "normal"),
                        (":hover", "hover"),
                        (":active", "active"),
                        (":disabled", "insensitive") {
      &#{$state} {
        @include check($t, $_c);
      }
    }
  }

  & {
    // for checked
    @each $t in (':checked'), (':indeterminate') {
      &#{$t} {
        @each $state, $t in ("", "normal"),
                            (":hover", "hover"),
                            (":active", "active"),
                            (":disabled", "insensitive") {
          &#{$state} {
            @include check($t, $checkradio_bg_color, $checkradio_fg_color, $checked: true);
          }
        }
      }
    }
  }

  @if $variant == 'light' {
    // the borders of the light variant versions of checks and radios are too similar in luminosity to the selected background
    // color, hence we need special casing.
    row:selected & { border-color: $checkradio_borders_color; }
  }

  .osd & {
    @include button(osd);

    &:hover { @include button(osd); }
    &:active { @include button(osd-active); }
    &:disabled { @include button(osd-insensitive); }
  }
}

%check,
check {
  border-radius: 3px;
  -gtk-icon-size: 14px;

  &:checked { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/check-symbolic.symbolic.png")),
                                            -gtk-recolor(url("assets/check@2-symbolic.symbolic.png"))); }

  &:indeterminate { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/dash-symbolic.symbolic.png")),
                                                  -gtk-recolor(url("assets/dash@2-symbolic.symbolic.png"))); }
}

%radio,
radio {
  border-radius: 100%;
  -gtk-icon-size: 14px;

  &:checked { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/bullet-symbolic.symbolic.png")),
                                            -gtk-recolor(url("assets/bullet@2-symbolic.symbolic.png"))); }

  &:indeterminate { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/dash-symbolic.symbolic.png")),
                                                  -gtk-recolor(url("assets/dash@2-symbolic.symbolic.png"))); }
}

treeview.view check,
treeview.view radio {
  &:selected {
    &:focus, & {
      color: $checkradio_fg_color;

      @if $variant == 'light' { border-color: $selected_borders_color; }
    }
  }
}

treeview.view radio:selected { &:focus, & { @extend %radio; }} // This is a workaround

//selection-mode
@each $check_state, $check_icon, $check_color, $check_background in
  ('', 'none', 'transparent', $checkradio_bg_color),
  (':hover', 'none', 'transparent', $checkradio_bg_color),
  (':active', 'none', 'transparent', $checkradio_bg_color),
  (':checked', '-gtk-icontheme(\'object-select-symbolic\')', $osd_fg_color, $checkradio_bg_color),
  (':checked:hover', '-gtk-icontheme(\'object-select-symbolic\')', $osd_fg_color, $checkradio_bg_color),
  (':checked:active', '-gtk-icontheme(\'object-select-symbolic\')', $osd_fg_color, $checkradio_bg_color), {

  .view.content-view.check#{$check_state}:not(list),
  .content-view .tile check#{$check_state}:not(list) {
    margin: 4px;
    min-width: 32px;
    min-height: 32px;
    color: #{$check_color};
    background-color: #{$check_background};
    border-radius: 5px;
    background-image: none;
    transition: 200ms;
    box-shadow: none;
    border-width: 0;
    -gtk-icon-source: #{$check_icon};
  }
}
