@use '../../1-variables/colours.variables' as colours;

/* -------------------------------
    Focus placeholder variables
--------------------------------- */
$ontario-focus-transition: box-shadow 0.1s ease-in-out;
$ontario-focus-box-shadow: 0 0 0 4px colours.$ontario-colour-focus;

/* -------------------------------
    Focus placeholder
--------------------------------- */
%ontario-focus {
	box-shadow: $ontario-focus-box-shadow;
	outline: 4px solid transparent;
	transition: $ontario-focus-transition;
}