proposed approach:
0: absolute first idea was to take the hit on being code redundant and just rewrite the styling rules which includes more than below
.chbx[type="checkbox"]:checked + .label:before {
// background-color: #007bff; /* Change to desired checked color */
}
/* Style the pseudo-element to resemble the checkmark */
.label:after {
content: '\2713'; /* Unicode checkmark character */
font-size: 16px;
// background-color: blue;
color: $greystern; /* Color of checkmark */
position: absolute;
top: 15px;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0; /* Hide checkmark by default */
}
0: if I recall, styled components allows props which can then be used in logic determinations, which I don't believe sass mixins can
// still haven't tried either option:
1: first actual attempt will be:
use those 2 above .scss code blocks with element id props, assuming all the other code will still apply & ID sufficiently distinctive
attempting to do:
error:
proposed approach: 0: absolute first idea was to take the hit on being code redundant and just rewrite the styling rules which includes more than below
0: if I recall, styled components allows props which can then be used in logic determinations, which I don't believe sass mixins can
// still haven't tried either option:
1: first actual attempt will be: use those 2 above .scss code blocks with element id props, assuming all the other code will still apply & ID sufficiently distinctive