@reference '../../styles/globals.css';

.duck {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.shadow {
	fill: rgba(0, 0, 0, 0.14);
}

.body {
	stroke: rgba(120, 120, 120, 0.28);
	stroke-width: 1;
}

.wing {
	fill: rgba(0, 0, 0, 0.07);
}

.beak {
	fill: #e8893f;
}

.eye {
	fill: #15151a;
}

/* accessories hidden by default; one is revealed per store */
.monocle,
.shades,
.hat {
	display: none;
}

.monocle circle,
.monocle line {
	stroke: #c9a86a;
	stroke-width: 1.3;
	fill: none;
}

.shades rect {
	fill: #0a0a0a;
}

.shades line {
	stroke: #0a0a0a;
	stroke-width: 2;
}

.hat rect,
.hat ellipse {
	fill: #fff;
	stroke: rgba(0, 0, 0, 0.08);
	stroke-width: 1;
}

@store executive {
	.beak {
		fill: #c9a86a;
	}
	.monocle {
		display: block;
	}
}

@store crypto {
	.duck {
		filter: drop-shadow(0 0 7px var(--color-accent));
	}
	.beak {
		fill: var(--color-accent);
	}
	.shades {
		display: block;
	}
}

@store supper {
	.hat {
		display: block;
	}
}