/*
 * Stickers — [sticker]
 * Laid out at the original artwork's size (1 unit = 1px), then scaled by stickers.js
 * to fit the width BeBuilder gives the element.
 */

.sticker-filter {
	position: absolute;
	width: 0;
	height: 0;
}

.sticker-fit {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
}

.sticker {
	--scale: 0.76;
	--fill: #ff843e;
	--ink: #3e3e3e;

	position: relative;
	flex: none;
	margin: 0;
	padding: 0;
	transform: scale(var(--scale)) rotate(var(--tilt, 0deg));
	color: var(--ink);
	font: 500 16.3px / 21px "Roboto Mono", monospace;
	letter-spacing: 0.034em;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
}

.sticker.color-pink { --fill: #ff7e9a; }
.sticker.color-yellow { --fill: #fdbd14; }
.sticker.color-purple { --fill: #9d69c8; --ink: #fff; }
.sticker.color-green { --fill: #41a13f; --ink: #fff; }

/* Each line gets its own pill; the filter merges them and draws the outline. */
.sticker .lines {
	padding: 6px 14px;
	background: var(--fill);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.sticker .shape {
	color: transparent;
	filter: url(#sticker-shape);
}

.sticker .text {
	position: absolute;
	inset: 0;
}

.sticker .text .lines {
	background: none;
}