Bootstrap "Button Group" Different Color For Each "Active" Button

Question

I have a bootstrap buttongroup in my razor page as follows:

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-default  btn-na">
        <input id="NA" name="Selection" type="radio" value="NA"> NA
    </label>
    <label class="btn btn-default  btn-yes">
        <input id="Yes" name="Selection" type="radio" value="Yes"> Yes
    </label>
    <label class="btn btn-default  btn-no">
        <input id="No" name="Selection" type="radio" value="No"> No
    </label>
    <label class="btn btn-default  btn-maybe">
        <input id="Maybe" name="Selection" type="radio" value="Maybe"> Maybe
    </label>
</div>

The requirement is make the each button of different color as below (only when they are "selected" / "active"). Not "active" buttons get the default bootstrap color:

btn-na -> blue (only when active)
btn-yes -> green (only when active)
btn-no -> red (only when active)
btn-maybe -> yellow (only when active)

UPDATE 1: After getting idea from @juzraai, my updated scss file is as follows which is unfortunately lengthy and not "DRY" as I was hoping for. I have overridden bootstrap so the "selected" / "active" button is of different color:

.btn-na:active,
.btn-na.active,
.btn-na:active:focus,
.btn-na:active.focus,
.btn-na.active:focus,
.btn-na.active.focus
{
    background-color: #00ace6;
}

.btn-na:active:hover,
.btn-na.active:hover
{
    background-color: #0099cc;
}

.btn-yes:active,
.btn-yes.active,
.btn-yes:active:focus,
.btn-yes:active.focus,
.btn-yes.active:focus,
.btn-yes.active.focus
{
    background-color: #39ac73;
}

.btn-yes:active:hover,
.btn-yes.active:hover
{
    background-color: #339966;
}

.btn-no:active,
.btn-no.active,
.btn-no:active:focus,
.btn-no:active.focus,
.btn-no.active:focus,
.btn-no.active.focus
{
    background-color: #ff8080;
}

.btn-no:active:hover,
.btn-no.active:hover
{
    background-color: #ff6666;
}

.btn-maybe:active,
.btn-maybe.active,
.btn-maybe:active:focus,
.btn-maybe:active.focus,
.btn-maybe.active:focus,
.btn-maybe.active.focus
{
    background-color: #ffdb4d;
}

.btn-maybe:active:hover,
.btn-maybe.active:hover
{
    background-color: #ffcc00;
}

I found a way of trying out bootstrap online here (link below). This works as intended but not elegant:

https://www.bootply.com/oBNsHuNBMx

UPDATE 2: As per @juzraai's mixin solution my final scss is as follows:

@mixin b($c1, $c2) {
  &.active {
    &:active, &.active, &:focus, &.focus { background-color: $c1; }
    &:hover { background-color: $c2; }
  }
}

.btn {
    &.btn-na { @include b(#1ac6ff, #00ace6); }
    &.btn-yes { @include b(#53c68c, #39ac73); }
    &.btn-no { @include b(#ffb3b3, #ff8080); }
    &.btn-maybe { @include b(#ffe680, #ffdb4d); }
}

Working sample below:

http://jsfiddle.net/pateegutee/7nyddj8p/

Answer 1

I was hoping to get a more elegant scss code applying different color to each button

Well, I would do it using a mixin and references to parent selector:

@mixin b($c1, $c2) {
  &:active, &.active, &:focus, &.focus { background-color: $c1 !important; }
  &:hover { background-color: $c2 !important; }
}

.btn {
    &.btn-default { @include b($colorLtBlue,  $colorBlue); }
    &.btn-na      { @include b($colorLtBlue,  $colorBlue); }
    &.btn-yes     { @include b($colorLtGreen, $colorGreen); }
    // ...
}

Working example:

.btn.btn-default:active, .btn.btn-default.active, .btn.btn-default:focus, .btn.btn-default.focus {
  background-color: lightblue !important;
}
.btn.btn-default:hover {
  background-color: blue !important;
}
.btn.btn-na:active, .btn.btn-na.active, .btn.btn-na:focus, .btn.btn-na.focus {
  background-color: lightblue !important;
}
.btn.btn-na:hover {
  background-color: blue !important;
}
.btn.btn-yes:active, .btn.btn-yes.active, .btn.btn-yes:focus, .btn.btn-yes.focus {
  background-color: lightgreen !important;
}
.btn.btn-yes:hover {
  background-color: green !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<button class="btn btn-default">default</button>
<button class="btn btn-na">na</button>
<button class="btn btn-yes">yes</button>
<br>
<button class="btn btn-default active">default</button>
<button class="btn btn-na active">na</button>
<button class="btn btn-yes active">yes</button>