/* ==========================================================================
   MATRIX RUNWAY — GLOBAL TOOLS ICON DESIGN SYSTEM (global-tool-icon.css)
   Path: /components/tools-icons/global-tool-icon.css
   
   PURPOSE:
   Standardized, accessible CSS icon stylesheet mapping each of the 20 online
   tools to its single dedicated class name (.icon-<tool-name>).
   ========================================================================== */

/* ── 1. Base Icon Styles & Sizing Tokens ── */
.icon {
  display: inline-block;
  background-color: currentColor;
  pointer-events: none;
  flex-shrink: 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  width: 20px;
  height: 20px;
  vertical-align: middle;
}

.icon-sm { width: 16px; height: 16px; }
.icon-md { width: 24px; height: 24px; }
.icon-lg { width: 32px; height: 32px; }

/* ── 2. The 20 Standard Tool Icons (Single Class Name Each) ── */

/* Text Tools */
.icon-word-counter {
  -webkit-mask-image: url('/components/tools-icons/word-counter.svg');
  mask-image: url('/components/tools-icons/word-counter.svg');
}

.icon-case-converter {
  -webkit-mask-image: url('/components/tools-icons/case-converter.svg');
  mask-image: url('/components/tools-icons/case-converter.svg');
}

/* Image Tools */
.icon-image-compressor {
  -webkit-mask-image: url('/components/tools-icons/image-compressor.svg');
  mask-image: url('/components/tools-icons/image-compressor.svg');
}

.icon-image-cropper {
  -webkit-mask-image: url('/components/tools-icons/image-cropper.svg');
  mask-image: url('/components/tools-icons/image-cropper.svg');
}

/* PDF Tools */
.icon-pdf-merger {
  -webkit-mask-image: url('/components/tools-icons/pdf-merger.svg');
  mask-image: url('/components/tools-icons/pdf-merger.svg');
}

.icon-pdf-splitter {
  -webkit-mask-image: url('/components/tools-icons/pdf-splitter.svg');
  mask-image: url('/components/tools-icons/pdf-splitter.svg');
}

.icon-image-to-pdf {
  -webkit-mask-image: url('/components/tools-icons/image-to-pdf.svg');
  mask-image: url('/components/tools-icons/image-to-pdf.svg');
}

/* Design Tools */
.icon-color-picker {
  -webkit-mask-image: url('/components/tools-icons/color-picker.svg');
  mask-image: url('/components/tools-icons/color-picker.svg');
}

.icon-gradient-maker {
  -webkit-mask-image: url('/components/tools-icons/gradient-maker.svg');
  mask-image: url('/components/tools-icons/gradient-maker.svg');
}

.icon-palette-generator {
  -webkit-mask-image: url('/components/tools-icons/palette-generator.svg');
  mask-image: url('/components/tools-icons/palette-generator.svg');
}

.icon-browse-colors {
  -webkit-mask-image: url('/components/tools-icons/browse-colors.svg');
  mask-image: url('/components/tools-icons/browse-colors.svg');
}

.icon-color-palette {
  -webkit-mask-image: url('/components/tools-icons/color-palette.svg');
  mask-image: url('/components/tools-icons/color-palette.svg');
}

/* Dev Tools */
.icon-json-to-csv-converter {
  -webkit-mask-image: url('/components/tools-icons/json-to-csv-converter.svg');
  mask-image: url('/components/tools-icons/json-to-csv-converter.svg');
}

.icon-csv-to-json-converter {
  -webkit-mask-image: url('/components/tools-icons/csv-to-json-converter.svg');
  mask-image: url('/components/tools-icons/csv-to-json-converter.svg');
}

.icon-html-minifier {
  -webkit-mask-image: url('/components/tools-icons/html-minifier.svg');
  mask-image: url('/components/tools-icons/html-minifier.svg');
}

.icon-github-file-manager {
  -webkit-mask-image: url('/components/tools-icons/github-file-manager.svg');
  mask-image: url('/components/tools-icons/github-file-manager.svg');
}

/* Utility Tools */
.icon-password-generator {
  -webkit-mask-image: url('/components/tools-icons/password-generator.svg');
  mask-image: url('/components/tools-icons/password-generator.svg');
}

.icon-qr-code-generator {
  -webkit-mask-image: url('/components/tools-icons/qr-code-generator.svg');
  mask-image: url('/components/tools-icons/qr-code-generator.svg');
}

/* Social Media Tools */
.icon-fancy-text-generator {
  -webkit-mask-image: url('/components/tools-icons/fancy-text-generator.svg');
  mask-image: url('/components/tools-icons/fancy-text-generator.svg');
}

/* Calculator Tools */
.icon-age-calculator {
  -webkit-mask-image: url('/components/tools-icons/age-calculator.svg');
  mask-image: url('/components/tools-icons/age-calculator.svg');
}

/* Fun Tools */
.icon-love-calculator {
  -webkit-mask-image: url('/components/tools-icons/love-calculator.svg');
  mask-image: url('/components/tools-icons/love-calculator.svg');
}

/* ── 3. Navigation & Header UI Icons ── */
.icon-grid-2484a1 {
  -webkit-mask-image: url('/components/assets/icons/grid-2484a1.svg');
  mask-image: url('/components/assets/icons/grid-2484a1.svg');
}

.icon-theme-toggle-0fc198 {
  -webkit-mask-image: url('/components/assets/icons/theme-toggle-0fc198.svg');
  mask-image: url('/components/assets/icons/theme-toggle-0fc198.svg');
}

.icon-chevron-down {
  -webkit-mask-image: url('/assets/icons/chevron-down.svg');
  mask-image: url('/assets/icons/chevron-down.svg');
}