@import "ui-variables";
@import "ui-mixins";

#message-list {
  position: relative;

  width: 100%;
  height: 100%;
  padding: 0;

  order: 2;

  .title-and-messages {
    height: 100%;
    overflow: auto;
  }

  .messages-wrap {
    position: relative;

    height: 100%;
    width: 100%;
  }

  .message-list-headers {
    margin: 0 auto;
    padding: @spacing-double @spacing-standard;
    width: 100%;
    max-width: 800px;

    .participants {
      .contact-chip {
        display:inline-block;
      }
    }
  }

  // .message-list-primary-actions {
  //   z-index: 2;
  //   -webkit-user-select: none;
  //   padding-top: 6px;
  //   padding-bottom: 5px;
  //   padding-left:13px;
  //   background-color: @background-color;
  //   border-bottom:1px solid @border-color;
  //
  //   .primary-actions-bar {
  //     width: 100%;
  //     font-size: 21px;
  //     line-height: 2;
  //     .btn-icon {
  //       padding-top: 0;
  //       padding-bottom: 0;
  //     }
  //     .btn {
  //       margin-left: 4px;
  //     }
  //   }
  // }

  .message-item-wrap {
    position: relative;
    width: 100%;

    margin: 0 auto;
    padding-top: @spacing-standard;
    &:first-child { padding-top: 0; }

    border-bottom: 1px solid @border-primary-bg;
    &:last-child { border-bottom: 0; }
  }

  .message-item-area {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: @spacing-standard;

    &.collapsed {
      padding: 0 @spacing-standard;
    }

    .message-header {
      .message-actions {
        float:right;
        padding-right:15px;
        .btn-icon {
          font-size:16px;
          color:rgba(35, 31, 32, 0.1);
          &:hover {
            color:rgba(35, 31, 32, 0.5);
          }
        }
      }
    }

    .message-time, .message-indicator {
      font-size: @font-size-small;
      color: @text-color-subtle;
      margin-top: 3px;
      float: right;
    }

    .message-indicator {
      margin-right: 4px;
    }

    .to-label, .to-everyone, .cc-label, .cc-contact, .to-label, .to-contact {
      position: relative;
      top: -1px;
    }

    .from-label {
      display: none;
    }
    .from-contact {
      font-weight:@headings-font-weight;
      color: @text-color;
      font-size: @font-size-large;
      margin-right: 15px;
    }

    .to-label, .cc-label {
      font-size: @font-size-small;
      color: @text-color;
    }
    .cc-label {
      margin-left: 15px;
    }
    .to-contact, .cc-contact, .to-everyone {
      font-size: @font-size-small;
      color: @text-color-subtle;
    }

    iframe {
      width: 100%;
      border: 0;
      padding: 0;
      margin-top: @spacing-standard;
      overflow: auto;
    }
  }
}
.attachments-area {
  border-bottom: 1px solid @border-color;
  padding: 5px 15px 0px 15px;
}