@forward 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/theme.scss';

/**
 * The following styles (for slotted content in StencilJS components) are added here for the `globalStyle` configuration within the stencil config doc.
 *
 * Slotted elements are rendered outside of the component's Shadow DOM, which means scoped styles
 * defined within the component cannot directly target them. While the `::slotted` pseudo-element can
 * style direct children of slots, it does not support deeper descendant styling.
 *
 * To ensure styling for slotted content works, these styles are defined in a
 * separate global stylesheet (i.e: `styles/slotted-styles`) and included in the build process via the `globalStyle` config
 * option. This approach ensures:
 *
 * 1. Slotted elements are styled automatically without requiring consumers to add additional classes or external styles.
 * 2. All styles are centralized within the component library for better maintainability.
 *
 */
@forward './styles/slotted-styles/callouts-asides';
@forward './styles/slotted-styles/page-alerts';