@import "mixins/all";

.radio-button {
  color: $body;
  cursor: pointer;
  position: relative;
  display: block;
  width: 100%;
  @include border-radius(em(5));
  border: 2px solid $border;
  &:hover { background: $highlight; }
  margin-bottom: lines(0.25);
}

.radio-button-icon {
  position: absolute;
  top: em(8);
  left: em(12);
}

.radio-button-label {
  margin-left: em(40);
  margin-right: lines(1.5);
  padding: em(6) 0 em(10) 0;
}

.radio-button-positive {
  @extend .radio-button;

  &.radio-button-selected {
    color: $green;
    background: lighten($green, 40%);
    &:hover { background: lighten($green, 40%); }
  }
}

.radio-button-negative {
  @extend .radio-button;

  &.radio-button-selected {
    color: $red;
    background: lighten($red, 40%);
    &:hover { background: lighten($red, 40%); }
  }
}