VulpesOS/overrides/communications.gaiamobile.org/contacts/style/contacts.css

@import url("root.css");

/* Contact detail header */
.contact-header {
  margin: -1.4rem -2rem 1rem;
}

/* Fav star in header */
.favorite-indicator {
  display: none;

  background: image-set(url("/contacts/style/gphx/bitmap/default/vw-header/icons/fav-star.png") 1x, url("/contacts/style/gphx/bitmap/default/vw-header/icons/fav-star@1.5x.png") 1.5x, url("/contacts/style/gphx/bitmap/default/vw-header/icons/fav-star@2x.png") 2x, url("/contacts/style/gphx/bitmap/default/vw-header/icons/fav-star@2.25x.png") 2.25x) no-repeat center / 3rem;
  padding: 0 1rem;
}

.favorite .favorite-indicator {
  display: unset;
}

section[role="region"] > gaia-header .icon.icon-edit-contact {
  background-image: image-set(url("images/edit-contact.png") 1x, url("images/edit-contact@1.5x.png") 1.5x, url("images/edit-contact@2x.png") 2x, url("images/edit-contact@2.25x.png") 2.25x);
}

.contact-header img {
  width: 100%;
  height: 7.6rem;
  background: transparent no-repeat center 30%;
  background-size: 100% auto;
}

.view-contacts-list .block-list {
  padding-inline-end: 1rem;
}

.view-contacts-list .view-body-inner {
  padding-inline-start: 0;
}

/* Contact detail main section */

.view-contact-profile .view-body {
  overflow-x: hidden;
  overflow-y: auto;
  will-change: scroll-position;

  background: #fff;
}

.view-contact-profile .view-body-inner {
  will-change: transform;
}

.view-contact-profile #cover-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff no-repeat;
  background-size: 100% auto;
  transform: translateY(0);
  will-change: transform;
}

.view-contact-profile #cover-img.translated {
  transform: translateY(-7rem);
}

.view-contact-profile #cover-img.up {
  transition: transform 0.25s ease-out;
}

#contact-detail-inner {
  padding-bottom: 1rem;
  padding-top: 1.4rem;
}

.fb-contact:not(.no-photo):before {
  content: "";
  width: 2rem;
  height: 2rem;
  position: absolute;
  top: -3rem;
  background-repeat: no-repeat;
  background-size: cover;
}

.view-contact-profile .view-body-inner {
  position: relative;
  padding: 0 1.5rem;
  background: #fff;
  overflow: visible;
  width: 100%;
  min-height: calc(100% - 8rem);
  box-sizing: border-box;
  transform: translateY(0);
}

.view-contact-profile .view-body-inner.translated {
  transform: translateY(8rem);
}

.view-contact-profile .view-body-inner.up {
  transition: transform var(--transition-duration) ease-out;
}

.view-contact-profile .view-body-inner hr {
  margin-top: 0;
}

.view-contact-profile .view-body-inner:not(.no-photo):after {
  background: image-set(url("images/shadow_1px.png") 1x, url("images/shadow_1px@1.5x.png") 1.5x, url("images/shadow_1px@2x.png") 2x, url("images/shadow_1px@2.25x.png") 2.25x) repeat-x bottom / auto 0.8rem;
  content: "";
  display: block;
  height: 0.8rem;
  top: -0.8rem;
  left: 0;
  position: absolute;
  width: 100%;
}

.view-contact-profile .view-body-inner.no-photo {
  min-height: 100%;
}

.view-contact-profile .view-body-inner .comment-notes {
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.3em;
  white-space: pre-wrap;
}

#contactsManagement li:first-child {
  margin-top: 1rem;
}

#contact-detail h1 {
  font-size: 1.6rem;
  line-height: 1.8em;
  font-weight: 400;
  margin: 0 1.5rem 1rem;
  color: #333;
  word-wrap: break-word;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#contact-detail .social-actions button {
  margin-bottom: 1rem;
}

.calls-disabled li[data-phone] button.call-action {
  pointer-events: none;
}

#contact-detail .duplicate-actions button {
  margin-bottom: 1rem;
}

.block-item > * {
  pointer-events: none;
}

.view:not(.current) {
  visibility: hidden;
}

/* Edit contact section */
.view-edit-contact,
.view-edit-contact form li {
  background: transparent;
}

.view-edit-contact form li {
  padding-right: 1rem;
  padding-left: 1rem;
}

.view-edit-contact form li.closed {
  height: 4.5rem;
  background-color: transparent;
  border: 0;
}
.view-edit-contact form li.closed > section {
  display: none;
}

.item.first {
  padding: 1rem 1rem 0 1rem;
  /* We enable overflow wrt bug 1094709 */
  overflow: inherit;
}

/* Bug 1094709. We can now click on rightmost part and the reset will work */
#contact-form div.with-overflow {
  overflow: inherit;
}

#contact-form div.with-overflow button[type="reset"] {
  width: 5rem;     /* The affordance is increased by 1 rem */
  offset-inline-end: calc(-0.5rem + -0.3rem);
}

#contact-form div.with-overflow input {
  width: calc(100% - 10rem);
}

#contact-form div.with-overflow input[name="org"] {
  width: 100%;
}

#contact-form input::-moz-placeholder,
#contact-form textarea::-moz-placeholder {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* this is needed because it overflows the photo container */
div.with-overflow > p.input-container {
  pointer-events: none;
}

div.with-overflow > p.input-container > input {
  pointer-events: auto;
}

.view-edit-contact .tail-actions {
  margin: 4rem 0 1rem 0;
  width: 100%;
  text-align: center;
}

.view-edit-contact form li > section {
  padding: 0;
  border: none;
}

.view-edit-contact form li > section.first {
  margin: 0;
}

.view-edit-contact form li > section{
  position: relative;
}

.view-edit-contact form li > section div {
  position: relative;
}

.view-edit-contact form li fieldset {
  /* li already has a 0.5 padding */
  margin-top: 1rem;
  overflow: visible;
  width: calc(100% - 5rem);
}

.two_fields {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.two_fields > :first-child {
  margin-inline-end: 1rem;
  width: 50%;
}

.two_fields > :nth-child(2) {
  width: 50%;
}

.view-edit-contact .fillflow-row-action {
  width: 4rem;
  height: 4rem;
}

.view-edit-contact .fillflow-row-action {
  width: 4rem;
  height: 4rem;
}

#contacts-form-notes .setbox {
  width: calc(100% - 5rem);
}

hr {
  background-color: #BCBCBC;
  border: 0;
  height: 0.1rem;
}

/* Overriding Input areas BB */
form p input + button[type="reset"].hide,
form p textarea + button[type="reset"].hide {
  display: block !important;
  opacity: 0;
  pointer-events: none;
}

/* Favorites handling */
#group-favorites abbr {
  background: image-set(url("gphx/bitmap/default/lists/favorites.png") 1x, url("gphx/bitmap/default/lists/favorites@1.5x.png") 1.5x, url("gphx/bitmap/default/lists/favorites@2x.png") 2x, url("gphx/bitmap/default/lists/favorites@2.25x.png") 2.25x);
  display: block;
  background-size: 100% auto;
  width: 2rem;
  height: 2rem;
}

/* "import contacts" button and throbber */
.importContacts {
  font-size: 1.6rem;
  margin-top: 5rem;
  margin-left: 1.5rem;      /* BiDi-proof */
  width: calc(100% - 6rem); /* 4.5rem = view-jumper width */
}

.importContacts button {
  height: 2rem;
  line-height: 2rem;
  font-weight: bold;
  font-size: 1.4rem;
}

.importContacts span,
.importContacts small {
  display: block;
}

/* Social network markers */
.icon-social {
  background-size: cover;
  display: inline-block;
  vertical-align: middle;
  text-indent: 100%;
  overflow: hidden;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  margin-top: -0.2rem;
  margin-inline-end: 1rem;
}

.icon-social.icon-fb,
.fb-contact:not(.no-photo):before {
  background-image: image-set(url("images/f_logo.png") 1x, url("images/f_logo@1.5x.png") 1.5x, url("images/f_logo@2x.png") 2x, url("images/f_logo@2.25x.png") 2.25x) !important;
}

.icon-social.notorg {
  margin-left: 0 !important;
}

#contact-detail p > strong,
#contact-detail bdi > strong,
.action-block b,
.comment-notes {
  font-size: 1.6rem;
  font-weight: normal;
  padding: 0 1.5rem 1.5rem;
  display: block;
}

/* MARK AS Facebook */

.facebook {
  border-color: #c8c8c8;
  opacity: 0.85;
}

.facebook fieldset {
  margin-inline-start: 4rem;
}

.facebook fieldset,
.facebook legend,
.facebook input {
  background-color: transparent;
  color: #ccc;
  pointer-events: none;
}

.facebook legend.action:after {
  border-top-color: #666;
}

.with-photo {
  background: none;
}

.with-photo.removed img {
  pointer-events: none;
}

.with-photo p {
  display: none;
}

.view-edit-contact .with-photo .fillflow-row-action {
  right: 0;
  width: 5rem;
  z-index: 10;
  border-radius: 0;
  background: none;
}

/* SETTINGS */

#import-settings ul {
  padding: 0;
}

/**
 * 1. Hide label text.
 *    !important required to override high specificity of scoped stylesheets.
 *    When `::content` selector lands, we won't need this any more.
 */
gaia-header [data-icon] {
  font-size: 0 !important; /* 1 */
}

#view-settings {
  z-index: 101;
}

#ice-settings .view-body-inner,
#view-settings .view-body-inner {
  padding: 0;
}

#view-settings .view-body-inner,
#import-settings .view-body-inner,
#view-contact-form .view-body-inner,
#ice-settings .view-body-inner {
  background: #f4f4f4;
}

#view-contact-form #thumbnail-photo {
  background-color: transparent;
  border-radius: 7rem;
}

#view-contact-form #contact-form hr {
  margin-left: 4rem;
  background-color: #e7e7e7;
}

/* Order switch */
#view-settings [data-type="list"] li#settingsOrder {
  display: flex;
  justify-content: space-between;
}

/* Cutom FB item */
#view-settings [data-type="list"] .fb-item {
  border-bottom: none;
  display: flex;
  flex-direction: column;
}

#view-settings [data-type="list"] .fb-item p {
  padding-inline-start: 4.2rem;
  font-size: 1.4rem;
}

#view-settings [data-type="list"] .fb-item p span {
  display: block;
  padding-bottom: 0.4rem;
}

#view-settings [data-type="list"] .fb-item {
  background-image: image-set(url("/contacts/style/images/f_logo.png") 1x, url("/contacts/style/images/f_logo@1.5x.png") 1.5x, url("/contacts/style/images/f_logo@2x.png") 2x, url("/contacts/style/images/f_logo@2.25x.png") 2.25x);
  background-repeat: no-repeat;
  background-size: 3rem;
}
html[dir="ltr"] #view-settings [data-type="list"] .fb-item { background-position: 0 calc(50% + 0.5rem); }
html[dir="rtl"] #view-settings [data-type="list"] .fb-item { background-position: 100% calc(50% + 0.5rem); }

#view-settings [data-type="list"] .fb-item p:first-of-type {
  height: 3rem;
  font-size: 1.9rem;
  line-height: 3rem;
}

#view-settings [data-type="list"] .fb-item aside {
  width: 6.5rem;
  height: 5rem;
  margin: 0;
  pointer-events: none;
  position: absolute;
  top: 1rem;
  offset-inline-end: 0;
}

#view-settings [data-type="list"] .fb-item aside label {
  position: absolute;
  offset-inline-end: 0;
}

#view-settings [data-type="list"] .fb-item[aria-disabled="true"] {
  pointer-events: none;
}

#view-settings [data-type="list"] .fb-item[aria-disabled="true"]:after {
  display: none;
}

#view-settings [data-type="list"] .fb-item[aria-disabled="true"] aside {
  opacity: 0.3;
}

#fb-update-option {
  height: auto;
  margin: 1rem 0;
}

/* We are going to update the panels with conditional css */
#import-settings.export #import-options{
  display: none;
}

#import-settings.import #export-options{
  display: none;
}

#import-settings [data-type="list"] li {
  border-bottom: none;
  height: auto;
}

#import-settings [data-type="list"] li .error-message {
  display: none;
}

#import-settings [data-type="list"] li.error .error-message {
  display: block;
  line-height: 2rem;
  margin-top: -1.5rem;
  margin-right: 1.5rem;
  color: #5B5B5B;
  font-size: 1.5rem;
  height: auto;
  white-space: normal;
}

/* Extending BB styles */

#import-settings [data-type="list"] li aside {
  pointer-events: auto;
}

#import-settings [data-type="list"] li aside label {
  height: 100%;
  width: 6.5rem;
}

/* Extending BB buttons Icons at left side*/
#view-settings [data-type="list"] li button.icon {
  padding: 1.2rem 1.3rem;
  padding-inline-start: 4rem;
}

#view-settings [data-type="list"] li button.icon:before {
  offset-inline-start: 0.5rem;
  offset-inline-end: auto;
}

#view-settings [data-type="list"] li button.icon[disabled="disabled"]:before {
  opacity: 0.2;
}

#import-settings [data-type="list"] li button.icon {
  padding: 1rem 1.3rem;
  padding-inline-start: 4rem;
}

#import-settings [data-type="list"] li button.icon:before {
  offset-inline-start: 0.5rem;
  offset-inline-end: auto;
}

#import-settings [data-type="list"] li button.icon[disabled="disabled"]:before {
  opacity: 0.2;
}

/* Extending icon types for view settings & import-settings*/
#view-settings [data-type="list"] li button.icon-import:before {
  background-image: image-set(url("/contacts/style/images/import_contacts.png") 1x, url("/contacts/style/images/import_contacts@1.5x.png") 1.5x, url("/contacts/style/images/import_contacts@2x.png") 2x, url("/contacts/style/images/import_contacts@2.25x.png") 2.25x);
}
#view-settings [data-type="list"] li button.icon-export:before {
  background-image: image-set(url("/contacts/style/images/export_contacts.png") 1x, url("/contacts/style/images/export_contacts@1.5x.png") 1.5x, url("/contacts/style/images/export_contacts@2x.png") 2x, url("/contacts/style/images/export_contacts@2.25x.png") 2.25x);
}

#import-settings [data-type="list"] li button.icon:before {
  background-size: 3rem;
}

#import-settings [data-type="list"] li button.icon-sim:before {
  background-image: image-set(url("/contacts/style/images/import_SIM.png") 1x, url("/contacts/style/images/import_SIM@1.5x.png") 1.5x, url("/contacts/style/images/import_SIM@2x.png") 2x, url("/contacts/style/images/import_SIM@2.25x.png") 2.25x);
}

#import-settings [data-type="list"] li button.icon-sd:before {
  background-image: image-set(url("/contacts/style/images/import_sd.png") 1x, url("/contacts/style/images/import_sd@1.5x.png") 1.5x, url("/contacts/style/images/import_sd@2x.png") 2x, url("/contacts/style/images/import_sd@2.25x.png") 2.25x);
}

#import-settings [data-type="list"] li button.icon-gmail:before {
  background-image: image-set(url("/contacts/style/images/gmail_icon.png") 1x, url("/contacts/style/images/gmail_icon@1.5x.png") 1.5x, url("/contacts/style/images/gmail_icon@2x.png") 2x, url("/contacts/style/images/gmail_icon@2.25x.png") 2.25x);
}

#import-settings [data-type="list"] li button.icon-live:before {
  background-image: image-set(url("/contacts/style/images/outlook_icon.png") 1x, url("/contacts/style/images/outlook_icon@1.5x.png") 1.5x, url("/contacts/style/images/outlook_icon@2x.png") 2x, url("/contacts/style/images/outlook_icon@2.25x.png") 2.25x);
}

#import-settings [data-type="list"] li button.icon-bluetooth:before {
  background-image: image-set(url("/contacts/style/images/bluetooth_icon.png") 1x, url("/contacts/style/images/bluetooth_icon@1.5x.png") 1.5x, url("/contacts/style/images/bluetooth_icon@2x.png") 2x, url("/contacts/style/images/bluetooth_icon@2.25x.png") 2.25x);
}

#ice-settings .ice-contacts-switch {
  display: flex;
  justify-content: space-between;
}
#ice-settings .ice-contacts-switch aside {
  align-self: flex-end;
}

#ice-settings li button,
#view-settings li button {
  line-height: 1.9rem;
}

#view-settings button p {
  display: block;
  font-size: 1.3rem;
  line-height: 1.9rem;
  color: #858585;
  padding: 0;
}

#ice-settings p.description {
  font-size: 1.6rem;
  padding: 1.5rem;
}

#view-settings button p span {
  font-size: 1.3rem;
}

#view-settings button p time {
  font-size: 1.3rem;
  display: inline-block;
  margin: 0 0 0 0.5rem;
}

#import-settings li button {
  height: 5.5rem;
  line-height: 1.9rem;
}

#import-settings button p {
  display: block;
  font-size: 1.3rem;
  line-height: 1.9rem;
  color: #858585;
  margin: 0;
  padding: 0;
}

#import-settings button p span {
  font-size: 1.3rem;
}

#import-settings button p time {
  font-size: 1.3rem;
  display: inline-block;
  margin: 0 0 0 0.5rem;
}

/* Error message */
#view-settings .view-body-inner .fb-error {
  color: #D1323F;
  padding: 0;
  font-size: 1.4rem;
  line-height: 1.2em;
  white-space: normal;
}

.result {
  display: block;
  min-height: 0 !important;
  text-align: center;
  height: 5rem;
  line-height: 5rem;
}

/* No Contacts */

#no-contacts {
  background: #FFF image-set(url("/contacts/style/images/contact_big_icon.png") 1x, url("/contacts/style/images/contact_big_icon@1.5x.png") 1.5x, url("/contacts/style/images/contact_big_icon@2x.png") 2x, url("/contacts/style/images/contact_big_icon@2.25x.png") 2.25x) no-repeat center center / 15.3rem;
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: 11;
  color: #000;
  text-align: initial;
}

#no-contacts .info {
  border-top: 0.1rem solid rgba(96, 96, 96, 0.5);
  color: #606060;
  font-size: 2rem;
  font-weight: 300;
  margin: 16rem 2rem 0;
  padding: 1rem;
}

#no-contacts p {
  margin-bottom: 1rem;
}

#no-contacts p.small {
  font-size: 1.6rem;
}

#statusMsg {
  position: fixed;
  transition: transform .5s ease;
  transform: translateY(8rem);
  pointer-events: none;
}

#statusMsg.visible {
  transform: translateY(0);
  z-index: 1001;
}

#sources {
  margin-top: 1rem;
}

#sources > li,
#contactsManagement > li {
  border-bottom: none;
  height: auto;
}

#groups-container-box {
  width: 100%;
  overflow: hidden;
}

#groups-container {
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
}

/* Bug 967274 - Background doesn't scroll with the contacts causing
 * expensive over-invalidation
 */
#groups-container-background {
  background-color: #fff;
}

.datetime {
  /* pass the events from <span> to <input> */
  pointer-events: none;
  position: absolute;
  top: 0;
  offset-inline-start: 1.5rem;
  offset-inline-end: 2rem;
  line-height: 4rem;
  font-size: 1.6rem;
  font-weight: normal;
  color: #333;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.datetime + input[type="date"] {
  font-size: 0;
}

.placeholder {
  color: #858585;
}


.hidden-input {
  /* visibility: hidden; will avoid events to reach the <input> */
  opacity: 0;
}

form[role="dialog"][data-type="edit"] gaia-header {
  transform: translateY(-5rem);
}

form[role="dialog"][data-type="edit"] > menu {
  transform: translateY(110%);
}

form[role="dialog"][data-type="edit"].contacts-select.in-edit-mode gaia-header,
form[role="dialog"][data-type="edit"].contacts-select.in-edit-mode > menu {
  transition: 0s;
}

form[role="dialog"][data-type="edit"].contacts-select:not(.insearchmode) > menu {
  transform: translateY(0);
}

form[role="dialog"][data-type="edit"].contacts-select:not(.insearchmode) gaia-header {
  transform: translateY(0);
}

[data-type="list"] .contact-item > aside > span:before {
  content: attr(data-group);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: #fff;
  font-size: 2.2rem;
  font-style: italic;
  line-height: 5rem;
  text-align: center;
}

[data-type="list"] .contact-item > aside > span {
  position: relative;
  display: none;
}

/* Photo by default redefines the background property */
[data-type="list"] .contact-item > aside > span[data-group] {
  background: image-set(url("images/Imagery.png") 1x, url("images/Imagery@1.5x.png") 1.5x, url("images/Imagery@2x.png") 2x, url("images/Imagery@2.25x.png") 2.25x) no-repeat 50% 50% / 7rem auto;
}

/* Photo by default is displayed when it is visited by image loader component */
[data-type="list"] .contact-item[data-visited="true"] > aside > span {
  display: block;
}

#view-contacts-list [data-type="list"] aside span[data-type=img] {
  image-rendering: auto;
}

/* BiDi note: the scrollbar is always on the right edge */
html[dir] nav[data-type="scrollbar"] {
  direction: ltr;
  offset-inline-end: unset;
  right: 0;
}

html[dir] nav[data-type="scrollbar"] p {
  offset-inline-end: unset;
  right: 10rem;
}

nav[data-type="scrollbar"] li .pack-icon-ice {
  width: 1.2rem;
  height: 1.2rem;
  font-size: 0;
  vertical-align: middle;
  background: transparent no-repeat center center / 1.2rem;
  background-image: image-set(url("/contacts/style/images/ice_small.png") 1x, url("/contacts/style/images/ice_small@1.5x.png") 1.5x, url("/contacts/style/images/ice_small@2x.png") 2x, url("/contacts/style/images/ice_small@2.25x.png") 2.25x);
}

fieldset legend {
  font-size: 1.6rem;
  background-color: #f2f2f2;
  border: 1px solid #c7c7c7;
  color: #363636;
}

form[role="combobox"] span[data-field="type"] {
  color: rgb(24,191,239);
}

.field-template {
  display: flex;
  background-color: #fff;
  border: 1px solid #e7e7e7;
}
html[dir="ltr"] .field-template { border-radius: 15px 0 0; }
html[dir="rtl"] .field-template { border-radius: 0 15px 0 0; }

/* Add separation between templates */
.field-template + .field-template {
  margin-top: 1rem;
}

.img-delete-button {
  padding: 0;
  margin: 0.2rem 1rem 2rem;
  margin-inline-start: 0.2rem;
  width: 2.8rem;
  color: #fff;
  background: image-set(url("images/icon_remove.png") 1x, url("images/icon_remove@1.5x.png") 1.5x, url("images/icon_remove@2x.png") 2x, url("images/icon_remove@2.25x.png") 2.25x);
  background-repeat: no-repeat;
  background-size: 3rem auto;
  background-color: transparent;
  border: 0;
  -moz-user-select: none;
}
html[dir="ltr"] .img-delete-button { background-position: left top; }
html[dir="rtl"] .img-delete-button { background-position: right top; }

.img-delete-button:active {
  background: image-set(url("images/icon_remove.png") 1x, url("images/icon_remove@1.5x.png") 1.5x, url("images/icon_remove@2x.png") 2x, url("images/icon_remove@2.25x.png") 2.25x) no-repeat scroll 0 0 / 3rem auto transparent;
}

.view-edit-contact form li > section > div {
  display: block;
}

.view-edit-contact form li > section > div.empty {
  display: none;
}

.action-add {
  background: transparent;
  border: 0;
  font-style: normal;
  font-size: 1.8rem;
  color: #5f5f5f;
  height: 5rem;
  vertical-align: middle;
  padding-inline-start: 4rem;
  margin: 0;
}

.action-add[disabled] {
  background: transparent;
}

.note-template dl {
  margin-top: 1rem;
}

.note-template input {
  height: 9rem;
  border: 1px solid #c7c7c7;
}

.action-delete {
  width: 29rem;
  height: 4rem;
  background-color: #e51e1e;
  font-size: 1.6rem;
  font-style: italic;
  font-weight: unset;
}

#groups-list {
  margin-top: 1rem;
}

#group-favorites {
  padding-top: 2rem;
}

.tagItem,
.textfield.tagItem {
  margin: 1rem;
  width: calc(100% - 2rem);
}

/* We need this rule because these views are going to be in the bottom */
/* This will avoid a repainting and a flash to the user when we fade-out */
/* particulary in the flow: settings -> back() -> contact list */
#view-settings.fade-in, #view-contact-form.fade-in {
  transform: translateY(0);
}

/* Animations over the contact form when adding new group fields */
.field-template.inserted {
  opacity: 0;
}

.field-template.inserted.displayed {
  animation: add-field 0.25s ease-in-out 1 forwards;
}

.field-template.inserted .first-row,
.field-template.inserted .second-row,
.field-template.inserted .third-row {
  opacity: 0;
  animation: add-field 0.20s linear 1 forwards;
}

@keyframes add-field {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.field-template.inserted.displayed .first-row {
  animation-delay: 0.15s;
}

.field-template.inserted.displayed .second-row {
  animation-delay: 0.25s;
}

.field-template.inserted.displayed .third-row {
  animation-delay: 0.35s;
}

/* Avoid the activate state on '+ Add xx' buttons */
li button[data-field-type]:active {
  background: transparent;
  color: #5F5F5F;
}

/* Ellipsis fix for contact lists */
/* we hijack the overflow and text-overflow
 * of the shared style to make the ellipsis display always at the end
 * (ie right for LTR string and left for RTL string)
 * while keeping alignment of the current system-wide language */
[data-type="list"] li.contact-item bdi,
li button.icon-email bdi {
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  max-width: 100%;
}

/* TODO: Remove this workaround once bug 883884 fixed */
.ellipsis-dir-fix {
  display: block;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* Overwrite input-areas bb */
#custom-tag-reset {
  offset-inline-end: 1rem;
}

#multiple-select-view aside {
  border-bottom: 0.1rem solid #FFFFFF;
  margin-right: 0;
  padding-right: 1.5rem;
}

/* Force align with system because dir="auto" will ignore text-align: start */
html[dir="ltr"] .force-align[dir="auto"] { text-align: left; }
html[dir="rtl"] .force-align[dir="auto"] { text-align: right; }