How to Highlight the item options in PDP page with differnt colors for selected, unselected and invalid options using SCSS

Scenario: In PDP page we can customized product options with differnt colors for selected, unselected and invalid options only by using css styles.

Results:

SCSS:

label.product-views-option-tile-picker {
    border: 2px solid #83c72e;
}

.product-views-option-tile-picker:hover {
    border: 2px solid #83c72e;
    color: #222426;
}

.product-views-option-tile-picker.active {
    border: 2px solid #83c72e;
    background-color: rgba(131, 199, 46, 1);
    color: #222426;
}

.product-views-option-tile-picker.muted {
    opacity: 0.4;
    border: 2px solid #7e858b;
}