@use 'sass:map';

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

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

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

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

	@include e(icon) {
		height: getCssVar('component-loading-error', 'icon', 'size');
		color: getCssVar('color', 'error');
		font-size: getCssVar('component-loading-error', 'icon', 'size');
	}

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

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

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

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