.sms-message {

  position: relative;
  margin: 0 0 $gutter 0;

  &:before {
    content: '';
    position: absolute;
    z-index: 10;
    bottom: -12px;
    right: 5px;
    width: 20px;
    height: 25px;
    border-radius: 100%;
    background: $panel-colour;
  }

  &:after {
    content: '';
    position: absolute;
    z-index: 20;
    bottom: -15px;
    right: -5px;
    border-radius: 100%;
    width: 20px;
    height: 20px;
    background: $white;
  }

  &-wrapper {
    width: 100%;
    display: inline-block;
    box-sizing: border-box;
    position: relative;
    z-index: 30;
    padding: $gutter/2;
    background: $panel-colour;
    border-radius: 5px;
    white-space: normal;
  }

  &-recipient {
    @include copy-19;
    color: $secondary-text-colour;
    margin: -$gutter-half 0 $gutter 0;
  }

  &-history {

    background: $turquoise;
    color: $white;
    padding: $gutter-half;
    @include bold-19;
    margin: 0 0 $gutter 0;

    &-heading {

      @include bold-19;
      margin: 0;

      &-time {
        @include inline-block;
        margin-left: 10px;
        font-weight: normal;
      }

    }

  }

}