/*-------------- Messages Layout -------------- */
.conversations {
  @include span-columns(3);
  margin-bottom: 2rem;
  .list {
    margin-bottom: 1rem;
    .cell {
      @include fill-parent;
      @include truncate-ellipsis;
      @include pad(0.5rem 0.2rem);
      font-size: 0.8rem;
      line-height: 0.95rem;
      cursor: pointer;
      position: relative;
      .action { position: absolute; top: 0.5rem; right: 0.2rem; color: $secondary-font-color; }
      .msg-preview { color: $secondary-font-color; }
      &.unread { background-color: $color-primary-transparent; }
      &.active { background-color: $sub-header-color; }
    }
  }
  #recentMessagesHeader {
    @include clearfix;
    cursor: pointer;
    color: $secondary-font-color;
    margin-bottom: 1rem;
    .inbox {
      @include span-columns(4);
      @include transition(color 0.15s ease);
      &:hover { @include transition(color 0.15s ease); color: $secondary-font-color-dark; }
    }
    .add {
      @include span-columns(8);
      @include omega;
      color: $color-primary;
      text-align: right;
      @include transition(color 0.15s ease);
      &:hover { @include transition(color 0.15s ease); color: $color-primary-alt; }
    }
  }
}
.messages {
  @include span-columns(9);
  @include omega;
  .thin-underline {
    @include no-select;
    margin-bottom: 0;
    h4 { margin-bottom: 0; display: inline-block;}
  }
  .reply {
    margin-top: 1rem;
    .preview {
      background-color: #fff;
      height: 7rem;
      margin-bottom: 1rem;
      cursor: default;
      white-space: pre-wrap;
      overflow-y: auto;
      padding: 0.5rem;
      border: 1px solid $border-color;
    }
    button { margin-bottom: 0; }
  }
  .msg-container {
    .message {
      @include clearfix;
      @include pad(1rem);
      border-bottom: 1px solid $border-color;
      &:last-child { margin-bottom: 2rem; }
      &:first-child { border-top: 1px solid $border-color; margin-top: 1rem;}
      &.sender { background-color: $sub-header-color; }
      &.unread { background-color: $color-primary-transparent; }
      .avatar {
        @include span-columns(1);
        img {
          @include border-radius(100px);
          height: 2.5rem;
          width: 2.5rem;
        }
      }
      .content {
        @include span-columns(12);
        word-wrap: break-word;
        .title {
          margin-bottom: 0.5rem;
          strong { font-size: 0.8rem; }
          .date { @include pad(0 0 0 0.25rem); font-size: 0.8rem; color: $secondary-font-color; }
          .action { color: $secondary-font-color; }
          &:hover .action { color: $secondary-font-color-dark; }
          &:hover .action:hover { color: $color-primary;; }
        }
        .msg-content {
          margin-left: 8.5%;
        }
      }
    }
  }
}

@include media($mobile) {
  .conversations { @include span-columns(8); @include omega; }
  .messages { @include span-columns(8); @include omega; }
}
