@use 'sass:meta';
@use './utils' as utils;
@use './image-zoom';
@use './api-tree';
@use './api-item-heading';
@use './api-filter-dropdown';
@use './api-collapsing-list';
@use './hierarchy-list';
@use './notification';

@layer components {
	$components: (
		'badge',
		'button',
		'callout',
		'columns',
		'divider',
		'banner',
		'code-block',
		'code-switcher',
		'dropdown',
		'icon',
		'icon-message',
		'input',
		'menu-dropdown',
		'mobile-overlay',
		'nav-tree',
		'spacer',
		'tabs',
		'keyboard-shortcut',
		'heading-link',
		'tooltip-popover',
		'checkbox',
		'card-learn-more-links',
		'card',
		'skeleton',
		'fake-devtools',
		'iframe',
		'tag'
	);

	@each $component in $components {
		@include meta.load-css(utils.component-path($component));
	}

	$apiComponents: (
		'_header',
		'_subheader',
		'_toc'
	);

	@each $component in $apiComponents {
		@include meta.load-css(utils.component-path($component, '_api-docs'));
	}
}
