.contact-groups {
  .modal-container {
    @apply max-w-xl;
  }
}

.contact-groups__all {
  @apply font-medium hover:underline;
}
.contact-groups--header {
  @apply flex items-center gap-2 py-3 px-4 justify-between text-base;

  a {
    @apply font-medium;
  }
}

.contact-groups__new-group {
  @apply text-primary-600 dark:text-primary-400 hover:underline;
}

.contact-group__item, .contact-groups__form {
  @apply flex items-center gap-2 py-3 px-4;
}

.contact-groups__form {
  @apply justify-between;
}

.contact-group__item {
  @apply hover:bg-primary-50 cursor-pointer relative dark:hover:bg-gray-700;
}

.contact-group__item-actions {
  @apply absolute right-2 z-1 lg:hidden flex group-hover:flex items-center gap-2;

  form {
    @apply contents;
  }
}

.group-form-actions, .contact-group__item-actions {
  a, button {
    @apply size-6 rounded-full p-1 hover:bg-gray-200 dark:hover:bg-gray-700;
  }
}

.contact-group__item--active {
  @apply bg-primary-50 text-primary-600 dark:bg-gray-700 dark:text-primary-400;
}

.new-contacts-section {
  @apply space-y-1 divide-y overflow-hidden divide-gray-200 dark:divide-gray-600 dark:bg-gray-700 rounded-lg;
}

.new-contacts-section__item {
  @apply px-2 py-1.5 w-full flex items-center gap-3 transition-all duration-150;
}