@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;
}
}