CSS - Speech Bubble Icon

Code example for drawing a simple speech bubble icon using HTML and CSS.

The HTML code sets the class name "speech-bubble-icon" for the <div> tag which will make up the speech bubble icon element.
It uses a child <div> tag for the 3 dots.

<div class="speech-bubble-icon">
	<div></div>
</div>

The CSS custom properties:
"--w" sets the base size.
"--color" sets the base color.

The dots are positioned using the main element, ::before and ::after.

/* Speech Bubble Icon */
.speech-bubble-icon {
	--w: 300px; /* Base Size */
	--color: #a1b4cc; /* Base Color */
	position: relative;
	width: var(--w);
	height: var(--w);
}

.speech-bubble-icon::before {
	content: "";
	position: absolute;
	top: 10%;
	left: 5%;
	width: 90%;
	height: 70%;
	background-color: var(--color);
	border-radius: 35%;
}

.speech-bubble-icon::after {
	content: "";
	position: absolute;
	top: 60%;
	left: 30%;
	width: calc(var(--w) / 3.75);
	height: calc(var(--w) / 3.75);
	border-bottom: calc(var(--w) / 7) solid var(--color);
	border-radius: 0 0 calc(var(--w) / 3) 0;
	transform: rotate(90deg);
}

/* Dots */
.speech-bubble-icon div {
	position: absolute;
	top: 38%;
	left: 15%;
	width: calc(var(--w) / 6);
	height: calc(var(--w) / 6);
	background-color: #fff;
	border-radius: 50%;
}

.speech-bubble-icon div::before {
	content: "";
	position: absolute;
	left: 155%;
	width: calc(var(--w) / 6);
	height: calc(var(--w) / 6);
	background-color: #fff;
	border-radius: 50%;
}

.speech-bubble-icon div::after {
	content: "";
	position: absolute;
	left: 310%;
	width: calc(var(--w) / 6);
	height: calc(var(--w) / 6);
	background-color: #fff;
	border-radius: 50%;
}