////
/// @group sheet
////

/// A mixin to force `.btn` or `.btn-group` into block level elements at a max-width breakpoint.
/// @param {Map} $map - A map of `key: value` pairs. The keys and value types are listed below:
/// @example
/// enabled: {Bool}, // Set to false to prevent mixin styles from being output. Default: true
/// breakpoint-down: {String, Null}, // The Bootstrap 4 Breakpoint {xs | sm | md | lg | xl}
/// btn-margin-bottom-mobile: {Number | String | Null},
/// @todo
/// - Add @example
/// - Add @link to documentation

@mixin sheet-footer-btn-block($map) {
	$enabled: setter(map-get($map, enabled), true);

	$breakpoint-down: map-get($map, breakpoint-down);
	$mobile: setter(map-get($map, mobile), ());

	$btn-mobile: setter(map-get($mobile, btn), ());
	$btn-mobile: map-merge(
		$btn-mobile,
		(
			margin-bottom:
				setter(
					map-get($map, btn-margin-bottom-mobile),
					map-get($btn-mobile, margin-bottom)
				),
		)
	);

	$mobile: map-deep-merge(
		(
			'.btn': $btn-mobile,
			'.btn-group': map-get($mobile, btn-group),
			'.btn-group-item': map-get($mobile, btn-group-item),
		),
		$mobile
	);

	@if ($breakpoint-down) {
		$map: map-deep-merge(
			$map,
			(
				media-breakpoint-down: (
					$breakpoint-down: $mobile,
				),
			)
		);
	}

	$map: map-remove(
		$map,
		'breakpoint-down',
		'btn',
		'btn-group',
		'btn-group-item',
		'mobile'
	);

	@if ($enabled) {
		$_media-breakpoint-down: map-get($map, media-breakpoint-down);
		$_media-breakpoint-up: map-get($map, media-breakpoint-up);

		@if ($_media-breakpoint-down) or ($_media-breakpoint-up) {
			@include clay-generate-media-breakpoints($map, 'clay-map-to-css');
		}
	}
}