import "focus-visible";
/**
 * Миксин для добавления фокусной рамки к элементу через псевдоэлемент 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 const addFocus = (args)=>{
    const { customFocusRules, outlineSize = '0.125rem', outlineOffset = '-0.125rem', outlineColor = 'var(--plasma-colors-button-focused, var(--text-accent))', outlineRadius = '30px', hasTransition = true } = args;
    return `
        position: relative;

        &::before {
            content: '';

            position: absolute;
            top: ${outlineOffset};
            left: ${outlineOffset};
            right: ${outlineOffset};
            bottom: ${outlineOffset};
            z-index: 1;

            display: block;
            box-sizing: content-box;

            border: ${outlineSize} solid transparent;
            border-radius: ${outlineRadius};

            transition: ${hasTransition ? 'box-shadow 0.2s ease-in-out' : 'none'};

            pointer-events: none;
        }

        ${getCustomFocusStyle(outlineSize, outlineColor, customFocusRules)}
    `;
};
const getCustomFocusStyle = (outlineSize, outlineColor, customFocusRules)=>{
    if (!customFocusRules) {
        return `
            &.focus-visible:focus,
            &[data-focus-visible-added] {
                &::before {
                    outline: none;
                    box-shadow: 0 0 0 ${outlineSize} ${outlineColor};
                }
            }
        `;
    }
    return customFocusRules;
};
