%placeholder,
.placeholder {

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

  .sms-message-wrapper & {
    box-shadow: inset 0.47em 0 0 0 $panel-colour, inset -0.47em 0 0 0 $panel-colour, inset 0 -0.18em 0 0 $panel-colour, inset 0 0.18em 0 0 $panel-colour;
  }

}

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

.placeholder-conditional {

  @extend %placeholder;
  border-radius: 0;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  box-shadow: inset 0.47em 0 0 0 $white, inset -0.89em 0 0 0 $white, inset 0 -0.16em 0 0 $white, inset 0 0.16em 0 0 $white;

  .sms-message-wrapper & {
    box-shadow: inset 0.47em 0 0 0 $panel-colour, inset -0.89em 0 0 0 $panel-colour, inset 0 -0.18em 0 0 $panel-colour, inset 0 0.18em 0 0 $panel-colour;
  }

}

.placeholder-redacted {

  background: currentColor;
  padding: 0 0.5em;
  opacity: 0.8;
  box-shadow: inset 0 -0.35em 0 0 $white;
  position: relative;
  top: 0.1em;

  .sms-message-wrapper & {
    box-shadow: inset 0 -0.35em 0 0 $panel-colour;
  }

  *:focus + p & {
    box-shadow: inset 0 -0.35em 0 0 $yellow;
  }

}