.contacts-list {
  /* display */
  /* positioning */
  /* box-model */
  width: 100%;
  border: 1px solid var(--theme-secondary-color);
  border-top: none;

  /* typography */
  color: var(--dark-text);

  /* manipulation */
  /* misc */
  list-style: none;
}

.contacts-list > li .header-icon {
  /* display */
  /* positioning */
  /* box-model */
  background-color: var(--theme-secondary-color);
  height: 1.75em;
  width: 1.75em;

  /* typography */
  /* manipulation */
  /* misc */
}

.contacts-list > li > h2 {
  /* display */
  display: flex;
  flex-flow: row nowrap;
  border-top: 1px solid var(--theme-secondary-color);
  align-items: center;

  /* positioning */
  /* box-model */
  /* typography */
  color: var(--theme-secondary-color);
  line-height: 1em;

  color: var(--light-text);
  background-color: var(--theme-secondary-color);

  /* manipulation */
  /* misc */
}

.contacts-list .empty-message {
  margin: auto;
  width: fit-content;
  padding: 0.5em;
}

.contacts-list h2 button,
.contacts-list .contact-header-container button {
  align-self: stretch;
  display: flex;
  padding: 0.5em;
  width: 1.5rem;
}

.contacts-list h2 button:focus-visible,
.contacts-list .contact-header-container button:focus-visible {
  background-color: var(--theme-primary-color);
  outline: 1px solid var(--theme-primary-color);
}

.contacts-list h2 button:first-of-type,
.contacts-list .contact-header-container button:first-of-type {
  margin-left: auto;
}

.contacts-list > li > ul {
  list-style: none;
}

.contacts-list > li > ul > li {
  border-top: 1px solid var(--theme-secondary-color);
}

.contacts-list > li > ul > li > a {
  color: inherit;
  text-decoration: none;
}

.contacts-list > li > ul > li,
.contacts-list > li > h2 > .header-text,
.contacts-list > li > h2 > .header-btn {
  padding: 0.5rem;
}

.contact-header-container {
  display: flex;
  align-items: center;
  margin: -0.5rem;
  font: inherit;
}

.contact-header-container input[type="checkbox"],
.contact-header-container input[type="radio"] {
  /* visibility: hidden; */
  transform: scale(0);
  max-width: 0;
  min-width: 0;
}

.contact-header-container input:checked ~ */* ,
.contact-header-container li:has(input:checked) */ {
  background-color: hsl(var(--theme-hue) 50% 90%);
  font-weight: 700;
}

.contact-header-container input:focus ~ * {
  background-color: var(--theme-tertiary-color);
}

.contact-header-container .contact-icon {
  line-height: 1.3333em;
  font-size: 1.5em;
  text-align: center;
  /* padding-inline: 0.35rem; */
  width: 1.73em;
}

.contact-header-container .contact-icon .pfp {
  padding: 0;
  max-width: 100%;
  margin-block: -0.115em;
  transform: scale(0.7);
}

.contact-header-container .contact-name {
  padding: 0.5em;
  line-height: 1.25em;
  flex: 1 0 auto;
}