{"version":3,"sources":["../../../../src/govuk/components/checkboxes/_index.scss"],"names":[],"mappings":"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","file":"_index.scss","sourcesContent":["@import \"../error-message/index\";\n@import \"../fieldset/index\";\n@import \"../hint/index\";\n@import \"../label/index\";\n\n@include govuk-exports(\"govuk/component/checkboxes\") {\n  $govuk-touch-target-gutter: 4px;\n  $govuk-checkboxes-size: 40px;\n  $govuk-touch-target-size: ($govuk-checkboxes-size + $govuk-touch-target-gutter);\n  $govuk-small-checkboxes-size: 24px;\n  $govuk-checkboxes-label-padding-left-right: govuk-spacing(3);\n  $govuk-checkbox-check-horizontal-position: 10px;\n\n  .govuk-checkboxes__item {\n    display: flex;\n    flex-wrap: wrap;\n    position: relative;\n    margin-bottom: govuk-spacing(2);\n  }\n\n  .govuk-checkboxes__item:last-child,\n  .govuk-checkboxes__item:last-of-type {\n    margin-bottom: 0;\n  }\n\n  .govuk-checkboxes__input {\n    // Allow the input to sit above the label, enabling its proper detection\n    // when exploring by touch or using automation tools like Selenium\n    z-index: 1;\n    width: $govuk-touch-target-size;\n    height: $govuk-touch-target-size;\n    margin: 0;\n    opacity: 0;\n    cursor: pointer;\n  }\n\n  .govuk-checkboxes__label {\n    align-self: center;\n\n    // Ensure that the width of the label is never more than the width of the\n    // container minus the input width minus the padding on either side of\n    // the label. This prevents the label from going onto the next line due to\n    // __item using flex-wrap because we want hints on a separate line.\n    max-width: calc(100% - #{(($govuk-checkboxes-label-padding-left-right * 2) + $govuk-touch-target-size)});\n    margin-bottom: 0;\n    padding: (govuk-spacing(1) + $govuk-border-width-form-element) govuk-spacing(3);\n    cursor: pointer;\n    // remove 300ms pause on mobile\n    touch-action: manipulation;\n  }\n\n  // [ ] Check box\n  .govuk-checkboxes__label::before {\n    content: \"\";\n    box-sizing: border-box;\n    position: absolute;\n    top: ($govuk-touch-target-gutter / 2);\n    left: ($govuk-touch-target-gutter / 2);\n    width: $govuk-checkboxes-size;\n    height: $govuk-checkboxes-size;\n    border: $govuk-border-width-form-element solid currentcolor;\n    background: transparent;\n  }\n\n  // ✔ Check mark\n  //\n  // The check mark is a box with a border on the left and bottom side (└──),\n  // rotated 45 degrees\n  .govuk-checkboxes__label::after {\n    content: \"\";\n    box-sizing: border-box;\n    position: absolute;\n\n    // Use \"magic numbers\" to define shape and position of check mark because\n    // the complexity of the shape makes it difficult to calculate dynamically.\n    top: 13px;\n    left: $govuk-checkbox-check-horizontal-position;\n    width: 23px;\n    height: 12px;\n    transform: rotate(-45deg);\n    border: solid;\n    border-width: 0 0 5px 5px;\n    // Fix bug in IE11 caused by transform rotate (-45deg).\n    // See: alphagov/govuk_elements/issues/518\n    border-top-color: transparent;\n    opacity: 0;\n    background: transparent;\n  }\n\n  .govuk-checkboxes__hint {\n    display: block;\n    width: 100%;\n    margin-top: govuk-spacing(-1);\n    padding-right: $govuk-checkboxes-label-padding-left-right;\n    padding-left: ($govuk-checkboxes-label-padding-left-right + $govuk-touch-target-size);\n  }\n\n  // This is to bypass govuk-hint's specificity on hints following labels having\n  // a margin bottom of 10px (govuk-spacing(2)). Because checkboxes are flexbox,\n  // the margin doesn't collapse so we have to do this manually.\n  .govuk-label:not(.govuk-label--m):not(.govuk-label--l):not(.govuk-label--xl) + .govuk-checkboxes__hint {\n    margin-bottom: 0;\n  }\n\n  // Focused state\n  .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before {\n    border-width: 4px;\n\n    // When colours are overridden, the yellow box-shadow becomes invisible\n    // which means the focus state is less obvious. By adding a transparent\n    // outline, which becomes solid (text-coloured) in that context, we ensure\n    // the focus remains clearly visible.\n    outline: $govuk-focus-width solid transparent;\n    outline-offset: 1px;\n\n    // When in an explicit forced-color mode, we can use the Highlight system\n    // color for the outline to better match focus states of native controls\n    @media screen and (forced-colors: active), (-ms-high-contrast: active) {\n      outline-color: Highlight;\n    }\n\n    box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour;\n  }\n\n  // Selected state\n  .govuk-checkboxes__input:checked + .govuk-checkboxes__label::after {\n    opacity: 1;\n  }\n\n  // Disabled state\n  .govuk-checkboxes__input:disabled,\n  .govuk-checkboxes__input:disabled + .govuk-checkboxes__label {\n    cursor: not-allowed;\n  }\n\n  .govuk-checkboxes__input:disabled + .govuk-checkboxes__label,\n  .govuk-checkboxes__input:disabled ~ .govuk-hint {\n    opacity: 0.5;\n  }\n\n  // =========================================================\n  // Dividers ('or')\n  // =========================================================\n\n  .govuk-checkboxes__divider {\n    @include govuk-font($size: 19);\n    @include govuk-text-colour;\n    $govuk-divider-size: $govuk-checkboxes-size !default;\n    width: $govuk-divider-size;\n    margin-bottom: govuk-spacing(2);\n    text-align: center;\n  }\n\n  // =========================================================\n  // Conditional reveals\n  // =========================================================\n\n  // The narrow border is used in the conditional reveals because the border has\n  // to be an even number in order to be centred under the 40px checkbox or radio.\n  $conditional-border-width: $govuk-border-width-narrow;\n  // Calculate the amount of padding needed to keep the border centered against the checkbox.\n  $conditional-border-padding: ($govuk-checkboxes-size / 2) - ($conditional-border-width / 2);\n  // Move the border centered with the checkbox\n  $conditional-margin-left: $conditional-border-padding;\n  // Move the contents of the conditional inline with the label\n  $conditional-padding-left: $conditional-border-padding + $govuk-checkboxes-label-padding-left-right;\n\n  .govuk-checkboxes__conditional {\n    @include govuk-responsive-margin(4, \"bottom\");\n    margin-left: $conditional-margin-left;\n    padding-left: $conditional-padding-left;\n    border-left: $conditional-border-width solid $govuk-border-colour;\n\n    .govuk-frontend-supported &--hidden {\n      display: none;\n    }\n\n    & > :last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  // =========================================================\n  // Small checkboxes\n  // =========================================================\n\n  .govuk-checkboxes--small {\n    $input-offset: ($govuk-touch-target-size - $govuk-small-checkboxes-size) / 2;\n\n    .govuk-checkboxes__item {\n      margin-bottom: 0;\n    }\n\n    // Shift the touch target into the left margin so that the visible edge of\n    // the control is aligned\n    //\n    //   ┆What colours do you like?\n    //  ┌┆───┐\n    //  │┆[] │ Purple\n    //  └┆▲──┘\n    //  ▲┆└─ Check box pseudo element, aligned with margin\n    //  └─── Touch target (invisible input), shifted into the margin\n    .govuk-checkboxes__input {\n      margin-left: $input-offset * -1;\n    }\n\n    .govuk-checkboxes__label {\n      // Create a tiny space between the small checkbox hover state so that it\n      // doesn't clash with the label\n      padding-left: 1px;\n    }\n\n    // [ ] Check box\n    //\n    // Reduce the size of the check box [1], vertically center it within the\n    // touch target [2]\n    // Left here is 0 because we've shifted the input into the left margin\n    .govuk-checkboxes__label::before {\n      top: $input-offset; // 2\n      left: 0;\n      width: $govuk-small-checkboxes-size; // 1\n      height: $govuk-small-checkboxes-size; // 1\n    }\n\n    // ✔ Check mark\n    //\n    // Reduce the size of the check mark and re-align within the checkbox\n    .govuk-checkboxes__label::after {\n      top: 17px;\n\n      // Horizontal position is just the normal sized left value accounting for\n      // the new width of the smaller checkbox\n      left: (16px - $govuk-checkbox-check-horizontal-position);\n      width: 12px;\n      height: 6.5px;\n      border-width: 0 0 3px 3px;\n    }\n\n    // Fix position of hint with small checkboxes\n    //\n    // Do not use hints with small checkboxes – because they're within the input\n    // wrapper they trigger the hover state, but clicking them doesn't actually\n    // activate the control.\n    //\n    // (If you do use them, they won't look completely broken... but seriously,\n    // don't use them)\n    .govuk-checkboxes__hint {\n      padding-left: ($govuk-small-checkboxes-size + $input-offset);\n    }\n\n    // Align conditional reveals with small checkboxes\n    .govuk-checkboxes__conditional {\n      $margin-left: ($govuk-small-checkboxes-size / 2) - ($conditional-border-width / 2);\n      margin-left: $margin-left;\n      padding-left: ($govuk-touch-target-size - $input-offset) - ($margin-left + $conditional-border-width);\n    }\n\n    // Hover state for small checkboxes.\n    //\n    // We use a hover state for small checkboxes because the touch target size\n    // is so much larger than their visible size, and so we need to provide\n    // feedback to the user as to which checkbox they will select when their\n    // cursor is outside of the visible area.\n    .govuk-checkboxes__item:hover .govuk-checkboxes__input:not(:disabled) + .govuk-checkboxes__label::before {\n      // Forced colours modes tend to ignore box-shadow.\n      // Apply an outline for those modes to use instead.\n      outline: $govuk-focus-width dashed transparent;\n      outline-offset: 1px;\n      box-shadow: 0 0 0 $govuk-hover-width $govuk-hover-colour;\n    }\n\n    // Because we've overridden the border-shadow provided by the focus state,\n    // we need to redefine that too.\n    //\n    // We use two box shadows, one that restores the original focus state [1]\n    // and another that then applies the hover state [2].\n    .govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before {\n      // Set different HCM colour when we have both hover/focus applied at once\n      @media screen and (forced-colors: active), (-ms-high-contrast: active) {\n        outline-color: Highlight;\n      }\n      // prettier-ignore\n      box-shadow:\n        0 0 0 $govuk-focus-width $govuk-focus-colour, // 1\n        0 0 0 $govuk-hover-width $govuk-hover-colour; // 2\n    }\n\n    // For devices that explicitly don't support hover, don't provide a hover\n    // state (e.g. on touch devices like iOS).\n    //\n    // We can't use `@media (hover: hover)` because we wouldn't get the hover\n    // state in browsers that don't support `@media (hover)` (like Internet\n    // Explorer) – so we have to 'undo' the hover state instead.\n    @media (hover: none), (pointer: coarse) {\n      .govuk-checkboxes__item:hover .govuk-checkboxes__input:not(:disabled) + .govuk-checkboxes__label::before {\n        box-shadow: initial;\n      }\n\n      .govuk-checkboxes__item:hover .govuk-checkboxes__input:focus + .govuk-checkboxes__label::before {\n        box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour;\n      }\n    }\n  }\n}\n"]}