@import "../style/vars";
@import "../style/mixins";
@import "../style/variant";
@import "./icon.mixin";
$ssv-icon-default-color: $ssv-color-black !default;
$ssv-icon-default-size-xxsmall: 1em !default;
$ssv-icon-default-size-xsmall: 1.5em !default;
$ssv-icon-default-size-small: 2em !default;
$ssv-icon-default-size-medium: 4em !default;
$ssv-icon-default-size-large: 7em !default;
$ssv-icon-default-size-xlarge: 12em !default;
$ssv-icon-default-size-xxlarge: 20em !default;

.ssv-icon {
	color: $ssv-icon-default-color;

	// variants
	@include modifier("primary") {
		@include ssv-icon-variant($ssv-primary-variant);
	}

	@include modifier("accent") {
		@include ssv-icon-variant($ssv-accent-variant);
	}

	@include modifier("success") {
		@include ssv-icon-variant($ssv-success-variant);
	}

	@include modifier("danger") {
		@include ssv-icon-variant($ssv-danger-variant);
	}

	@include modifier("warn") {
		@include ssv-icon-variant($ssv-warn-variant);
	}

	@include modifier("info") {
		@include ssv-icon-variant($ssv-info-variant);
	}

	// sizes
	@include modifier("xxsmall") {
		font-size: $ssv-icon-default-size-xxsmall;
	}

	@include modifier("xsmall") {
		font-size: $ssv-icon-default-size-xsmall;
	}

	@include modifier("small") {
		font-size: $ssv-icon-default-size-small;
	}

	@include modifier("medium") {
		font-size: $ssv-icon-default-size-medium;
	}

	@include modifier("large") {
		font-size: $ssv-icon-default-size-large;
	}

	@include modifier("xlarge") {
		font-size: $ssv-icon-default-size-xlarge;
	}

	@include modifier("xxlarge") {
		font-size: $ssv-icon-default-size-xxlarge;
	}
}