import { css } from 'styled-components';
import { buttonFocused } from '../tokens';
import 'focus-visible';
export var syntheticFocus = function syntheticFocus(ruleset, focused) {
    return css([
        "&.focus-visible:focus,&[data-focus-visible-added]{outline:none;",
        "}",
        ";"
    ], ruleset, focused && ruleset);
};
/**
 * Миксин для добавления фокусной рамки к элементу через псевдоэлемент before
 * @param {FocusProps} props
 * @example
 * // Выведет фокусную рамку размером 2em, скруглением 5em, отступом 2em и цветом 'rebeccapurple'.
 * addFocus({
 *  outlineSize: '2em',
 *  outlineOffset: '2em',
 *  outlineRadius: '5em',
 *  outlineColor: 'rebeccapurple',
 * });
 * @example
 * // Выведет outline размером 4em, скруглением 10px 1px, без отступа и цветом 'greenyellow'.
 * addFocus({
 *  outlineSize: '4em',
 *  outlineOffset: '0',
 *  outlineRadius: '10em 1em',
 *  outlineColor: 'greenyellow',
 * });
 */ export var addFocus = function addFocus(param) {
    var lowPerformance = param.lowPerformance, focused = param.focused, _param_outlined = param.outlined, outlined = _param_outlined === void 0 ? true : _param_outlined, _param_outlineSize = param.outlineSize, outlineSize = _param_outlineSize === void 0 ? '0.125rem' : _param_outlineSize, _param_outlineOffset = param.outlineOffset, outlineOffset = _param_outlineOffset === void 0 ? outlineSize : _param_outlineOffset, _param_outlineColor = param.outlineColor, outlineColor = _param_outlineColor === void 0 ? buttonFocused : _param_outlineColor, _param_outlineRadius = param.outlineRadius, outlineRadius = _param_outlineRadius === void 0 ? 0 : _param_outlineRadius, _param_synthesizeFocus = param.synthesizeFocus, synthesizeFocus = _param_synthesizeFocus === void 0 ? syntheticFocus : _param_synthesizeFocus;
    return outlined && css([
        "position:relative;&::before{content:'';position:absolute;top:-",
        ";left:-",
        ";right:-",
        ";bottom:-",
        ";display:block;box-sizing:content-box;border:",
        " solid transparent;border-radius:",
        ";transition:",
        ";pointer-events:none;}",
        ""
    ], outlineOffset, outlineOffset, outlineOffset, outlineOffset, outlineSize, outlineRadius, lowPerformance ? 'unset' : 'box-shadow 0.2s ease-in-out', synthesizeFocus(css([
        "&::before{box-shadow:0 0 0 ",
        " ",
        ";}"
    ], outlineSize, outlineColor), focused));
};
