////
/// @group stickers
////

/// A mixin that helps create custom Sticker sizes.
/// @param {Map} $map - A map of `key: value` pairs. The keys and value types are listed below:
/// @example
/// font-size: {Number | String | Null},
/// inline-item-font-size: {Number | String | Null},
/// outside-offset: {Number | String}, // Default: -(map-get($map, size) / 2)
/// size: {Number | String | Null},
/// @todo
/// - Add @example
/// - Add @link to documentation

@mixin clay-sticker-size($map) {
	$font-size: map-get($map, font-size);
	$inline-item-font-size: map-get($map, inline-item-font-size);
	$outside-offset: setter(map-get($map, outside-offset), -(map-get($map, size) / 2));
	$size: map-get($map, size);

	font-size: $font-size;

	@include clay-monospace($size);

	> .inline-item {
		font-size: $inline-item-font-size;
	}

	&.sticker-outside {
		left: $outside-offset;
		top: $outside-offset;

		&.sticker-bottom-left {
			bottom: $outside-offset;
			top: auto;
		}

		&.sticker-bottom-right {
			bottom: $outside-offset;
			left: auto;
			right: $outside-offset;
			top: auto;
		}

		&.sticker-top-right {
			left: auto;
			right: $outside-offset;
		}
	}
}

/// A mixin to create sticker variants. You can base your variant off `.sticker` or create your own base class (e.g., `<span class="sticker my-custom-sticker-variant"></span>` or `<span class="my-custom-sticker"></span>`).
/// @param {Map} $map - A map of `key: value` pairs. The keys and value types are listed below:
/// @example
/// align-items: {String | Null},
/// background-color: {Color | String | Null}, // An alias for bg
/// bg: {Color | String | Null}, // Default: $background-color
/// border-color: {Color | String | List | Null},
/// border-radius: {Number | String | List | Null},
/// border-style: {String | List | Null},
/// border-width: {Number | String | List | Null},
/// box-shadow: {String | List | Null},
/// color: {Color | String | Null},
/// display: {String | Null},
/// font-size: {Number | String | Null},
/// font-weight: {Number | String | Null},
/// height: {Number | String | Null},
/// justify-content: {String | Null},
/// line-height: {Number | String | Null},
/// position: {String | Null},
/// text-align: {String | Null},
/// vertical-align: {String | Null},
/// width: {Number | String | Null},
/// @todo
/// - Add @example
/// - Add @link to documentation

@mixin clay-sticker-variant($map) {
	$align-items: map-get($map, align-items);
	$background-color: map-get($map, background-color);
	$bg: setter(map-get($map, bg), $background-color);
	$border-color: map-get($map, border-color);
	$border-radius: map-get($map, border-radius);
	$border-style: map-get($map, border-style);
	$border-width: map-get($map, border-width);
	$box-shadow: map-get($map, box-shadow);
	$color: map-get($map, color);
	$display: map-get($map, display);
	$font-size: map-get($map, font-size);
	$font-weight: map-get($map, font-weight);
	$height: map-get($map, height);
	$justify-content: map-get($map, justify-content);
	$line-height: map-get($map, line-height);
	$position: map-get($map, position);
	$text-align: map-get($map, text-align);
	$vertical-align: map-get($map, vertical-align);
	$width: map-get($map, width);

	align-items: $align-items;
	background-color: $bg;
	border-color: $border-color;
	border-radius: $border-radius;
	border-style: $border-style;
	border-width: $border-width;
	box-shadow: $box-shadow;
	color: $color;
	display: $display;
	height: $height;
	line-height: $line-height;
	font-size: $font-size;
	font-weight: $font-weight;
	justify-content: $justify-content;
	position: $position;
	text-align: $text-align;
	vertical-align: $vertical-align;
	width: $width;

	.sticker-overlay {
		border-radius: $border-radius;
	}
}