.raf-comment-field {
  display: flex;
  margin: 16px 0;

  /* &__ {} */
  &__group {
    display: flex;
    flex: 1;

    .raf-button {
      height: 100%;
      border-radius: 0 100px 100px 0;
      margin: 0;
      text-align: left;
      justify-content: flex-start;

      &:focus {
        box-shadow: inset 0 0 0 3px shade($primary, 10%); // color-mod(var(primary) shade(10%));
      }
    }
  }

  .raf-avatar {
    align-self: center;
  }

  .raf-textarea .raf-textarea__textarea {
    flex: 1;
    resize: none;
    background: #f7f7f7;
    color: $fontColor;
    font-size: 14px;
    font-weight: 500;
    border-radius: 100px 0 0 100px;
    padding: 10px 22px;
    border: 0;
    margin-left: 8px;
    position: relative;

    &::placeholder {
      color: tint($fontColor, 50%); // color-mod(var(fontColor) tint(50%));
    }
  }
}