SCSS Speech Bubble

@mixin speech-bubble($size: 7, $border-color: #E0E8ED, $top: 15px, $border-width: 2) {
border
: 1px solid $border-color;
border
-radius: 8px;
position
: relative;
margin
-left: $size + ($border-width / 2);
box
-shadow: 0 2px 4px rgba(0,0,0,0.05);
margin
-right: 4px;
margin
-bottom: 4px;
padding
: 1ex 1em;
&:after {
content
: "";
display
: block;
position
: absolute;
border
-right: $size solid $white;
border
-top: $size solid transparent;
border
-bottom: $size solid transparent;
left
: -$size;
top
: $top;
}
&:before {
content
: "";
display
: block;
position
: absolute;
border
-right: ($size + $border-width) solid $border-color;
border
-top: ($size + $border-width) solid transparent;
border
-bottom: ($size + $border-width) solid transparent;
left
: -($size + $border-width);
top
: $top - $border-width;
}
}