@use "sass:map";

// common mixins imported from this file
@import "./../../mixins/scss/mixins";

$states: (
	"primary": (
		"background": var(--color-primary-default)
	),
	"default": (
		"background": var(--color-neutral-default)
	),
	"success": (
		"background": var(--color-success-default)
	),
	"warning": (
		"background": var(--color-warning-default)
	),
	"danger": (
		"background": var(--color-danger-default)
	)
);

:host {
	.f-progress-bar {
		@include base();
		background-color: var(--color-neutral-subtle) !important;
		&[data-variant="curved"] {
			border-radius: 12px !important;
		}
		@each $state, $color in $states {
			[data-state="#{$state}"] {
				background-color: map.get($color, "background") !important;
			}
		}
	}
}