@import "./shadow.mixin";
$ssv-breakpoints: () !default;
$ssv-breakpoints-defaults: (
	"xsmall": 450px, "small": 767px, "medium": 992px, "large": 1200px, "xlarge": 1500px, "xxlarge": 1800px
);
$ssv-breakpoints: map-merge($ssv-breakpoints-defaults, $ssv-breakpoints);

// BEM mixins
// --------------

// reference https://css-tricks.com/snippets/sass/bem-mixins/

/// Block Element
/// @access public
/// @param {String} $element - Element's name
@mixin element($element) {
	&__#{$element} {
		@content;
	}
}

// todo: fix for sub modifier - its adding to the previous modifier e.g. @include modifier("focused") => ssv-button--raised--focused
// should be `ssv-button--raised.ssv-button--focused` instead.

/// Block Modifier
/// @access public
/// @param {String} $modifier - Modifier's name
@mixin modifier($modifier) {
	&--#{$modifier} {
		@content;
	}
}

@mixin breakpoint-large-up {
	$value: map-get($ssv-breakpoints, "large");

	@media (min-width: $value) {
		@content;
	}
}

@mixin breakpoint-medium-up {
	$value: map-get($ssv-breakpoints, "medium");

	@media (min-width: $value) {
		@content;
	}
}

@mixin breakpoint-small-only {
	$value: map-get($ssv-breakpoints, "small");

	@media (max-width: $value) {
		@content;
	}
}

@mixin breakpoint-small-up {
	$value: map-get($ssv-breakpoints, "small");

	@media (min-width: $value) {
		@content;
	}
}

@mixin breakpoint-xsmall-only {
	$value: map-get($ssv-breakpoints, "xsmall");

	@media (max-width: $value) {
		@content;
	}
}

@mixin breakpoint-xsmall-up {
	$value: map-get($ssv-breakpoints, "xsmall");

	@media (min-width: $value) {
		@content;
	}
}