clay/src/styles/clay/components/radiogroup.scss

@import "bourbon";
@import "clay";

.component-radio {

  display: block;

  .section & {
    padding-right: $item-spacing-h / 2;
  }

  > .label {
    display: block;
    padding-bottom: $item-spacing-v / 2;
  }

  .radio-group {

    padding-bottom: $item-spacing-v / 2;

    label {
      padding: $item-spacing-v / 2 $item-spacing-h / 2;
    }

    .label {
      font-size: 0.9em;
    }

    input {
      opacity: 0;
      position: absolute;
    }

    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;

      }
    }

  }

  .description {
    padding-left: 0;
    padding-right: 0;
  }
}