/* ==========================================================================
   CLASSIC XP ICON RENDERING
   Sizing / shadow rules for the SVG icons produced by js/xpIcons.js
   ========================================================================== */

.xp-ico {
  display: block;
  width: 100%;
  height: 100%;
  /* Keeps the artwork crisp and stops the browser smoothing gradients oddly */
  shape-rendering: geometricPrecision;
  pointer-events: none;
}

/* ---------- Desktop icons (48px, the classic XP size) ---------- */
.desktop-icon .icon-img-wrapper {
  width: 48px;
  height: 48px;
  font-size: 0;              /* kill leftover FontAwesome sizing */
  margin-bottom: 6px;
  /* XP desktop icons carry a soft drop shadow so they read on any wallpaper */
  filter: drop-shadow(1px 2px 2px rgba(0, 0, 0, 0.55));
}

.desktop-icon:active .icon-img-wrapper {
  filter: drop-shadow(1px 2px 2px rgba(0, 0, 0, 0.55)) brightness(0.88);
}

/* Selected state: XP tinted the icon blue rather than just boxing it */
.desktop-icon.selected .icon-img-wrapper .xp-ico {
  filter: drop-shadow(0 0 1px rgba(11, 93, 209, 0.9));
  opacity: 0.85;
}

/* ---------- Window titlebar (16px) ---------- */
.titlebar-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  font-size: 0;
}

/* ---------- Taskbar buttons (16px) ---------- */
.taskbar-tab .taskbar-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  font-size: 0;
}

/* ---------- Start menu ---------- */
/* Left (pinned) column used the larger 24px icons in real XP */
.start-left-panel .item-icon {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  font-size: 0;
}

/* Right column icons are slightly smaller */
.start-right-panel .item-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  font-size: 0;
}

/* The old rule turned FontAwesome glyphs white on hover — not needed for SVG,
   and it must not bleed onto the artwork. */
.start-item:hover .item-icon .xp-ico {
  filter: none;
}

/* ---------- Inline icon helper (used inside app windows) ---------- */
.xp-inline-ico {
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: -3px;
  margin-right: 4px;
}

.xp-inline-ico.lg {
  width: 32px;
  height: 32px;
  vertical-align: -8px;
}