$check_radius: 6px;

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

  @include focus-ring();

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

  &.grouped {
    border-radius: 999px;
  }
}

check,
radio {
  transition: $button_transition;
  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 color-mix(in srgb, currentColor 60%, transparent);
      } @else {
        box-shadow: inset 0 0 0 2px $trough_hover_color;
      }
    }

    &:active {
      @if $contrast == 'high' {
        background-color: color-mix(in srgb, currentColor 60%, transparent);
      } @else {
        background-color: $trough_active_color;
      }
      box-shadow: none;
    }
  }

  &:checked,
  &:indeterminate {
    background-color: var(--accent-bg-color);
    color: var(--accent-fg-color);
    box-shadow: none;

    &:hover { background-image: image(color-mix(in srgb, currentColor 10%, transparent)); }
    &:active { background-image: image(RGB(0 0 6 / 20%)); }
  }

  &:disabled {
    filter: Opacity(var(--disabled-opacity));
  }
}

check {
  border-radius: $check_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; }
  }
}
