checkbutton {
  border-spacing: 4px;
  border-radius: $button_radius + 3px;
  padding: 3px;

  @include focus-ring();

  .osd &:focus:focus-visible {
    outline-color: $osd_focus_color;
  }

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

check,
radio {
  min-height: 14px;
  min-width: 14px;
  -gtk-icon-size: 14px;
  padding: 3px;

  @if $contrast == 'high' {
    box-shadow: inset 0 0 0 2px $border_color;
  } @else {
    box-shadow: inset 0 0 0 2px $trough_color;
  }

  &:not(:checked):not(:indeterminate) {
    &:hover {
      @if $contrast == 'high' {
        box-shadow: inset 0 0 0 2px gtkalpha(currentColor, .6);
      } @else {
        box-shadow: inset 0 0 0 2px $trough_hover_color;
      }
    }

    &:active {
      @if $contrast == 'high' {
        background-color: gtkalpha(currentColor, .6);
      } @else {
        background-color: $trough_active_color;
      }
      box-shadow: none;
    }
  }

  &:checked,
  &:indeterminate {
    background-color: $fill_color;
    color: $fill_text_color;
    box-shadow: none;

    &:hover { background-image: image(gtkalpha(currentColor, .1)); }
    &:active { background-image: image(transparentize(black, .8)); }
  }

  &:disabled {
    filter: opacity($disabled_opacity);
  }

  .osd & {
    &:checked,
    &:indeterminate {
      background-color: $osd_fill_bg_color;
      color: $osd_fill_fg_color;
    }
  }
}

check {
  border-radius: $button_radius;

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

radio {
  border-radius: 100%;

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

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

checkbutton.selection-mode {
  border-radius: 100px;

  check, radio {
    padding: 7px;
    border-radius: 100px;
  }

  label {
    &:dir(ltr) { margin-right: 6px; }
    &:dir(rtl) { margin-left: 6px; }
  }
}
