/**
 * The share composer's own styling.
 *
 * Only what shared.css does not already give a Bootstrap modal: the target grid,
 * and the muted treatment for a target that is listed but cannot be used yet.
 */

.share-targets {
  display: grid;
  gap: 0.25rem 1rem;
  /* Two or three columns on a wide dialog, one on a phone, without a media query. */
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.share-target {
  padding: 0.35rem 0.5rem;
  border: 1px solid transparent;
  border-radius: 0.375rem;
}

.share-target:hover {
  background-color: rgba(0, 0, 0, 0.03);
}

/*
 * A target that is listed but not usable — Instagram, until its app review
 * clears. Shown rather than hidden so the reason is visible: "why is Instagram
 * missing" is a worse question than the note that says why.
 */
.share-target-off {
  opacity: 0.6;
}

.share-target-off:hover {
  background-color: transparent;
}

.share-target .form-check-label {
  cursor: pointer;
}

.share-target-off .form-check-label {
  cursor: not-allowed;
}