%placeholder,
.placeholder {

  display: inline;
  background: $yellow;
  color: $text-colour;
  overflow-wrap: break-word;
  word-wrap: break-word;
  border-radius: 20px;
  box-shadow: inset 9px 0 0 0 $white, inset -9px 0 0 0 $white, inset 0 -3px 0 0 $white, inset 0 3px 0 0 $white;

  .sms-message-wrapper & {
    box-shadow: inset 9px 0 0 0 $panel-colour, inset -9px 0 0 0 $panel-colour, inset 0 -3.5px 0 0 $panel-colour, inset 0 3.5px 0 0 $panel-colour;
  }

}

.placeholder-no-brackets {
  @extend %placeholder;
  padding-left: 3px;
  padding-right: 3px;
  border-radius: 1px;
  box-shadow: inset 0 -2px 0 0 $white, inset 0 2px 0 0 $white;
}