.message_card {
  @include rem(padding, 15px 20px);
  @include rem(margin-bottom, 20px);

  .user_badge__title {
    text-transform: none;
    letter-spacing: 0;

    @include rem(line-height, 22px);
  }

  &__reply {
    color: $secondary;
  }

  &__area {
    text-align: left;
    background: #fff;
    border-radius: 0;
    padding: 0;
    position: relative;
    resize: none;
    border: 0 !important;

    @include rem(height, 110px);
    @include rem(min-height, 108px);
    @include rem(max-height, 400px);
    @include rem(margin-top, -4px);
    @include rem(font-size, 16px);
    @include transition(all .3s ease);
    @include transform(translate(0, -18px));
    @include transform(translate(0, -1.125rem))
  }

  &__inner {
    position: relative;
  }

  &__message {
    @include rem(margin-top, 4px);
    @include rem(font-size, 18px);
    @include rem(line-height, 30px);

    p {
      margin-bottom: 0;
    }

    .card__actions {
      @include rem(margin-top, 4px);
      @include rem(padding, 6px 0);

      border-bottom: 1px solid #EBEDEF;
    }
  }

  &__date {
    color: rgba($secondary, .6);
    font-weight: normal;
    display: inline-block;

    @include rem(font-size, 16px);
  }

  .btn {
    @include rem(margin-top, 15px);
    @include rem(padding, 7px 21px);
  }

  &--form {
    border-radius: 3px;
    border: 1px solid #e1e1e1;
    margin-bottom: 0;
    
    .user_badge__title {
      opacity: 0;
      visibility: hidden;

      @include transform(translate(0, -18px));
      @include transition(all .3s ease);
    }

    .message_card__inner {
      @include rem(height, 29px);
      @include transition(all .3s ease);
    }
    
    .focused & {
      .user_badge__title {
        opacity: 1;
        visibility: visible;
      }

      .form-control {
        @include rem(margin-top, 10px);
      }

      .form-control, .user_badge__title {
        @include transform(translate(0, 0));
      }

      .message_card__inner {
        @include rem(height, 142px);
        @include rem(padding-top, 2px);
      }
    }
  }

  &--accent {
    border-radius: 3px;
    background: rgba(#EAEDEF, .4);

    @include rem(padding-top, 20px);
    @include rem(padding-bottom, 20px);
  }
}

.message_actions {
  @include rem(margin-top, 30px);
}

.messages_list {
  .user_badge__message {
    @include rem(padding-top, 2px);
  }

  .btn-block, + .btn-block {
    @include rem(margin, 30px 0);
  }
}