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

/// Focusable helper
///
/// Provides an additional outline to clearly indicate when the target element is
/// focussed. Used for interactive elements which themselves have some background
/// or border, such as most form elements.
///
/// @access public

@mixin govuk-focusable {
  &:focus {
    outline: $govuk-focus-width solid $govuk-focus-colour;
    outline-offset: 0;
  }
}

/// Focusable with fill helper
///
/// Provides an additional outline and background colour to clearly indicate when
/// the target element is focussed. Used for interactive text-based elements such
/// as links.
///
/// @access public

@mixin govuk-focusable-fill {
  &:focus {
    outline: $govuk-focus-width solid $govuk-focus-colour;
    outline-offset: 0;
    background-color: $govuk-focus-colour;
  }
}