html[dir="ltr"] [dir] { text-align: left; }
html[dir="rtl"] [dir] { text-align: right; }

#messages-to-field {
  position: relative;
  /* To be above .article-list's with z-index = 5 */
  z-index: 6;

  display: none;
  min-height: 5.5rem;

  color: black;
  font-size: 1.465rem;
  background-color: #f2f2f2;
  transition: transform 0.2s ease-in-out 0s;
  transform: translateY(calc(-100% + 4rem));
}

.multiline-recipients-mode #messages-to-field {
  transform: translateY(calc(-100% + 5.5rem));
}

section[role="region"].new #messages-to-field {
  display: flex;
  align-items: flex-end;
}

section[role="region"].new #messages-to-field.multiline {
  transform: translateY(0);
}

#to-label {
  flex-shrink: 0;

  height: 4rem;
  padding-inline-start: 1.5rem;
  padding-inline-end: 0.7rem;

  line-height: 4rem;
  font-weight: 200;
  font-size: 1.465rem;
  color: #000;
}

#messages-recipients-list-container {
  min-height: 4rem;
  min-width: 0;
  box-sizing: border-box;

  flex-grow: 1;
}

#messages-recipients-list {
  box-sizing: border-box;
  min-height: 4rem;
  padding-top: 0;
  padding-inline-end: 0.6rem;
  padding-bottom: 0.6rem;
  padding-inline-start: 0;

  display: flex;
  align-items: center;
  flex-wrap: wrap;
}


/*
Used by Recipients.View to display multi or single line.
Do not remove.
*/
#messages-recipients-list.singleline {
  overflow-y: hidden;
}

#messages-recipients-list.multiline {
  /* max-height = viewport - header - minimum composer - list margin */
  max-height: calc(100vh - 5rem - 4rem - 0.6rem);
  margin-bottom: 0.6rem;
  padding-bottom: 0;

  overflow-y: scroll;
}

/**
 * BiDi note: all [contenteditable] blocks must carry a `dir="auto"` attribute,
 * so we cannot use *-inline-{start,end} properties on them, because the
 * direction of a dir="auto" element (and therefore the position of start/end)
 * depends on its content. We want our margin/padding to depend on the document
 * direction, not element's content.
 */
.recipient[contenteditable] {
  overflow: hidden;
  margin: 0.6rem 0 0;

  display: block;

  /* override BB selector */
  height: auto;
  width: auto;
}
html[dir="ltr"] .recipient[contenteditable] { margin-right: 0.6rem; }
html[dir="rtl"] .recipient[contenteditable] { margin-left: 0.6rem; }

.recipient[contenteditable].email {
  background: #fff url(images/icons/icon_sms_compose_email.png) no-repeat;
  background-size: 1.7rem;
}
/* see BiDi note above */
html[dir="ltr"] .recipient[contenteditable].email {
  padding-left: 3.8rem;
  background-position: left 1.5rem center;
}
html[dir="rtl"] .recipient[contenteditable].email {
  padding-right: 3.8rem;
  background-position: right 1.5rem center;
}

#messages-recipients-list > .recipient[contenteditable=true] {
  flex-grow: 1;
  height: 2.8rem;
  line-height: 2.8rem;
  border-radius: 0;

  word-wrap: unset;

  /* Building blocks override (bug xxx) */
  background: none;
  color: #000;
}

#messages-recipients-list > .recipient[contenteditable=true]:focus {
  /**
   * To workaround bug 1103011, we just collapse editable recipient on focus so
   * that caret position looks correct for the user, while in fact it is not
   * true - caret is still in wrong position, but zero-width editable element is
   * aligned correctly inside parent.
   */
  flex-grow: unset;
}

.recipient[contenteditable=true]:empty:not(:last-of-type) {
  display: none;
}

/**
 * Disable padding and give negative margin-end on empty contenteditable
 * recipients when they do not have focus. This allows the Recipients List
 * to intelligently collapse when the final row contains no "assimilated"
 * (i.e. non-contenteditable) recipients. */
.recipient[contenteditable=true]:empty {
  padding: 0;
}
/**
 * We don't use margin-inline-end here because of the bug 1103011, as currently
 * directionality of empty contenteditable isn't inherited from parent, but
 * always LTR, so margin-inline-end equals to margin-right in both LTR and RTL
 * modes. So to align it correctly we should override margin depending on text
 * direction of parent element manually.
 */
html[dir="ltr"] .recipient[contenteditable=true]:empty {
  margin-right: -0.5rem;
}
html[dir="rtl"] .recipient[contenteditable=true]:empty {
  margin-left: -0.5rem;
}

/* see BiDi note above */
html[dir="ltr"] .recipient[contenteditable=true]:focus,
html[dir="ltr"] .recipient[contenteditable=true]:hover,
html[dir="ltr"] .recipient[contenteditable=true]:empty:focus {
  margin-right: 0.5rem;
  padding-right: 0.3rem;
}
html[dir="rtl"] .recipient[contenteditable=true]:focus,
html[dir="rtl"] .recipient[contenteditable=true]:hover,
html[dir="rtl"] .recipient[contenteditable=true]:empty:focus {
  margin-left: 0.5rem;
  padding-left: 0.3rem;
}