CSS issue with background color in ::after - html

Question

I use the following HTML/CSS code to make a chat bubble:
body {background-color: red}
.message-sent {
position:relative;
padding:10px 20px;
color:white;
background:#0B93F6;
border-radius:25px;
float: right;
margin-bottom: 5px;
margin-right: 30px;
}
.message-sent-last::before {
content:"";
position:absolute;
z-index:-1;
bottom:-2px;
right:-7px;
height:20px;
border-right:20px solid #0B93F6;
border-bottom-left-radius: 16px 14px;
-webkit-transform:translate(0, -2px);
}
.message-sent-last::after {
content:"";
position:absolute;
z-index:1;
bottom:-2px;
right:-56px;
width:26px;
height:20px;
border-bottom-left-radius: 10px;
-webkit-transform:translate(-30px, -2px);
background: red;
}
<div class="message-sent message-sent-last">
Hey there! What's up?
</div>
But the problem is in the last line of the CSS in which I am forced to repeat the background color, otherwise, the bubble will break. Please, check this out:
body {background-color: red}
.message-sent {
position:relative;
padding:10px 20px;
color:white;
background:#0B93F6;
border-radius:25px;
float: right;
margin-bottom: 5px;
margin-right: 30px;
}
.message-sent-last::before {
content:"";
position:absolute;
z-index:-1;
bottom:-2px;
right:-7px;
height:20px;
border-right:20px solid #0B93F6;
border-bottom-left-radius: 16px 14px;
-webkit-transform:translate(0, -2px);
}
.message-sent-last::after {
content:"";
position:absolute;
z-index:1;
bottom:-2px;
right:-56px;
width:26px;
height:20px;
border-bottom-left-radius: 10px;
-webkit-transform:translate(-30px, -2px);
background: transparent;
}
<div class="message-sent message-sent-last">
Hey there! What's up?
</div>
I would like to not repeat the background color of the page since the snippet will be used in several places with different background colors. I've tried with transparent and inherit but none worked out.
This is how the second snipped looks like:
I've tested in Chrome and FF under Ubuntu.
What do you think?

Answer 1

In your case, since it is fundamental for the creation of the bubble to assign the same color of the background to the div I would suggest to use a variable, so when the color of the body changes even the color of the div::after will change:
add at the top of your css file:
:root {
--main-bg-color: red;
}
in your body element:
body {background-color: var(--main-bg-color);}
and div:
.message-sent-last::after {
content:"";
position:absolute;
z-index:1;
bottom:-2px;
right:-40px;
width:10px;
height:20px;
border-bottom-left-radius: 10px;
-webkit-transform:translate(-30px, -2px);
background: var(--main-bg-color);
}
This allows you to change it on root and making the change effective on both elements.
Please note that it will not work on IE though.