/* Links from a form to the records its fields point to (app.js m2oHtml / widget).
   Kept out of style.css, which the theme work edits often. Logical properties: Arabic mirrors. */
.m2o-open {
  position: absolute; inset-inline-end: 4px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 6px; color: var(--accent-ink);
  opacity: .55; transition: opacity .12s var(--ease), background .12s var(--ease);
}
.m2o:not(.ro) .m2o-open { inset-inline-end: 30px; }            /* the clear (×) button sits at the edge */
.m2o.can-open .m2o-text { padding-inline-end: 34px; }
.m2o.can-open:not(.ro) .m2o-text { padding-inline-end: 60px; }
.m2o:hover .m2o-open, .m2o-open:focus-visible { opacity: 1; }
.m2o-open:hover { background: var(--accent-soft); }
.m2o-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
[dir="rtl"] .m2o-open svg { transform: scaleX(-1); }
.ro-link { color: var(--accent-ink); text-decoration: none; font-weight: 550; }
.ro-link:hover { text-decoration: underline; text-underline-offset: 2px; }
/* A many2one in a line grid (a kit's parts): no arrow, the cell is narrow. */
.m2o.in-grid .m2o-open { display: none; }
.m2o.in-grid.can-open .m2o-text { padding-inline-end: 30px; }
.m2o.in-grid.can-open.ro .m2o-text { padding-inline-end: 8px; }