_focusable.scss mixin with drop-shadow depending on display property

_focusable.scss

////
/// @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;
  }
}

/// Focusable with box-shadow
///
/// Removes the visible outline and replace with box-shadow and background colour.
/// Used for interactive text-based elements.
///
/// @access public

@mixin govuk-focusable-text($display) {
  $_padding-top: 3px;
  $_padding-left-right: 6px;
  $_padding-bottom: 4px;
  $_border-width: 4px;
  $_border-color: $govuk-text-colour;

  @if $govuk-font-family == $govuk-font-family-nta {
    $_padding-top: 2px;
    $_padding-bottom: 0;
  }

  // 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.
  // Since Internet Explorer 8 does not support box-shadow, we want to force the user-agent outlines
  color: $govuk-text-colour;
  background-color: $govuk-focus-colour;

  // When link is focussed, hide the default underline since the
  // box shadow adds the "underline"
  text-decoration: none;

  // Sans-serif fallback

  @if $display == "inline" {
    @supports(filter: drop-shadow(0 0)) {
      // 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;
      outline-offset: 0;

      // sass-lint:disable indentation
      filter: drop-shadow(0 (-$_padding-top) 0 $govuk-focus-colour)
              drop-shadow(-$_padding-left-right 0 0 $govuk-focus-colour)
              drop-shadow($_padding-left-right 0 0 $govuk-focus-colour)
              drop-shadow(0 $_padding-bottom 0 $govuk-focus-colour)
              drop-shadow(0 $_border-width 0 $_border-color);
      // sass-lint:enable indentation
    }
  } @else {
    $_highlight-spread: ($_padding-top + $_padding-bottom) / 2;
    $_highlight-offset-y: $_highlight-spread - $_padding-top;
    $_highlight-padding-left-right: ($_padding-left-right - $_highlight-spread);
    $_border-offset-y: ($_padding-bottom + $_border-width);

    // 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;
    outline-offset: 0;

    // Default if or it's inline-block or block
    // box-shadow
    // sass-lint:disable indentation
    box-shadow: -$_highlight-padding-left-right $_highlight-offset-y 0 $_highlight-spread $govuk-focus-colour,
                $_highlight-padding-left-right $_highlight-offset-y 0 $_highlight-spread $govuk-focus-colour,
                -$_padding-left-right $_border-offset-y $_border-color,
                $_padding-left-right $_border-offset-y $_border-color;
    // sass-lint:disable indentation
  }
}

@mixin govuk-focusable-text-link($display) {
  &:focus {
    @include govuk-focusable-text($display);
  }
}