Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.4)
// Compass (v1.0.1)
// ----

%alertHeader {
    font-size: 18px;
    line-height: 1;
    text-transform: uppercase;
    color: #9b9b9b;
    border-bottom: 2px solid #ccc;
    text-align: center;
}
%alertToggleCell {
    border-bottom: 1px solid #e1e1e1;
    padding: 23px 0;
    height: 76px;
}
%toggleOption {
  width: 25%;
  text-align: center;
  background-color: #e6e6e6;
  border-radius: 4px;
  color: #fff;
  transition: all 400ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
  cursor: default;
  height: 30px;
  box-shadow: 0 2px rgba(172,172,172,.6);
}
.alertToggles {

    &--header {

        &__type {
            @extend %alertHeader;
        }
        &__email {
            @extend %alertHeader;
        }
        &__sms {
            @extend %alertHeader;
        }
    }
    &__type {
        @extend %alertToggleCell;
        font-size: 20px;
        text-transform: uppercase;
    }
    &__email {
        @extend %alertToggleCell;
    }
    &__sms {
        @extend %alertToggleCell;
    }
    &--alwaysOn {
        font-size: 20px;
        text-transform: uppercase;
        color: #dadada;
        text-align: center;
    }
}
.toggle {
  border-radius: 4px;
    padding-bottom: 2px;

  &__confirm {
    @extend %toggleOption;
    float: left;

    &.selected {
      width: 73%;
      background-color: #06c;
    }
  }
  &__deny {
    @extend %toggleOption;
    float: right;

    &.selected {
      width: 73%;
      background-color: #b00;
    }
  }
}

SassMeister-output.css

.alertToggles--header__type, .alertToggles--header__email, .alertToggles--header__sms {
  font-size: 18px;
  line-height: 1;
  text-transform: uppercase;
  color: #9b9b9b;
  border-bottom: 2px solid #ccc;
  text-align: center;
}

.alertToggles__type, .alertToggles__email, .alertToggles__sms {
  border-bottom: 1px solid #e1e1e1;
  padding: 23px 0;
  height: 76px;
}

.toggle__confirm, .toggle__deny {
  width: 25%;
  text-align: center;
  background-color: #e6e6e6;
  border-radius: 4px;
  color: #fff;
  transition: all 400ms cubic-bezier(0.075, 0.82, 0.165, 1);
  cursor: default;
  height: 30px;
  box-shadow: 0 2px rgba(172, 172, 172, 0.6);
}

.alertToggles__type {
  font-size: 20px;
  text-transform: uppercase;
}
.alertToggles--alwaysOn {
  font-size: 20px;
  text-transform: uppercase;
  color: #dadada;
  text-align: center;
}

.toggle {
  border-radius: 4px;
  padding-bottom: 2px;
}
.toggle__confirm {
  float: left;
}
.toggle__confirm.selected {
  width: 73%;
  background-color: #06c;
}
.toggle__deny {
  float: right;
}
.toggle__deny.selected {
  width: 73%;
  background-color: #b00;
}