.info-icon,
.link-icon {
  width: 1rem;
  height: 1rem;
  color: light-dark(var(--color-gray-400), var(--color-zinc-400));

  &:hover {
    color: light-dark(var(--color-gray-700), var(--color-zinc-300));
  }
}

.info-icon--dialog {
  color: light-dark(var(--color-yellow-600), var(--color-blue-400));

  &:hover {
    color: light-dark(var(--color-yellow-700), var(--color-blue-300));
  }
}

.back-icon {
  width: 1rem;
  height: 1rem;
  color: light-dark(var(--color-blue-600), var(--color-blue-400));
}

.bell-icon {
  width: 1rem;
  height: 1rem;
  color: light-dark(var(--color-gray-600), var(--color-zinc-400));
}

.chevron-down-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: light-dark(var(--color-gray-500), var(--color-zinc-100));
}

.copy-icon {
  width: 1rem;
  height: 1rem;
  color: light-dark(var(--color-white), var(--color-zinc-800));
}

.external-link-icon {
  width: 1rem;
  height: 1rem;
  color: light-dark(var(--color-blue-600), var(--color-blue-400));
}

.document-text-icon {
  width: 0.75rem;
  height: 0.75rem;
  color: light-dark(var(--color-gray-400), var(--color-zinc-400));
}

.chevron-right-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: light-dark(var(--color-gray-400), var(--color-zinc-400));
}

.profile-picture-icon {
  color: light-dark(var(--color-gray-400), var(--color-zinc-600));
}