[type="radio"]:checked:not(:disabled) + label {
  color: $radio-fill-color;
}

// Checked styles
[type="radio"]:checked + label:before {
  border: 2px solid $radio-fill-color;
}

[type="radio"]:checked + label:after {
  border: 2px solid $radio-fill-color;
  background-color: $radio-fill-color;
}

[type="radio"]:focus + label:before {
  box-shadow: 0 0 3px 2px lighten($brand-primary, 10%);
}

[type="checkbox"] {

  &:checked {

    + label:after {
      border: 2px solid $brand-primary-dark;
      background-color: $brand-primary-dark;
    }
  }

  // Focused styles
  &.tabbed:checked:focus + label:after {
    background-color: $brand-primary-dark;
    border-color: $brand-primary-dark;
  }

}

// Make the animation obvious when another element
// is changing the selected radio.
// This class is set in social_group in the
// social_group_validate_group_selection function.
.js--animate-enabled-form-control:checked + label {
  animation: scale-form-control 0.5s ease-in 0.5s;
}

@keyframes scale-form-control {
  0%   {transform: scale(1)}
  50%  {transform: scale(1.1)}
  100% {transform: scale(1)}
}