// ==========================================================================
// TOOLS / #FOCUSED
// ==========================================================================

//
// Focused text
//
// Provides an outline to clearly indicate when the target element is focused.
// Used for interactive text-based elements.
//

@mixin dfe-focused-text {
  background-color: $dfe-focus-color;
  box-shadow: 0 -2px $dfe-focus-color, 0 $dfe-focus-width $dfe-focus-text-color;
  color: $dfe-focus-text-color;
  // 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: $dfe-focus-width solid transparent;
  // When link is focussed, hide the default underline since the
  // box shadow adds the "underline"
  text-decoration: none;
}

/// Focused input (form elements)
///
/// Provides an additional outline and border to clearly indicate when
/// the target element has focus. Used for interactive input-based elements such
/// as text inputs.

@mixin dfe-focused-input {
  border: 2px solid $dfe-focus-text-color;
  box-shadow: inset 0 0 0 2px;
  outline: $dfe-focus-width solid $dfe-focus-color; /* 1 */
  outline-offset: 0;
}

/// Focused radio input (form element)
///
/// Provides an additional outline and border to clearly indicate when
/// the target element has focus. Used by radios.

@mixin dfe-focused-radio {
  border: $dfe-focus-width solid $dfe-focus-text-color;
  box-shadow: 0 0 0 $dfe-focus-width $dfe-focus-color;
}

/// Focused checkbox input (form element)
///
/// Provides an additional outline and border to clearly indicate when
/// the target element has focus. Used by checkbox.

@mixin dfe-focused-checkbox {
  border: $dfe-focus-width solid $dfe-focus-text-color;
  box-shadow: 0 0 0 $dfe-focus-width $dfe-focus-color;
}

/// Focused button
///
/// Provides an additional outline and background to clearly indicate when
/// the target element has focus. Used for buttons.

@mixin dfe-focused-button {
  background-color: $dfe-focus-color;
  border: 0;
  box-shadow: 0 $dfe-focus-width 0 0 $dfe-focus-text-color;
  color: $dfe-focus-text-color;
  outline: $dfe-focus-width solid transparent; /* 1 */
  outline-offset: $dfe-focus-width;

  .dfe-icon {
    fill: $dfe-focus-text-color;
  }
}