notifications-admin/app/assets/stylesheets/components/radios.scss

.radio-select {

  min-height: 39px;

  &__column {

    display: inline-block;
    vertical-align: top;

    .multiple-choice {
      padding-right: 10px;
      padding-left: 54px - 10px;
    }

  }

  &__button--category {

    margin-right: govuk-spacing(3);
    width: auto;

  }

  &__button--done {

    display: block;
    clear: both;
    margin: 0 0 govuk-spacing(6) 0;
    position: relative;
    top: govuk-spacing(3);

    &:active {
      top: govuk-spacing(3) + 2px;
    }

  }

  .js-enabled & {

    overflow: visible;

    .multiple-choice {
      display: none;
    }

    .js-multiple-choice {
      display: block;
    }

  }

}

.radios-nested {

  margin-bottom: 10px;

  .multiple-choice {

    $circle-diameter: 39px;
    $border-thickness: 4px;
    $border-indent: ($circle-diameter / 2) - ($border-thickness / 2);
    $border-colour: $border-colour;

    float: none;
    position: relative;

    &:before {
      content: "";
      position: absolute;
      bottom: 0;
      left: $border-indent;
      width: $border-thickness;
      height: 100%;
      background: $border-colour;
    }

    label {
      float: none;
    }

    [type=radio]+label::before {
      // To overlap the grey inset line
      background: $white;
    }

    ul {
      // To equalise the spacing between the line and the top/bottom of
      // the radio
      margin-top: 5px;
      margin-bottom: -5px;
      padding-left: 12px;
    }

    .block-label-hint {
      &:after {
        // Adds an little extra segment of line alongside the ‘current folder’
        // hint so that it extends all the way down to the next radio
        content: "";
        position: absolute;
        top: $circle-diameter + 5px;
        left: $border-indent;
        width: $border-thickness;
        height: 25px;
        background: $border-colour;
      }
    }

  }

}

.inline {
  .multiple-choice {
    margin-right: 15px;
  }
}

.radio-slider {

  border-bottom: 2px solid $black;
  height: 18px;
  margin-bottom: 18px + 30px;
  margin-right: -18px;
  margin-left: -18px;
  white-space: nowrap;

  legend {
    display: none;
  }

  .multiple-choice {

    display: inline-block;
    margin-right: 0;
    padding: 0;
    width: 38px;
    margin-right: calc((100% - (38px * 11)) / 10);

    &:last-child {
      margin-right: 0;
    }

    label {

      font-size: 0;
      padding: 0;

      &:before {
        background: $white;
      }

    }

  }

  &-left-value {
    position: absolute;
    bottom: 30px;
    left: 0;
  }

  &-right-value {
    position: absolute;
    bottom: 30px;
    right: 0;
    text-align: right;
  }

}