/* VERIFIED PIXEL ICONS. MOTION-owned (see EXTENSION-SPEC.md section 7, js/pixel-icons.js).

   A 20 x 20 pixel sheet rendered at --px-size (default the --icon token, 20px; data-size="40"
   doubles every cell). The glyph sits inside the sheet (standard 13 x 13 cells from cell 3),
   so screens can trim the layout box with negative margins (--icon-trim) without clipping.
   Colour is currentColor; the dim and faint tones are opacity steps of the same ink.
   No html / body / :root dependencies: works in the popup and inside a shadow root. */

.px-icon {
  --px-size: var(--icon, 20px);
  --px-dim: .4;
  --px-faint: .16;
  display: inline-block;
  flex: none;
  box-sizing: content-box;
  width: var(--px-size);
  height: var(--px-size);
  line-height: 0;
  vertical-align: middle;
  color: inherit;
}

.px-icon[data-size='40'] { --px-size: 40px; }

.px-icon > .px-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  fill: currentColor;
  shape-rendering: crispEdges;
}

.px-icon .px-t1 { fill-opacity: 1; }
.px-icon .px-t2 { fill-opacity: var(--px-dim); }
.px-icon .px-t3 { fill-opacity: var(--px-faint); }