// Taken from https://github.com/alphagov/govuk-frontend/blob/v2.13.0/src/components/checkboxes/_checkboxes.scss
$govuk-touch-target-size: 44px;
$govuk-checkboxes-size: 40px;

.selection-summary {

  .selection-summary__text {
    @include core-19($tabular-numbers: true);
    padding: 5px 0 0 0;
    margin-bottom: govuk-spacing(3);

    &:focus {
      outline: none;
    }
  }

  .selection-summary__text--folders {
    padding: 10px 15px 5px 51px;
    background-image: file-url('folder-black.svg');
    background-repeat: no-repeat;
    background-size: 39px auto;
    background-position: 0px 4px;
  }

}

.checkboxes-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=checkbox]+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;
    }

  }

}

.govuk-form-group--nested {

  $border-thickness: $govuk-touch-target-size - $govuk-checkboxes-size;
  $border-indent: $govuk-touch-target-size / 2;

  position: relative;

  // To equalise the spacing between the line and the top/bottom of
  // the radio
  margin-top: govuk-spacing(1) + ($border-thickness / 2);
  margin-bottom: govuk-spacing(1) * -1;
  padding-left: govuk-spacing(2) + 2;

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

.selection-content {
  margin-bottom: govuk-spacing(4);

  .checkboxes-nested {
    margin-bottom: 0;
  }
}

.selection-footer {
  clear: both;
}

.selection-footer__button {
  // revert full-width button for smaller screens
  display: inline-block;
  width: auto;
}

// styles specific to the collapsible checkboxes module
.selection-wrapper {
  fieldset:focus {
    outline: none;
  }

}