@use 'sass:map';

@use 'common/var' as *;
@use 'mixins/mixins' as *;
@use 'mixins/utils' as *;
@use 'mixins/var' as *;

@include b(component-loading) {
	@include set-component-css-var('component-loading', $component-loading);
	@include set-component-css-var('component-loading-icon-size', $component-loading-icon-size);

	@include set-css-var-value(('component-loading', 'icon', 'size'), map.get($component-loading-icon-size, 'default'));
}

@include b(component-loading) {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	padding: map.get($component-loading-padding-vertical, 'default') map.get($component-loading-padding-horizontal, 'default');

	@include e(icon) {
		flex: 0 0 getCssVar('component-loading', 'icon', 'size');
		max-width: getCssVar('component-loading', 'icon', 'size');
	}

	@include e(content) {
		flex-grow: 1;
		margin: 0;
		line-height: getCssVar('component-loading', 'icon', 'size');
		font-size: map.get($component-loading-font-size, 'default');
		padding-left: map.get($component-loading-padding-horizontal, 'default');
	}

	@each $size in (large, small) {
		@include m(size-#{$size}) {
			@include set-css-var-value(('component-loading', 'icon', 'size'), map.get($component-loading-icon-size, $size));

			padding: map.get($component-loading-padding-vertical, $size) map.get($component-loading-padding-horizontal, $size);

			@include e(content) {
				font-size: map.get($component-loading-font-size, $size);
				padding-left: map.get($component-loading-padding-horizontal, $size);
			}
		}
	}
}