/* Icon subset used by the public home. Keep these rules aligned with pb-iconography.php. */
.pb-icon__before--external-link-s-primary::before,
.pb-icon__before--close-l-black::before,
.pb-icon__before--hamburger-menu-l-black::before,
.pb-icon__before--round-checkmark-xl-black::before,
.pb-icon__before--round-filled-play-xl-primary::before {
	content: "";
	display: inline-block;
	position: relative;
	margin-right: var(--spacing-8);
	vertical-align: text-bottom;
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;
}

.pb-icon__before--external-link-s-primary::before {
	width: 16px;
	height: 16px;
	mask-image: url("https://plottybot.com/img/icons/pb-iconography/icons-s/external-link.svg");
	-webkit-mask-image: url("https://plottybot.com/img/icons/pb-iconography/icons-s/external-link.svg");
	background-color: var(--color-primary-50);
}

.pb-icon__before--close-l-black::before,
.pb-icon__before--hamburger-menu-l-black::before {
	width: 20px;
	height: 20px;
	background-color: var(--color-neutral-100);
}

.pb-icon__before--close-l-black::before {
	mask-image: url("https://plottybot.com/img/icons/pb-iconography/icons-l/close.svg");
	-webkit-mask-image: url("https://plottybot.com/img/icons/pb-iconography/icons-l/close.svg");
}

.pb-icon__before--hamburger-menu-l-black::before {
	mask-image: url("https://plottybot.com/img/icons/pb-iconography/icons-l/hamburger-menu.svg");
	-webkit-mask-image: url("https://plottybot.com/img/icons/pb-iconography/icons-l/hamburger-menu.svg");
}

.pb-icon__before--round-checkmark-xl-black::before,
.pb-icon__before--round-filled-play-xl-primary::before {
	width: 40px;
	height: 40px;
}

.pb-icon__before--round-checkmark-xl-black::before {
	mask-image: url("https://plottybot.com/img/icons/pb-iconography/icons-xl/round-checkmark.svg");
	-webkit-mask-image: url("https://plottybot.com/img/icons/pb-iconography/icons-xl/round-checkmark.svg");
	background-color: var(--color-neutral-100);
}

.pb-icon__before--round-filled-play-xl-primary::before {
	mask-image: url("https://plottybot.com/img/icons/pb-iconography/icons-xl/round-filled-play.svg");
	-webkit-mask-image: url("https://plottybot.com/img/icons/pb-iconography/icons-xl/round-filled-play.svg");
	background-color: var(--color-primary-50);
}

.pb-icon__before--external-link-s-primary:hover::before,
.pb-icon__before--round-filled-play-xl-primary:hover::before {
	background-color: var(--color-primary-60);
}

.pb-icon__before--close-l-black:hover::before,
.pb-icon__before--hamburger-menu-l-black:hover::before,
.pb-icon__before--round-checkmark-xl-black:hover::before {
	background-color: var(--color-neutral-90);
}

.pb-icon__before--external-link-s-primary:disabled::before,
.pb-icon__before--round-filled-play-xl-primary:disabled::before {
	background-color: var(--color-neutral-50);
}