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

@message-max-width: 800px;

// This class wraps the items that appear above the message list in the
// toolbar. We want the toolbar items to sit right above the centered
// content, so we need another 800px-wide container in the toolbar...
.message-toolbar-items {
  order: -100;
  width: 100%;
  text-align: center;
  position: absolute;
  pointer-events: none;
  transition: opacity .25s ease-in-out;

  .message-toolbar-items-inner {
    margin: auto;
    max-width: @message-max-width - @spacing-three-quarters*2;
    text-align: left;
    pointer-events: auto;
  }
}

// .message-toolbar-items also fades in and out when you select / deselect
.message-toolbar-items.hidden {
  opacity: 0;
}

#message-list {
  position: relative;

  width: 100%;
  padding: 0;
  overflow-y: auto;
  order: 2;

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

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

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

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

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

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

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

    .message-header {
      position: relative;
      font-size: @font-size-small;
      .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 {
      color: @text-color-very-subtle;
      float: right;
      margin-left: 1em;

      &:hover {
        cursor: pointer;
      }
    }

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

    iframe {
      width: 100%;
      border: 0;
      padding: 0;
      margin-top: @spacing-sub-double;
      overflow: auto;
    }
  }


  .collapse-headers {
    position: absolute;
    bottom: 0;
    right: 0;
    color: @text-color-very-subtle;
  }

  .collapse-headers:hover {cursor: pointer;}

}
.attachments-area {
  padding-top: @spacing-standard;
}


///////////////////////////////
// message-participants.cjsx //
///////////////////////////////
.message-participants {

  &.collapsed:hover {cursor: pointer;}

  .from-contact {
    font-weight: @headings-font-weight;
    color: @text-color;
  }

  .to-label, .cc-label {
    color: @text-color-very-subtle;
  }
  .cc-label {
    margin-left: @spacing-standard;
  }
  .to-contact, .cc-contact, .to-everyone {
    color: @text-color-very-subtle;
  }

  .to-label { font-weight: 600; }

  .expanded-participants {
    position: relative;
    padding-right: 1.2em;

    .from-label, .to-label, .cc-label {
      float: left;
      display: block;
      font-weight: 600;
      margin-left: 0;
    }

    .to-label, .cc-label {
      margin-right: 1.15em;
    }

    .from-contact, .to-contact, .cc-contact {
      padding-left: 2.85em;
    }
  }
}