%body
  .vertical-align
    .btns
      %label
        %input{:checked => "", :name => "button-group", :type => "radio", :value => "item"}
          %span.btn.first Never
      %label
        %input{:name => "button-group", :type => "radio", :value => "other-item"}
          %span.btn Sometimes
      %label
        %input{:name => "button-group", :type => "radio", :value => "other-item"}
          %span.btn Often
      %label
        %input{:name => "button-group", :type => "radio", :value => "third"}
          %span.btn Usually 
      %label
        %input{:name => "button-group", :type => "radio", :value => "third"}
          %span.btn.last Always
      

@import "bourbon";
@import url(https://fonts.googleapis.com/css?family=Inter:600,);

$gradient:      linear-gradient(100deg, rgb(255,90,100) 0%, rgb(250,160,75) 30%, rgb(210,220,105) 70%, rgb(14,244,155) 100%);
$background:    #ff9035;
$button-height: 80px;
$border-radius: $button-height / 2;

* {
  box-sizing: border-box;
}
body {
  font-family: Inter, Helvetica Neue, sans-serif;
  font-weight: 600;
  display: table;
  height: 100%;
  width: 100%;
}
.vertical-align {
  display: table-cell;
  vertical-align: middle;
  height: 100vh;
}
.button-link {
  text-decoration: none;
}

.btns {  
  background-color: $background; 
  @include background-image($gradient);
  z-index: 0;
  height: $button-height;
  float: none;
  margin: 0 auto;
  width: 900px;
  max-width: 100%;
  border-radius: $border-radius;
  display: block;
  box-shadow: 0 2px 4px -1px rgba(25, 25, 25, 0.2);
  input {
    display: none;
  }
  label {
    display: table;
    float: left;
    padding: 0;
    width: 20%;
    height: 100%;
    margin: 0;
    text-align: center;
    border-left: 1px solid transparentize(#000, .95);
    &:first-child {
      border-left: none;
      border-radius: $border-radius 0 0 $border-radius;
    }
    &:last-child {
      border-radius: 0 $border-radius $border-radius 0;
    }
  }
  .btn {
    font-size: 19px;
    cursor: pointer;
    width: 100%;
    display: table-cell;
    vertical-align: middle;
    font-weight: 300;
    color: #FFF;
    text-shadow: 0 1px 2px rgba(0,0,0,.04);
    box-shadow: inset 0 30px 20px -20px rgba(255,255,255,.15);
    @include transition(color 250ms $ease-out-quart, box-shadow 250ms $ease-in-quart);
    &:hover {
      box-shadow: inset 0 30px 30px -20px rgba(50,50,50,.02);
      @include transition(all 250ms $ease-out-quart);
    }
    &:after {
      content: '\2714';
      margin-left: -10px;
      display: inline-block;
      @include transform(scale(0));
      @include transition(margin 250ms $ease-in-back 100ms, transform 250ms $ease-in-quart);
    }
  }
  .first {
    border-radius: $border-radius 0 0 $border-radius;
  }
  .last {
    border-radius: 0 $border-radius $border-radius 0;
  }
  input:checked + .btn {
    color: rgba(0,0,0,.72);
    text-shadow: none;
    @include background-image(linear-gradient(to top, rgba(25,25,25,0) 65%, rgba(25,25,25,.08)));
    box-shadow: inset 0 10px 50px rgba(25,25,25,.08);
    @include transition(color 500ms $ease-out-quart, box-shadow 150ms);
    &:after {
      margin-left: 12px;
      @include transform(scale(1.25));
      @include transition(transform 500ms $ease-out-back 250ms, margin 500ms);
    }
  }
}