$tail-angle: 20deg;

.sms-message-wrapper {

  position: relative;
  width: 100%;
  max-width: 464px;
  box-sizing: border-box;
  padding: govuk-spacing(3);
  background: $panel-colour;
  border: 1px solid $panel-colour;
  border-radius: 5px;
  white-space: normal;
  margin: 0 0 govuk-spacing(6) 0;
  clear: both;
  word-wrap: break-word;

  &:after {
    content: "";
    display: block;
    position: absolute;
    bottom: -5px;
    right: -20px;
    border: 10px solid transparent;
    border-left-width: 13px;
    border-right-width: 13px;
    border-bottom-color: $panel-colour;
    border-left-color: $panel-colour;
    transform: rotate($tail-angle);
  }

}

.sms-message-inbound {

  .sms-message-wrapper {

    &:after {
      border-left-color: transparent;
      border-bottom-color: $panel-colour;
      border-right-color: $panel-colour;
      right: auto;
      left: -20px;
      transform: rotate(-$tail-angle);
    }

  }

}

.sms-message-sender {
  @include copy-19;
  color: $secondary-text-colour;
  margin: 0 0 -10px 0;
}

.sms-message-recipient {
  @include copy-19;
  color: $secondary-text-colour;
  margin: 10px 0 0 0;
}

.sms-message-status {
  @include core-16;
  color: $secondary-text-colour;
  margin: -20px govuk-spacing(3) 20px govuk-spacing(3);
}

.sms-message-status-outbound {
  text-align: right;
}

.sms-message-row {

  &:focus {
    outline: none;
    padding-top: 120px;
    margin-top: -120px;
  }

}

.sms-message-reply-link {
  text-align: right;
}