// Sass bringing in the new focus style from GOVUK Frontend 3.x.x
// TO DO: Delete this file when we upgrade to GOVUK Frontend 3.x.x
//
// See the following for details of the update:
// - https://designnotes.blog.gov.uk/2019/07/29/weve-made-the-gov-uk-design-system-more-accessible/
// - https://design-system.service.gov.uk/get-started/focus-states/
// - https://github.com/alphagov/govuk-frontend/releases/tag/v3.0.0
//
// These styles were added in https://github.com/alphagov/govuk-frontend/pull/1309
// and edited in https://github.com/alphagov/govuk-frontend/pull/1455
//
/// Focusable with box-shadow
///
/// Removes the visible outline and replace with box-shadow and background colour.
/// Used for interactive text-based elements.

@mixin govuk-focusable-text-link {
  &:focus {
    // 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-focus-text-colour;
    background-color: $govuk-focus-colour;
    box-shadow: 0 -2px $govuk-focus-colour, 0 4px $govuk-focus-text-colour;
    // When link is focussed, hide the default underline since the
    // box shadow adds the "underline"
    text-decoration: none;
  }
}