import { type PartialWithUndefined } from '@augment-vir/common';
import { type CSSResult } from 'element-vir';
import { type SingleCssVarDefinition } from 'lit-css-vars';
/**
 * Create styles that look like an outline for the given selector.
 *
 * It is recommended to use the pseudo selector chain ":focus:focus-visible:not(:active)" to
 * preventing clicking an element from creating focus styles in Chrome.
 *
 * @category Styles
 */
export declare function createFocusStyles({ elementBorderSize, outlineGap, outlineWidth, noNesting, outlineColor, borderRadius, renderInside, }?: PartialWithUndefined<{
    /**
     * ElementBorderSize here is used to fix the outline when the element these styles are attached
     * to has a border. The dev must specify that border size here for the offsets to be calculated
     * correctly.
     */
    elementBorderSize: SingleCssVarDefinition | string;
    outlineGap: SingleCssVarDefinition | string;
    outlineWidth: SingleCssVarDefinition | string;
    borderRadius: SingleCssVarDefinition | string;
    outlineColor: SingleCssVarDefinition | string;
    noNesting: boolean;
    /** Render the focus outline inside the element instead of outside. */
    renderInside: boolean;
}>): CSSResult;