@import 'settings';

// make sure the date is positioned top right of the message
.message__created {
  font-size: $font-size-xs;
  color: $gray-light;
  line-height: $line-height-base * $font-size-base;

  @include for-tablet-portrait-up {
    float: right;
  }

}

.field--name-message {

  p {
    margin: 0;
  }
}

//cover the whole card
.message {
  font-weight: 400;
  transition: box-shadow 0.3s;

  &:hover,
  &:focus {
    @include z-depth-3;
  }

  .avatar {
    flex: 64px 0 0;
  }
}

.message__inbox-body {
  overflow: hidden;
}

.message__excerpt {
  margin-top: 0.3em;
  line-height: 1;

  @include for-tablet-landscape-up {
    display: flex;
  }

  p {
    margin: 0;
  }

  .message__owner {
    padding-right: 0.5em;
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

.message__message-excerpt {
  @include for-tablet-landscape-up {
    flex-grow: 1;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
}

.message__heading {
  align-items: center;
  padding: 1.25rem 0 0.5rem;
  border-bottom: 1px solid $gray-lighter;
  margin-bottom: 0.5rem;
}

.message__recipients {
  align-items: center;
}

.message__back-btn {
  flex: 0 0 38px;
}

.private-message-thread-messages {
  padding: 1.25rem;
}

.message__thread-actions {
  margin-left: auto;
  margin-right: 0;
}

.message__thread-members {
  font-weight: $font-weight-strong;
}

.private-message-full {
  max-width: 100%;
  margin-bottom: 2rem;

  @include for-tablet-portrait-up {
    width: 70%;
    max-width: 550px;
  }

  .message__owner {
    font-weight: $font-weight-strong;
    padding-right: 1em;
    .message__deleted & {
      color: #9b9b9b;
    }
  }
}

.message__by-me {
  display: flex;
  justify-content: flex-end;

  .message__message-body {
    background: $gray-lightest;
    border: 0;
  }
}

.message__message-body {
  display: block;
  padding: 1.25rem;
  border: $gray-lighter 2px solid;
  margin-top: 0.625em;
  .message__deleted & {
    text-align: center;
    color: $gray-light-1;
    font-size: 0.85em;
  }

  p:last-child {
    margin-bottom: 0;
  }
}

.card--message-thread {

  .card__block {
    padding-top: 0;
  }

}

.private-message-form {

  @include for-phone-only {

    .btn--comment-submit {
      padding-left: 6px;
      padding-right: 6px;
      margin-bottom: 0;

      .label {
        font-size: 0;
        text-indent: -9999px;
      }

    }

  }

  @include for-tablet-portrait-up {
    .btn-icon {
      display: none;
    }
  }

  textarea.form-control {
    height: $input-height-base;
  }

}

.avatar-group-icon {
  display: inline-block;
  background-color: $gray-light-1;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-image: url(../images/icons/icon-group-white.svg);
  background-position: 50% 50%;
}

.avatar-group-icon--medium {
  width: 44px;
  height: 44px;
  padding: 8px;
  background-size: 28px 28px;
}

.avatar-group-icon--small {
  width: 34px;
  height: 34px;
  padding: 6px;
  background-size: 22px 22px;
}

// Unread thread styling
.unread-thread {
  .card {
    background: rgba(0, 0, 0, .02);
  }

  .read-indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 0 5px;
    background-color: rgba(0,0,0, .2);
  }
}
