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