@import "../style/mixins";

@mixin ssv-input-variant($options: ()) {
	$color: map-get($options, color);
	$defaults: (
		focused-color: $color
	);
	$options: map-merge($defaults, $options);
	$focused-color: map-get($options, focused-color);

	.ssv-input {
		@include element("label") {
			color: $color;
		}

		@include element("help") {
			color: $color;
		}

		@include element("input") {
			border-bottom-color: $color;

			&:focus {
				box-shadow: 0 1px 0 0 $color;
			}
		}

		@include modifier("focused") {
			.ssv-input__label {
				color: $focused-color;
			}
		}
	}
}