department-of-veterans-affairs/vets-website

// These style rules for the disabled radio buttons are based on the
// non-disabled rules as defined in USWDS 1.6.14 elements/_inputs.scss style
// sheet. Unlike checkboxes, USWDS provides virtually no styling for disabled
// radio buttons so we are setting up custom styling here. In the unlikely event
// that VA.gov ever stops using USWDS, or upgrades to USWDS 2+, these rules will
// probably have to be updated or removed.
$border-weight-left: 4px;
$margin-left: units(1.5);
$padding-left: calc(#{$margin-left} - #{$border-weight-left});
$padding-left-negative: calc(-#{$margin-left} + #{$border-weight-left});

input[type="radio"],
input[type="checkbox"] {
  cursor: pointer;
}

[type="radio"]:disabled + label {
  color: var(--vads-color-base-lighter);
}

[type="radio"]:disabled + label::before {
  background-color: var(--vads-color-white);
  box-shadow: 0 0 0 2px var(--vads-color-white), 0 0 0 3px var(--vads-color-base-lighter);
}

[type="radio"]:checked:disabled + label::before {
  background-color: var(--vads-color-primary-alt-light);
  box-shadow: 0 0 0 2px var(--vads-color-white), 0 0 0 4px var(--vads-color-primary-alt-light);
}

.rb-fieldset-input {
  margin-bottom: units(2);
  position: relative;
}

.rb-legend {
  float: left;
}

.rb-input {
  border-left: $border-weight-left solid transparent;
  padding-left: $padding-left;
  margin-left: -#{$margin-left};
  position: relative;
}

.rb-input-message {
  display: block;
  padding-bottom: 3px;
  padding-top: 3px;
  padding-left: $padding-left;
  margin-left: $padding-left-negative;
}

//warning
.rb-input-warning {
  border-left-color: var(--vads-color-warning);
}

.rb-input-message-warning {
  background: var(--vads-color-gold-lightest);
}

//error
.rb-input-error {
  border-left-color: var(--vads-color-secondary);
}

.rb-input-message-error {
  background: var(--vads-color-secondary-lightest);
}

//success
.rb-input-success {
  border-left-color: var(--vads-color-success-dark);
}

.rb-input-message-success {
  background: var(--vads-color-success-lighter);
}