checkbutton {
    border-spacing: $button-spacing;

    check,
    radio {
        @include control;
        -gtk-icon-size: rem(16px);
        min-height: 1rem;
        min-width: 1rem;

        &:hover {
            filter: brightness(105%);
        }

        &:active {
            @include control-active;
            filter: brightness(95%);
        }

        &:checked {
            -gtk-icon-source: -gtk-icontheme("check-checked-symbolic");
            @include control-checked;
        }

        &:indeterminate {
            -gtk-icon-source: -gtk-icontheme("check-indeterminate-symbolic");
        }

        &:disabled {
            @include control-disabled;
        }
    }

    check {
        border-radius: rem($window_radius / 3);
    }

    radio {
        border-radius: 50%;
    }
}
