@import "darkside-variables";

.tokenizing-field .token,
.tokenizing-field .token:hover,
.tokenizing-field .token.selected,
.tokenizing-field .token.dragging {
  color: @sidebar;
  background: @messagelist-bg;
  box-shadow: none;
  border: none;
  margin: 0;
  margin-right: 5px;
}

.tokenizing-field .token.selected,
.tokenizing-field .token.dragging {
  color: @sidebar;
  background: @accent;
}

.tokenizing-field .token.invalid,
.tokenizing-field .token.invalid:hover,
.tokenizing-field .token.invalid.selected,
.tokenizing-field .token.invalid.dragging {
  color: @sidebar;
  background: none;
  border: none;
  box-shadow: inset 0 0 0 1px @invalid;
}

// Darken composer action bar to contrast from background
.composer-inner-wrap .composer-action-bar-wrap,
.composer-full-window .composer-inner-wrap .composer-action-bar-wrap {
  background: darken(@messagelist-bg, 1%);
  box-shadow: none;
  border-radius: 0;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

// Replacing focused state with theme accent
#message-list .message-item-wrap .message-item-white-wrap.composer-outer-wrap {
  background: white;
  &.focused {
    box-shadow: 0 0 0 1px @accent;
  }
}

.message-item-white-wrap.composer-outer-wrap .composer-participant-field .dropdown-component .signature-button-dropdown .only-item {
  background: white;
}

// make action bar at bottom of composer a bit darker than background
#message-list .message-item-wrap .message-item-white-wrap.composer-outer-wrap {
  & .composer-action-bar-wrap { background: transparent; }
  &.focused .composer-action-bar-wrap { background: darken(@messagelist-bg, 1%); }
}

.composer-participant-field,
.composer-inner-wrap .composer-subject,
.composer-inner-wrap .collapsed-composer-participants {
  margin: 0;
}

.composer-inner-wrap .composer-centered,
.composer-inner-wrap .compose-body,
.composer-inner-wrap .composer-body-wrap,
.composer-inner-wrap .composer-header-actions {
  margin: 0;
  padding: 0;
}

.composer-inner-wrap .composer-header-actions .action,
.tokenizing-field .tokenizing-field-input,
.tokenizing-field .tokenizing-field-label,
.composer-participant-field .button-dropdown,
.composer-inner-wrap .composer-field-label,
.composer-inner-wrap .composer-subject input,
.tokenizing-field .tokenizing-field-input input {
  padding-top: 0;
  padding-bottom: 0;
}

.composer-inner-wrap .composer-header-actions {
  padding-right: 0;
}

.composer-inner-wrap .collapsed-composer-participants,
.composer-inner-wrap .composer-subject,
.composer-participant-field {
  min-height: 0;
  padding-top: 10px;
  padding-bottom: 10px;
}

.composer-participant-field span {
  top: 0 !important;
}

.composer-participant-field .button-dropdown {
  vertical-align: initial;
}

.composer-inner-wrap .composer-centered,
.composer-inner-wrap .composer-action-bar-wrap .composer-action-bar-content {
  padding: 20px;
  max-width: 100%;
}

.body-field { margin-top: 20px; }

// ============================
//  Attachements
// ============================

.attachments-area,
.nylas-attachment-item,
.nylas-attachment-item.image-attachment-item {
  margin: 0;
  padding: 0;
}

.nylas-attachment-item.image-attachment-item {
  max-width: 100%;
}

// Composer attatchments hover style
.nylas-attachment-item.image-attachment-item .file-preview .file-name-container {
  background: fade(@sidebar, 20%);
  min-height: 0;
  & .file-name {
    left: 0;
    right: 0;
    bottom: 0;
    color: white;
    background: fade(@sidebar, 80%);
    padding: 5px 15px;
  }
}