/* Shared UI directions. Reuse the site's licensed Phosphor SVG silhouettes.
   A mask inherits the text color and never asks the OS to render a glyph. */
.direction-icon {
  --direction-icon-mask: url('/assets/product-screens/icons/phosphor/bold/arrow-right.svg');
  display: inline-block;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  vertical-align: -.18em;
  background-color: currentColor;
  -webkit-mask: var(--direction-icon-mask) center / contain no-repeat;
  mask: var(--direction-icon-mask) center / contain no-repeat;
  pointer-events: none;
}
.direction-icon--left, .direction-icon--back { --direction-icon-mask: url('/assets/product-screens/icons/phosphor/bold/arrow-left.svg'); }
.direction-icon--down { transform: rotate(90deg); }
.direction-icon--up { transform: rotate(-90deg); }
.direction-icon--up-right { transform: rotate(-45deg); }
.direction-icon--download { --direction-icon-mask: url('/assets/catalog-library/icons/download-simple.svg'); }
.direction-icon--expand { --direction-icon-mask: url('/assets/product-screens/icons/phosphor/regular/frame-corners.svg'); }
/* Only logical navigation mirrors. Physical rails/viewers, external links,
   downloads and page anchors keep their own documented directions. */
.direction-icon--forward:dir(rtl), .direction-icon--back:dir(rtl) { transform: scaleX(-1); }
.sample-viewer-controls .direction-icon,
.project-lightbox-stage .direction-icon,
.ac-viewer-controls .direction-icon { width: 22px; height: 22px; }
.cmw-materials-hint .direction-icon, .ss-table-hint .direction-icon { width: 16px; height: 16px; }
.blog-back-link { display: inline-flex; align-items: center; gap: 7px; }

/* Pseudo-element directions share the same vector source and dimensions. */
.blog-article-sidebar nav a::after,
.product-page-hero figcaption a::after,
[data-project-lightbox-actions] a[data-lightbox-action="details"]::after {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-inline-start: 7px;
  vertical-align: -.18em;
  background-color: currentColor;
  -webkit-mask: url('/assets/product-screens/icons/phosphor/bold/arrow-right.svg') center / contain no-repeat;
  mask: url('/assets/product-screens/icons/phosphor/bold/arrow-right.svg') center / contain no-repeat;
}
.blog-article-sidebar nav a::after, .product-page-hero figcaption a::after { transform: rotate(-45deg); }
.product-page-hero figcaption a::after { margin-inline-start: 0; }
.blog-article-resources nav a::after { content: none; }
[data-project-lightbox-actions] a[data-lightbox-action="details"]:dir(rtl)::after { transform: scaleX(-1); }