@import "Theme.scss";

// Web-link square (see the razor): the icon PNG sits centred in flow like every other square
// button's; the anchor label is an absolute overlay filling the face on top of it. The label is a
// div child, not a <button> child, so Theme's `button > *` rule doesn't deaden it — it must take
// pointer events, since the anchor glyph IS the click target. Its glyph is transparent: it only
// exists to hit-test, the .img underneath is what shows.
WorkshopLinkButton {
	position: relative;

	.img { pointer-events: none; }

	WebLinkLabel {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		align-items: center;
		justify-content: center;
		text-align: center;
		pointer-events: all;
		cursor: blank-hand;
		font-family: "Material Icons";
		// One glyph = 1em square; 64px = the face inside the 4px border.
		font-size: 64px;
		line-height: 64px;
		color: rgba( 0, 0, 0, 0 );
	}
}