////
/// @group helpers/accessibility
////

/// Focused text
///
/// Provides an outline to clearly indicate when the target element is focused.
/// Used for interactive text-based elements.
///
/// @example scss - Styling the focus state for a link
///   .govuk-link:focus {
///     @include govuk-focused-text;
///   }
///
/// @access public

@mixin govuk-focused-text {
  // When colours are overridden, for example when users have a dark mode,
  // backgrounds and box-shadows disappear, so we need to ensure there's a
  // transparent outline which will be set to a visible colour.

  outline: $govuk-focus-width solid transparent;
  color: govuk-functional-colour(focus-text);
  background-color: govuk-functional-colour(focus);
  box-shadow:
    0 -2px govuk-functional-colour(focus),
    0 4px govuk-functional-colour(focus-text);
  // When link is focussed, hide the default underline since the
  // box shadow adds the "underline"
  text-decoration: none;

  // Fixes an issue in Chromium 108–111 where the box-shadow on the focus state
  // is missing on links that wrap across multiple lines [1].
  //
  // However, text-wrap: balance doesn't play nicely with box-decoration-break:
  // clone, causing links to re-flow when focused [2]. As text-wrap: balance
  // wasn't introduced until Chromium 114 we can use it as a way to target
  // this fix to just 108–111.
  //
  // [1]: http://crbug.com/40884971
  // [2]: https://github.com/alphagov/govuk-frontend/issues/5878
  @supports not (text-wrap: balance) {
    -webkit-box-decoration-break: clone;
            box-decoration-break: clone;
  }
}

/// Focused box
///
/// Provides an outline to clearly indicate when the target element is focused.
/// Unlike govuk-focused-text, which only draws an underline below the element,
/// govuk-focused-box draws an outline around all sides of the element.
/// Best used for non-text content contained within links.
///
/// @example scss - Styling the focus state for a linked image
///   .govuk-link-image:focus {
///     @include govuk-focused-box;
///   }
///
/// @access public

@mixin govuk-focused-box {
  outline: $govuk-focus-width solid transparent;
  box-shadow:
    0 0 0 4px govuk-functional-colour(focus),
    0 0 0 8px govuk-functional-colour(focus-text);
}

/// Focused form input
///
/// Provides an outline to clearly indicate when the target element is focused.
/// Used for form inputs.
///
/// @example scss - Styling the focus state for a form input
///   .govuk-input:focus {
///     @include govuk-focused-form-input;
///   }
///
/// @access public

@mixin govuk-focused-form-input {
  outline: $govuk-focus-width solid;
  outline-color: govuk-functional-colour(focus);
  // Ensure outline appears outside of the element
  outline-offset: 0;
  // Double the border by adding its width again. Use `box-shadow` for this
  // instead of changing `border-width` - this is for consistency with
  // components such as textarea where we avoid changing `border-width` as
  // it will change the element size. Also, `outline` cannot be utilised
  // here as it is already used for the yellow focus state.
  box-shadow: inset 0 0 0 $govuk-border-width-form-element govuk-functional-colour(input-border);
}

/*# sourceMappingURL=_focused.scss.map */