{"version":3,"sources":["../../../../src/nhsuk/components/checkboxes/_index.scss"],"names":[],"mappings":"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","file":"_index.scss","sourcesContent":["@use \"sass:math\";\n@use \"../../core/settings\" as *;\n@use \"../../core/tools\" as *;\n@use \"../../core/helpers\" as *;\n@forward \"../error-message\";\n@forward \"../fieldset\";\n@forward \"../hint\";\n@forward \"../label\";\n\n////\n/// Checkboxes component\n///\n/// @group components/checkboxes\n////\n\n$nhsuk-checkboxes-size: nhsuk-px-to-rem(40px);\n$nhsuk-checkboxes-small-size: nhsuk-px-to-rem(24px);\n\n$nhsuk-checkboxes-label-padding-left-right: nhsuk-px-to-rem(12px);\n\n// Offset 2px due to 40px form control with 44px clickable area\n// https://nhsuk.github.io/nhsuk-frontend/examples/form-alignment/\n$nhsuk-checkboxes-offset: $nhsuk-border-width-form-element;\n\n@include nhsuk-exports(\"nhsuk/components/checkboxes\") {\n  $nhsuk-touch-target-gutter: nhsuk-px-to-rem(4px);\n  $nhsuk-touch-target-size: $nhsuk-checkboxes-size + nhsuk-px-to-rem($nhsuk-touch-target-gutter);\n\n  .nhsuk-checkboxes {\n    margin: -$nhsuk-checkboxes-offset nhsuk-px-to-rem(-$nhsuk-checkboxes-offset);\n    margin-right: 0;\n  }\n\n  .nhsuk-checkboxes__item {\n    display: flex;\n    position: relative;\n    flex-wrap: wrap;\n    margin-top: nhsuk-spacing(2) - $nhsuk-checkboxes-offset;\n\n    .nhsuk-checkboxes__conditional:not(.nhsuk-checkboxes__conditional--hidden) + & {\n      @include nhsuk-responsive-margin(4, \"top\", $adjustment: - $nhsuk-checkboxes-offset);\n    }\n  }\n\n  .nhsuk-checkboxes__item:first-child {\n    margin-top: 0;\n  }\n\n  .nhsuk-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\n    width: $nhsuk-touch-target-size;\n    height: $nhsuk-touch-target-size;\n    margin: 0;\n\n    opacity: 0;\n\n    cursor: pointer;\n  }\n\n  .nhsuk-checkboxes__label {\n    box-sizing: border-box;\n\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. This prevents the label from wrapping due to\n    // __item using flex-wrap because we want hints on a separate line\n    max-width: calc(100% - $nhsuk-touch-target-size);\n    margin-bottom: 0;\n    padding: (nhsuk-spacing(1) + $nhsuk-border-width-form-element) $nhsuk-checkboxes-label-padding-left-right;\n\n    cursor: pointer;\n    // remove 300ms pause on mobile\n    touch-action: manipulation;\n  }\n\n  // [ ] Check box\n  .nhsuk-checkboxes__label::before {\n    content: \"\";\n\n    box-sizing: border-box;\n\n    position: absolute;\n    top: math.div($nhsuk-touch-target-gutter, 2);\n    left: math.div($nhsuk-touch-target-gutter, 2);\n\n    width: $nhsuk-checkboxes-size;\n    height: $nhsuk-checkboxes-size;\n\n    border: $nhsuk-border-width-form-element solid $nhsuk-input-border-colour;\n\n    background: $nhsuk-input-background-colour;\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  .nhsuk-checkboxes__label::after {\n    content: \"\";\n\n    box-sizing: border-box;\n\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: nhsuk-px-to-rem(15px);\n    left: nhsuk-px-to-rem(12px);\n\n    width: nhsuk-px-to-rem(22px);\n    height: nhsuk-px-to-rem(10px);\n\n    transform: rotate(-45deg);\n\n    border: solid;\n    border-width: 0 0 nhsuk-px-to-rem(4px) nhsuk-px-to-rem(4px);\n    // Fix bug in IE11 caused by transform rotate (-45deg).\n    // See: alphagov/nhsuk_elements/issues/518\n    border-top-color: transparent;\n\n    opacity: 0;\n\n    background: transparent;\n  }\n\n  .nhsuk-checkboxes__hint {\n    display: block;\n    width: 100%;\n    margin-top: nhsuk-spacing(-1);\n    padding-right: $nhsuk-checkboxes-label-padding-left-right;\n    padding-left: $nhsuk-checkboxes-label-padding-left-right + $nhsuk-touch-target-size;\n  }\n\n  // This is to bypass nhsuk-hint's specificity on hints following labels having\n  // a margin bottom of 8px (nhsuk-spacing(2)). Because checkboxes are flexbox,\n  // the margin doesn't collapse so we have to do this manually.\n  .nhsuk-label:not(.nhsuk-label--m):not(.nhsuk-label--l):not(.nhsuk-label--xl) + .nhsuk-checkboxes__hint {\n    margin-bottom: 0;\n  }\n\n  // Focused state\n  .nhsuk-checkboxes__input:focus + .nhsuk-checkboxes__label::before {\n    @include nhsuk-focused-checkbox;\n  }\n\n  // Selected state\n  .nhsuk-checkboxes__input:checked + .nhsuk-checkboxes__label::after {\n    opacity: 1;\n  }\n\n  // Disabled state\n  .nhsuk-checkboxes__input:disabled,\n  .nhsuk-checkboxes__input:disabled + .nhsuk-checkboxes__label {\n    cursor: not-allowed;\n  }\n\n  .nhsuk-checkboxes__input:disabled + .nhsuk-checkboxes__label,\n  .nhsuk-checkboxes__input:disabled ~ .nhsuk-hint {\n    opacity: 0.5;\n  }\n\n  // =========================================================\n  // Inline checkboxes\n  // =========================================================\n\n  .nhsuk-checkboxes--inline {\n    @include nhsuk-media-query($from: tablet) {\n      display: flex;\n      flex-wrap: wrap;\n      align-items: flex-start;\n      row-gap: nhsuk-spacing(2) - $nhsuk-checkboxes-offset;\n\n      &.nhsuk-checkboxes--small {\n        row-gap: 0;\n      }\n\n      .nhsuk-checkboxes__item {\n        max-width: calc(50% - $nhsuk-checkboxes-label-padding-left-right - nhsuk-spacing(4));\n        margin-top: 0;\n        margin-right: nhsuk-spacing(4);\n      }\n    }\n  }\n\n  // =========================================================\n  // Dividers ('or')\n  // =========================================================\n\n  .nhsuk-checkboxes__divider {\n    width: $nhsuk-checkboxes-size;\n    margin: nhsuk-spacing(2) - $nhsuk-checkboxes-offset nhsuk-px-to-rem($nhsuk-checkboxes-offset);\n    text-align: center;\n    @include nhsuk-text-colour;\n    @include nhsuk-font($size: 19);\n  }\n\n  // =========================================================\n  // Conditional reveals\n  // =========================================================\n\n  // Calculate the amount of padding needed to keep the border centered against the checkbox.\n  $conditional-border-padding: math.div($nhsuk-touch-target-size, 2) - nhsuk-px-to-rem($nhsuk-border-width-form-element);\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 + $nhsuk-checkboxes-label-padding-left-right;\n\n  .nhsuk-checkboxes__conditional {\n    margin-top: nhsuk-spacing(2) - $nhsuk-checkboxes-offset;\n    margin-bottom: $nhsuk-checkboxes-offset;\n    margin-left: $conditional-margin-left;\n    padding-left: $conditional-padding-left;\n    border-left: nhsuk-px-to-rem($nhsuk-border-width) solid nhsuk-colour(\"grey-3\");\n\n    .nhsuk-frontend-supported &--hidden {\n      display: none;\n    }\n  }\n\n  // =========================================================\n  // Small checkboxes\n  // =========================================================\n\n  .nhsuk-checkboxes--small {\n    $input-offset: math.div($nhsuk-touch-target-size - $nhsuk-checkboxes-small-size, 2);\n\n    .nhsuk-checkboxes__item {\n      margin-top: 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    .nhsuk-checkboxes__input {\n      margin-left: $input-offset * -1;\n    }\n\n    .nhsuk-checkboxes__label {\n      max-width: calc(100% - $nhsuk-touch-target-size + $input-offset);\n\n      // Create a tiny space between the small checkbox hover state so that it\n      // doesn't clash with the label\n      padding-left: $nhsuk-checkboxes-label-padding-left-right - $input-offset;\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    .nhsuk-checkboxes__label::before {\n      top: $input-offset; // 2\n      left: nhsuk-px-to-rem($nhsuk-checkboxes-offset);\n      width: $nhsuk-checkboxes-small-size; // 1\n      height: $nhsuk-checkboxes-small-size; // 1\n    }\n\n    // ✔ Check mark\n    //\n    // Reduce the size of the check mark and re-align within the checkbox\n    .nhsuk-checkboxes__label::after {\n      top: nhsuk-px-to-rem(18px);\n      left: nhsuk-px-to-rem(8px);\n      width: nhsuk-px-to-rem(12px);\n      height: nhsuk-px-to-rem(6px);\n      border-width: 0 0 nhsuk-px-to-rem(3px) nhsuk-px-to-rem(3px);\n    }\n\n    // Fix position of hint with small checkboxes\n    .nhsuk-checkboxes__hint {\n      padding-left: $nhsuk-touch-target-size + $nhsuk-checkboxes-label-padding-left-right - ($input-offset * 2);\n    }\n\n    // Align conditional reveals with small checkboxes\n    .nhsuk-checkboxes__conditional {\n      margin-left: $conditional-border-padding - $input-offset + nhsuk-px-to-rem($nhsuk-checkboxes-offset);\n      padding-left: $conditional-border-padding + $nhsuk-checkboxes-label-padding-left-right -\n        $input-offset - nhsuk-px-to-rem($nhsuk-checkboxes-offset);\n    }\n\n    .nhsuk-checkboxes__divider {\n      width: $nhsuk-checkboxes-small-size;\n      margin: nhsuk-spacing(1) - $nhsuk-checkboxes-offset nhsuk-px-to-rem($nhsuk-checkboxes-offset);\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    .nhsuk-checkboxes__input:not(:disabled):hover + .nhsuk-checkboxes__label::before,\n    .nhsuk-checkboxes__input:not(:disabled) + .nhsuk-checkboxes__label:hover::before {\n      // Forced colours modes tend to ignore box-shadow.\n      // Apply an outline for those modes to use instead.\n      outline: $nhsuk-focus-width dashed transparent;\n      outline-offset: 1px;\n      box-shadow: 0 0 0 $nhsuk-hover-width $nhsuk-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    .nhsuk-checkboxes__input:focus:hover + .nhsuk-checkboxes__label::before,\n    .nhsuk-checkboxes__input:focus + .nhsuk-checkboxes__label:hover::before {\n      // prettier-ignore\n      box-shadow:\n        0 0 0 $nhsuk-focus-width $nhsuk-focus-colour, // 1\n        0 0 0 $nhsuk-hover-width $nhsuk-hover-colour; // 2\n\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    }\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      .nhsuk-checkboxes__input:not(:disabled):hover + .nhsuk-checkboxes__label::before,\n      .nhsuk-checkboxes__input:not(:disabled) + .nhsuk-checkboxes__label:hover::before {\n        box-shadow: initial;\n      }\n\n      .nhsuk-checkboxes__input:focus:hover + .nhsuk-checkboxes__label::before,\n      .nhsuk-checkboxes__input:focus + .nhsuk-checkboxes__label:hover::before {\n        box-shadow: 0 0 0 $nhsuk-focus-width $nhsuk-focus-colour;\n      }\n    }\n  }\n}\n"]}