/*
 * Shared-export "Share" offcanvas — copy-on-click URL boxes.
 *
 * Each row is a `<div>` wrapper around a read-only `<input>` and a
 * small absolute-positioned "Copied" flash chip. The wrapper is the
 * click target (cursor: copy) and the input inside is non-interactive
 * visually, just showing the URL.
 */

.copy-input-on-click {
  position: relative;
  cursor: copy;
}

.copy-input-on-click > input {
  /* Reuse Tabler's form-control chrome but keep the cursor on the
     wrapper so clicking anywhere in the row triggers the copy. */
  cursor: copy;
  padding-right: 6rem; /* room for the flash chip / icon hint */
  /* URLs like `.../e/<24-char-slug>.geojson` overflow a narrow
     offcanvas; right-aligning means the format extension (the part
     the viewer cares about) stays visible while the protocol / host
     prefix falls off the left edge. */
  text-align: right;
  direction: ltr; /* keep selection / caret behaviour LTR despite
                     the right-anchored rendering */
}

.copy-input-on-click:hover > input,
.copy-input-on-click:focus-visible > input {
  border-color: var(--tblr-primary);
}

.copy-input-on-click__flash {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  padding: 0.1rem 0.5rem;
  font-size: 0.7rem;
  line-height: 1.2;
  color: var(--tblr-primary-fg);
  background: var(--tblr-primary);
  border-radius: var(--tblr-border-radius-sm);
  pointer-events: none;
}

.copy-input-on-click__flash--error {
  background: var(--tblr-danger);
}