.contact-list--inactive .contact-list__contact {
  pointer-events: none;
  cursor: inherit;

  &:hover { background-color: transparent; }
}

.contact-list__contact {
  display: flex;
  position: relative;
  margin: auto;
  padding: 0.5em 0;
  text-decoration: none;
  color: var(--color-txt--ink);
  outline: none;

  /* Using after so we can inset bottom border on iOS */
  &::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-bottom: 1px solid var(--color-border);
  }

  &:last-child::after { display: none; }
}

.contact-list__contact--borderless {
  padding: 0.25em 0;

  &::after { display: none; }
}

@media (hover: hover) {
  a.contact-list__contact:hover { background-color: var(--color-bg--secondary-glint); }
}

.contact-list__icon--add {
  filter: var(--colorize-purple);
  background: rgba(0, 0, 0, 0.15) url("/assets/icons/add-26c36be2.svg") center center no-repeat;
}

.contact-list__icon--add--blue {
  filter: var(--colorize-blue);
  background: rgba(0, 0, 0, 0.15) url("/assets/icons/add-26c36be2.svg") center center no-repeat;
}

.contact-list__icon--contacts {
  filter: var(--colorize-subtle);
  background: rgba(0, 0, 0, 0.15) url("/assets/icons/contacts-d3969e87.svg") center center no-repeat;
  opacity: 0.75;
}

.contact-list__icon--edit {
  filter: var(--colorize-purple);
  background: rgba(0, 0, 0, 0.15) url("/assets/icons/pencil-ce3c57fb.svg") center center / 40% no-repeat;
}

.contact-list__icon {
  margin: 0.16em 0.66em 0.16em 0;
  flex-shrink: 0;

  .contact-list__contact:focus-within & {
    box-shadow: 0 0 0 2px var(--color-focus-ring);
  }
}

.contact-list__details {
  flex-grow: 1;
  display: flex;
  justify-content: space-between;

  @media (max-width: 39.95em) { flex-wrap: wrap; }
}

.contact-list__info {
  align-self: center;
  margin: 0.16em 0.33em 0.16em 0;
  word-break: break-all;
  flex-grow: 1;
}

.contact-list__action {
  margin: 0.16em 0;
  align-self: center;
  flex-shrink: 2;

  .contact-list--no-actions & { display: none; }
}

.contact-list__name {
  margin: 0;
  line-height: 1;
  font-size: var(--font-size-medium);
}

.contact-list__meta {
  margin: 0.2rem 0 0;
  font-size: var(--font-size-small);
  color: var(--color-txt--subtle);
  line-height: 1.1;
  word-break: break-word;
}

.filterable_contacts_list {
  .filter__show-when-empty,
  .filter__show-when-active { display: none; }

  &.filter-active {
    .filter__hide-when-active { display: none; }
    .filter__show-when-active { display: inherit; }
  }

  &.filter-results-empty {
    .filter__show-when-empty { display: inherit; }
  }
}