add radio component

src/styles/clay/_base.scss

@@ -50,11 +50,10 @@ h6 {
   @include font-size(0.8);
 }
 
-.component {
+label {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding-bottom: $item-spacing-v;
 
   .input {
     white-space: nowrap;
@@ -84,6 +83,10 @@ h6 {
   }
 }
 
+.component {
+  padding-bottom: $item-spacing-v;
+  @include tap-highlight();
+}
 
 .section {
   background: $color-gray-4;
@@ -126,14 +129,6 @@ h6 {
 
 }
 
-label.component{
-  -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1);
-
-  &:active {
-    background-color: rgba(255, 255, 255, 0.1);
-  }
-}
-
 strong {
   @include font-pfdin(medium);
   color: $color-orange;

src/styles/clay/_mixins.scss

@@ -33,3 +33,11 @@
   font-size:$font-size;
   line-height: $base-line-height * ceil($font-size / $base-line-height);
 }
+
+@mixin tap-highlight($color: rgba(255, 255, 255, 0.1)) {
+  -webkit-tap-highlight-color: $color;
+
+  &:active {
+    background-color: $color;
+  }
+}

src/styles/clay/components/radio.scss

@@ -0,0 +1,60 @@
+@import "bourbon";
+@import "clay";
+
+.component-radio {
+
+  @include tap-highlight(rgba(0,0,0,0));
+  display: block;
+
+
+  > .label {
+    display: block;
+    padding-bottom: $item-spacing-v / 2;
+  }
+
+  .radio-group {
+
+    label {
+      padding: $item-spacing-v / 2 0;
+      @include tap-highlight();
+    }
+
+    .label {
+      font-size: 0.9em;
+      padding: 0 $item-spacing-h / 2;
+    }
+
+    input {
+      display: none;
+    }
+
+    i {
+      display: block;
+      position: relative;
+      border-radius: $base-height;
+      width: $base-height;
+      height: $base-height;
+      border: 2px solid $color-gray-7;
+      flex-shrink: 0;
+    }
+
+    input:checked ~ i {
+      border-color: $color-orange;
+      
+      &:after {
+        $padding: 15%;
+        content: '';
+        display: block;
+        position: absolute;
+        left: $padding;
+        right: $padding;
+        top: $padding;
+        bottom: $padding;
+        border-radius: $base-height;
+        background: $color-orange;
+
+      }
+    }
+
+  }
+}