/* Product artwork sits directly on the surface. Size the drawing, not its button,
   menu row, status indicator or card. Use data-icon-role for new artwork slots. */
:root {
  --app-card-icon: 40px;
  --app-menu-icon: 30px;
}

/* Leading artwork in navigation and compact lists. Keep trailing controls separate. */
:where([data-icon-role="menu"], .ow-nav-row > .ow-nav-art, .rt-tab-icon, .rt-navlink > i,
  :is(nav a, [role="menuitem"]) > i:is(.fas,.far,.fa-solid,.fa-regular):first-child:not(:only-child),
  .rs-tree summary a > i, .rh-task-icon, .tb-item .ic, .ib-nt .ic, .rt-bn .ic,
  .mn-shortcuts a > i, .mn-guide-list li > i, .rs-disclosure > summary > i:first-child,
  .ap-resources .ic, .q-ic, .a-ic, .quick-action-icon, .ow-quick-icon, .la-icon,
  .ow-history-ico, .ow-community-link-icon, .cr-room-mark, .launch-method-icon,
  .sf-next-icon, .ow-acct-ico:not(.acct-mark):has(> svg), .pay-sum-ico, .ow-charge-ico,
  .ow-agreement-opt > svg, .ow-cr-type > svg) {
  --app-slot-size: var(--app-menu-icon);
}

/* Size both the slot and the actual SVG, including the pseudo-element used by
   the custom Font Awesome replacements. Older page-specific rules size each independently. */
:where([data-icon-role="card"], [data-icon-role="menu"],
  :is(nav a, [role="menuitem"]) > i:is(.fas,.far,.fa-solid,.fa-regular):first-child:not(:only-child),
  .ow-nav-row > .ow-nav-art, .rt-tab-icon, .rt-navlink > i, .rs-tree summary a > i,
  .rh-task-icon, .tb-item .ic, .ib-nt .ic, .rt-bn .ic, .mn-shortcuts a > i,
  .mn-guide-list li > i, .rs-disclosure > summary > i:first-child, .ap-resources .ic,
  .q-ic, .a-ic, .quick-action-icon, .ow-quick-icon, .la-icon, .ow-history-ico,
  .ow-community-link-icon, .cr-room-mark, .launch-method-icon, .sf-next-icon,
  .ow-acct-ico:not(.acct-mark):has(> svg), .pay-sum-ico, .ow-charge-ico,
  .ow-agreement-opt > svg, .ow-cr-type > svg, .ow-chooser-card > svg, .ow-track > svg,
  .ow-promo > svg, .ow-tb-art > span:has(> svg), .ow-prescreen-customize > img,
  .lf-review-document-head > img, .pm-art:has(> svg), .pay-done-ico:has(> svg),
  .rh-heading-icon, .rh-contact-icon, .rh-docs-card-art > i, .tb-group-head > i,
  .rt-empty > i:first-child, .tb-no-results > i, .rr-icon, .rr-intro-art > span,
  .rw-ico, .rm-group-icon, .rb-icon, .mi-art, .rn-stat-icon, .rn-stat-art,
  .df-icon, .df-lock-ico, .ow-section-ico, .ow-secthead-ico, .ow-form-ico,
  .ow-mt-art-ico, .ow-bsec-glyph, .ow-cr-glyph, .ow-drop-ico, .pt-drop-ico,
  .ow-help-ico, .ow-tool-ico, .ow-dialog-ico, .ofr-ico, .oi-card-icon,
  .ow-rep-ico, .ow-association-icon, .acct-gap-symbol, .ow-community-icon,
  .sf-icon, .sf-done-icon, .lf-summary-icon, .lf-term-section-art, .bf-group-art,
  .lf-review-art, .lb-benefit-icon, .amenities-section-icon, .lb-est-art,
  .photos-head-art, .photos-empty-icon, .rules-section-icon, .publish-feature-icon,
  .listing-saved-icon, .launch-phone-icon, .hg-photo-icon, .hg-drop-icon,
  .ow-guide-art:has(> svg:only-child), .ow-guide-art:has(> img:only-child),
  .documents-empty-icon, .maintenance-empty-icon, .room-dialog-art, .delete-head-art,
  .property-doc-drop-art, .property-upload-drop-art, .pay-prop-ico,
  .exp-scan-mark, .au-protected-icon, .hg-ico, .es-glyph, .mz-starter-icon,
  .sr-record-icon, .invite-section-art, .panel-heading-art, .setup-heading-art,
  .description-heading-art, .rules-heading-art, .lb-heading-art, .onboard-head-icon,
  .ow-set-card .acct-card-art, .ow-wel-art:has(> svg:only-child)) {
  --rentari-symbol-size: var(--app-slot-size, var(--app-card-icon));
  width: var(--rentari-symbol-size) !important;
  height: var(--rentari-symbol-size) !important;
  min-width: 0 !important;
  flex-shrink: 0;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  object-fit: contain;

  & > :is(svg, i, img):only-child {
    width: var(--rentari-symbol-size) !important;
    height: var(--rentari-symbol-size) !important;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
  &:is(i), & > i:only-child {
    font-size: var(--rentari-symbol-size) !important;
    line-height: 1;
  }
  &:is(i)::before, & > i:only-child::before { vertical-align: top; }
}

/* These introduction panels used a separate painted strip only behind the glyph. */
.pd-support .rh-docs-card-art, [data-tenant-icons] .rr-intro-art { background: none; color: var(--text); }
.rs-tree summary a:has(> i) { align-items: center; }
/* These monochrome drawings previously used white ink on a dark plate. */
:is(.hg-ico, .es-glyph, .ow-history-ico) { color: var(--text) !important; }

/* Legacy features can supply their own class for a decorative slot. Only strip
   its plate when its sole child is a Rentari drawing, never an interactive
   control, a status label, a provider image or the drawing's own SVG paths. */
:where(span, div)[aria-hidden="true"]:is([class$="-icon"], [class$="-ico"], [class$="-glyph"], [class$="-art"]):has(> :is(.fa-solid, .fa-regular, svg.ow-nav-art, img[src*="/ui-symbols/"]):only-child) {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}