@use "../theme";

/// Adds outline styles depending on specific type
/// @access public
/// @param {String} $type ['border'] - Type of outline from: `border`, `blurred`, `outline`, `invalid`, `reset`
/// @example @include focus-outline('outline');
/// @group utilities
@mixin focus-outline($type: "border") {
  @if ($type == "border") {
    outline: 1px solid theme.$field-focus;
    border-color: theme.$field-focus; //update $focus color
    //box-shadow: 0px 2px 8px 0 theme.$focus; //get new token

    @media screen and (prefers-contrast) {
      outline-style: dotted;
    }
  }

  @if ($type == "blurred") {
    box-shadow: 0 0 0 3px theme.$field-focus; //theme.$focus; //get new token
    outline: 1px solid transparent;
  }

  @if ($type == "outline") {
    outline: 2px solid theme.$field-focus;
    outline-offset: -2px;

    @media screen and (prefers-contrast) {
      outline-style: dotted;
    }
  }

  @if ($type == "invalid") {
    outline: 2px solid theme.$support-error-main;
    outline-offset: -2px;

    @media screen and (prefers-contrast) {
      outline-style: dotted;
    }
  }

  @if ($type == "reset") {
    outline: 2px solid transparent;
    outline-offset: -2px;
  }

  @if ($type == "border-important") {
    outline: 2px solid theme.$field-focus !important;
    outline-offset: -1px;
  }

  @if ($type == "border-focus") {
    outline: var(--focus-200__color) solid var(--focus-200__width);
  }

  @if ($type == "border-focus-small") {
    outline: var(--focus-100__color) solid var(--focus-100__width);
  }

  @if ($type == "border-small") {
    //outline: 2px solid theme.$action-default-link-default-hover;
    outline-offset: 2px;
    outline: var(--focus-100__color) solid var(--focus-100__width);
  }
}