Webform Checkboxes and Radio Buttons css

Problem/Motivation

I am not certain where this patch should live as it affect Bootstrap Barrio and Webforms.

If you switch the style of checkboxes or radios on a Webform to Button(s) they are not styled. This is simple to fix by adding the necessary theming to the CSS.

Steps to reproduce

1) Create or add any of the following to a webform:

• Radio
• Radio Other
• Checkboxes
• Checkboxes Other

Under "Element options" select any of the following from the "Options display" drop down:

• Buttons - Flexbox
• Buttons - Horizontal
• Buttons - Vertical

Currently, the theming breaks and lacks interaction and lacks any button look and feel.

Proposed resolution

Not certain this is the correct solution but as Webforms is a very popular model, is it worth fixing this in the theme code? We could do this by adding another CSS component:

Create a New File:
css/components/webform.css

/**
 * @file
 * Visual styles for weform's form components.
 */

 /* Button styles for radios and checkboxes when set under "Options Display"*/

.webform-options-display-buttons-horizontal .webform-options-display-buttons-wrapper {
  flex: auto;
}
.webform-options-display-buttons .form-check-label {
    margin: 0 5px 10px 5px;
    border: 3px solid #ccc;
    border-radius: 3px;
    background-color: #fff;
    padding: 10px;
    width: 100%;
}
.webform-options-display-buttons .form-check-label:hover {
  border-color: #999;
  color: #333;
}
.webform-options-display-buttons .form-check-input:checked ~ .form-check-label {
  border-color: #0074bd;
  color: #000;
}
.webform-options-display-buttons .webform-options-display-buttons-wrapper .form-check-label {
  text-align: center;
  margin: 0 5px 10px 0;
}
.webform-options-display-buttons .webform-options-display-buttons-wrapper .radio,
.webform-options-display-buttons .webform-options-display-buttons-wrapper .form-check {
  padding: 0;
}

Add the CSS file to the theme libraries under css: -> component:
bootstrap_barrio.libraries.yml

global-styling:
  css:
    component:
      css/components/webform.css: {}