{"version":3,"sources":["../../../../src/nhsuk/core/tools/_focused.scss"],"names":[],"mappings":"AAAA,uBAAuB;;AAEvB,GAAG;AACH,UAAU;AACV,EAAE;AACF,eAAe;AACf,2FAA2F;AAC3F,GAAG;;AAEH,eAAe;AACf,EAAE;AACF,8EAA8E;AAC9E,4CAA4C;;AAE5C;EACE,uEAAuE;EACvE,uEAAuE;EACvE,4DAA4D;EAC5D,6CAA6C;EAC7C,+BAA+B;EAC/B,qCAAqC;EACrC;;iDAE+C;;EAE/C,6DAA6D;EAC7D,iCAAiC;EACjC,qBAAqB;;EAErB;IACE,eAAe;EACjB;AACF;;AAEA,gCAAgC;AAChC,EAAE;AACF,qEAAqE;AACrE,+EAA+E;AAC/E,kBAAkB;;AAElB;EACE,uEAAuE;EACvE,qDAAqD;EACrD,+CAA+C;EAC/C,iBAAiB;EACjB,qEAAqE;EACrE,sEAAsE;EACtE,iEAAiE;EACjE,iFAAiF;AACnF;;AAEA,qCAAqC;AACrC,EAAE;AACF,qEAAqE;AACrE,gDAAgD;AAChD,EAAE;AACF,wEAAwE;;AAExE;EACE,yDAAyD;;EAEzD,sEAAsE;EACtE,sEAAsE;EACtE,yEAAyE;EACzE,oCAAoC;EACpC,6CAA6C;EAC7C,mBAAmB;EACnB,kDAAkD;;EAElD,wEAAwE;EACxE,uEAAuE;EACvE;IACE,wBAAwB;EAC1B;AACF;;AAEA,wCAAwC;AACxC,EAAE;AACF,qEAAqE;AACrE,kDAAkD;;AAElD;EACE,yDAAyD;;EAEzD,sEAAsE;EACtE,sEAAsE;EACtE,yEAAyE;EACzE,oCAAoC;EACpC,6CAA6C;EAC7C,mBAAmB;EACnB,wDAAwD;;EAExD,wEAAwE;EACxE,uEAAuE;EACvE;IACE,wBAAwB;EAC1B;AACF;;AAEA,iBAAiB;AACjB,EAAE;AACF,yEAAyE;AACzE,kDAAkD;;AAElD;EACE,6CAA6C;EAC7C,kCAAkC;EAClC,+BAA+B;EAC/B,qCAAqC;EACrC,6DAA6D;;EAE7D,wEAAwE;EACxE,uEAAuE;EACvE;IACE,wBAAwB;IACxB,iBAAiB;IACjB,4BAA4B;EAC9B;AACF;;AAEA,cAAc;AACd,EAAE;AACF,8EAA8E;AAC9E,8EAA8E;AAC9E,sEAAsE;AACtE,yDAAyD;;AAEzD;EACE,6CAA6C;EAC7C;;sCAEoC;;EAEpC,wEAAwE;EACxE,uEAAuE;EACvE;IACE,wBAAwB;EAC1B;AACF","file":"_focused.scss","sourcesContent":["@use \"../settings\" as *;\n\n////\n/// Focused\n///\n/// @group tools\n/// @link https://accessibility.blog.gov.uk/2017/03/27/how-users-change-colours-on-websites/\n////\n\n/// Focused text\n///\n/// Provides an outline to clearly indicate when the target element is focused.\n/// Used for interactive text-based elements.\n\n@mixin nhsuk-focused-text {\n  // When colours are overridden, for example when users have a dark mode,\n  // backgrounds and box-shadows disappear, so we need to ensure there's a\n  // transparent outline which will be set to a visible colour.\n  outline: $nhsuk-focus-width solid transparent;\n  color: $nhsuk-focus-text-colour;\n  background-color: $nhsuk-focus-colour;\n  box-shadow:\n    0 -2px $nhsuk-focus-colour,\n    0 $nhsuk-focus-width $nhsuk-focus-text-colour;\n\n  // When link is focussed, hide the default underline since the\n  // box shadow adds the \"underline\"\n  text-decoration: none;\n\n  @media screen and (forced-colors: active), (-ms-high-contrast: active) {\n    color: LinkText;\n  }\n}\n\n/// Focused input (form elements)\n///\n/// Provides an additional outline and border to clearly indicate when\n/// the target element has focus. Used for interactive input-based elements such\n/// as text inputs.\n\n@mixin nhsuk-focused-input {\n  border: $nhsuk-border-width-form-element solid $nhsuk-focus-text-colour;\n  outline: $nhsuk-focus-width solid $nhsuk-focus-colour;\n  // Ensure outline appears outside of the element\n  outline-offset: 0;\n  // Double the border by adding its width again. Use `box-shadow` to do\n  // this instead of changing `border-width` (which changes element size)\n  // and since `outline` is already used for the yellow focus state.\n  box-shadow: inset 0 0 0 $nhsuk-border-width-form-element $nhsuk-focus-text-colour;\n}\n\n/// Focused radio input (form element)\n///\n/// Provides an additional outline and border to clearly indicate when\n/// the target element has focus. Used by radios.\n///\n/// @param {Number} $focus-width [$nhsuk-focus-width + 1px] - Focus width\n\n@mixin nhsuk-focused-radio($focus-width: $nhsuk-focus-width + 1px) {\n  border: $nhsuk-focus-width solid $nhsuk-focus-text-colour;\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: $nhsuk-focus-width solid transparent;\n  outline-offset: 1px;\n  box-shadow: 0 0 0 $focus-width $nhsuk-focus-colour;\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\n/// Focused checkbox input (form element)\n///\n/// Provides an additional outline and border to clearly indicate when\n/// the target element has focus. Used by checkbox.\n\n@mixin nhsuk-focused-checkbox {\n  border: $nhsuk-focus-width solid $nhsuk-focus-text-colour;\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: $nhsuk-focus-width solid transparent;\n  outline-offset: 1px;\n  box-shadow: 0 0 0 $nhsuk-focus-width $nhsuk-focus-colour;\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\n/// Focused button\n///\n/// Provides an additional outline and background to clearly indicate when\n/// the target element has focus. Used for buttons.\n\n@mixin nhsuk-focused-button {\n  outline: $nhsuk-focus-width solid transparent;\n  outline-offset: $nhsuk-focus-width;\n  color: $nhsuk-focus-text-colour;\n  background-color: $nhsuk-focus-colour;\n  box-shadow: 0 $nhsuk-focus-width 0 0 $nhsuk-focus-text-colour;\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    color: ButtonText;\n    background-color: ButtonFace;\n  }\n}\n\n/// Focused box\n///\n/// Provides an outline to clearly indicate when the target element is focused.\n/// Unlike nhsuk-focused-text, which only draws an underline below the element,\n/// nhsuk-focused-box draws an outline around all sides of the element.\n/// Best used for non-text content contained within links.\n\n@mixin nhsuk-focused-box {\n  outline: $nhsuk-focus-width solid transparent;\n  box-shadow:\n    0 0 0 4px $nhsuk-focus-colour,\n    0 0 0 8px $nhsuk-focus-text-colour;\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"]}