<h1>Radio checked style</h1>

<div class="box">
  <input type="radio" id="radio1" name="radio1"/>
  <label for="radio1">Crazy Option</label>

  <input type="radio" id="radio2" name="radio1"/>
  <label for="radio2">Freaky Option</label>

  <input type="radio" id="radio3" name="radio1"/>
  <label for="radio3">Cat Option</label>

  <input type="radio" id="radio4" name="radio1" disabled/>
  <label for="radio4">Not an option</label>
</div>

<p>Really nothing special.</p>

/**
 * Basic stuff - not really radio style related
 */

$primary: #e0758e;

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);

html{
  box-sizing: border-box;
  font-size: 95%;
  line-height: 1.5;
  font-family: 'Open Sans',sans-serif;
  background: $primary;
  color: #333;
  text-align: center;
}

*,*:before,*:after{
  box-sizing: inherit;
}

.box{
  width: 100%;
  max-width: 400px;
  margin: 2rem auto;
  background: white;
  border: 1px solid white;
  border-radius: 3px;
  text-align: left;
}

h1{
  color: #fff;
  margin: 10% 0 0 0;
}

p{
  color: #fff;
  font-size: .9rem;
  opacity: .6;
}


/*****
 *
 * Radio checked style related
 * the fun part starts here
 *
 */


// Hide those ugly radioboxes
input[type=radio]{
  display: none;
}

/**
 * How it should look when hovered
 */
.active-label{
  color: $primary;

  &:before{
    background: white;
    border-color: $primary;
  }
}

/**
 * Make those labels sexy
 */
label{
  font-size: 1rem;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
  display: block;
  padding: 1rem 1rem 1rem 3rem;
  position: relative;
  border-top: 1px solid rgba(black,.1);
  background: white;
  whitespace: no-wrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all .15s ease;

  &:focus,
  &:hover,
  &:active{
    @extend .active-label;
  }

  &:first-of-type{
    border: 0;
  }
  
  /**
   * This is the radio fake dot basically
   */
  &:before{
    content: "";
    position: absolute;
    left: 1rem;
    top: 1rem;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: .2rem solid #ccc;
  }
}

/**
 * How it should look when checked
 */
input:checked + label{ 
  @extend .active-label;

  &:before{
    border-color: white;
    border: none;
    background: $primary;
  }
}

/**
 * How it should look when disabled
 */
input:disabled + label{ 
  background: #efefef;
  color: rgba(black,.5);
  cursor: not-allowed;

  &:hover{
    border-color: rgba(black,.1);
  }

  &:before{
    border-color: white;
    background: white;
  }
}