/* Styles for channels.hbs — one card of contact rows.

   The card frame and the label/value pair are the parent's, in `contact.css`:
   `location.hbs` renders those too. What is here is what only a channel row
   has. */

.contact-channel {
  display: flex;
  gap: 16px;
  align-items: center;
}

/* The legacy drew the rule between rows as an `<hr class="divider">` with a 1px
   top border and 16px margins either side. A border on the row itself is the
   same 16 + 1 + 16, without the element. */
.contact-channel + .contact-channel {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--gray-200);
}

/* `flex: none` is the one addition: without it the icon is a shrinkable flex
   item, and a long value on a narrow screen can squeeze it. The colour is what
   the symbols' `currentColor` resolves against. */
.contact-channel-icon {
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--gray-600);
}