@import "../style/mixins";
@import "../waves/waves.mixin";

@mixin ssv-button-variant($options: ()) {
	$color: map-get($options, color);
	$color-contrast: map-get($options, color-contrast);
	$flat-hover-color: map-get($options, highlight-color);
	$ripple-color: map-get($options, ripple-color);

	// flat
	color: $color;

	&:hover {
		color: $flat-hover-color;
	}

	// raised
	&.ssv-button--raised {
		color: $color-contrast;
		background-color: $color;

		&:hover {
			background-color: rgba($color, 0.8);
		}

		&:active {
			background-color: rgba($color, 0.9);
		}

		&[disabled] {
			background-color: rgba($color, 0.4);
		}

		&.ssv-button--focused {
			&:not(:active) {
				background-color: rgba($color, 0.9);
			}
		}

		@include ssv-waves-ripple-color($ripple-color);
	}

	// outline
	&.ssv-button--outline {
		&,
		&:hover {
			border-color: $color;
		}

		&:hover:not([disabled]) {
			color: $color-contrast;
			background-color: $color;
		}

		&[disabled] {
			border-color: rgba($color, 0.4);
		}

		@include ssv-waves-ripple-color($ripple-color);
	}

	// focused
	@include modifier("focused") {
		&:not(:active) {
			background-color: rgba($color, 0.9);
		}
	}
}