/*
 * Icons for the tabs across the top, drawn in CSS so they appear with the
 * tabs on first paint.
 *
 * Each tab is matched by the section it links to, not by its position, so
 * adding or reordering tabs in mkdocs.yml can't put an icon on the wrong tab.
 * Other tabs link to "<section>/", but the selected tab links to "./", so it's
 * matched by the page's canonical address instead. Home is always the first
 * tab. A tab with no entry here keeps an empty icon slot.
 *
 * Icons are Lucide (https://lucide.dev), the set Zensical ships with. To add
 * one, copy a rule below and replace the section path and the SVG.
 */

.md-tabs__link {
  position: relative;
  padding-left: 1.1rem;
}

.md-tabs__link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0.8rem;
  height: 0.8rem;
  transform: translateY(-50%);
  background-color: currentColor;
  -webkit-mask: var(--cq-tab-icon, linear-gradient(transparent, transparent)) center / contain no-repeat;
  mask: var(--cq-tab-icon, linear-gradient(transparent, transparent)) center / contain no-repeat;
  opacity: 0.7;
}

.md-tabs__item--active .md-tabs__link::before,
.md-tabs__link:hover::before {
  opacity: 1;
}

/* Home (house) */
.md-tabs__item:first-child .md-tabs__link {
  --cq-tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8'/%3E%3Cpath d='M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E");
}

/* Getting started (rocket) */
.md-tabs__link[href$="getting-started/"],
html:has(link[rel="canonical"][href*="/getting-started/"]) .md-tabs__item--active .md-tabs__link {
  --cq-tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09'/%3E%3Cpath d='M9 12a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.4 22.4 0 0 1-4 2z'/%3E%3Cpath d='M9 12H4s.55-3.03 2-4c1.62-1.08 5 .05 5 .05'/%3E%3C/svg%3E");
}

/* Communicating (message-square) */
.md-tabs__link[href$="communicating/"],
html:has(link[rel="canonical"][href*="/communicating/"]) .md-tabs__item--active .md-tabs__link {
  --cq-tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
}

/* Calls (phone) */
.md-tabs__link[href$="calls/"],
html:has(link[rel="canonical"][href*="/calls/"]) .md-tabs__item--active .md-tabs__link {
  --cq-tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384'/%3E%3C/svg%3E");
}

/* Filling shifts (calendar-check) */
.md-tabs__link[href$="shifts/"],
html:has(link[rel="canonical"][href*="/shifts/"]) .md-tabs__item--active .md-tabs__link {
  --cq-tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v3M16 2v3'/%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Cpath d='M3 9h18M9 15l2 2 4-4'/%3E%3C/svg%3E");
}

/* Automation & AI (sparkles) */
.md-tabs__link[href$="automation/"],
html:has(link[rel="canonical"][href*="/automation/"]) .md-tabs__item--active .md-tabs__link {
  --cq-tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594zM20 2v4M22 4h-4'/%3E%3Ccircle cx='4' cy='20' r='2'/%3E%3C/svg%3E");
}

/* Relay (arrow-left-right) */
.md-tabs__link[href$="relay/"],
html:has(link[rel="canonical"][href*="/relay/"]) .md-tabs__item--active .md-tabs__link {
  --cq-tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3 4 7l4 4M4 7h16M16 21l4-4-4-4M20 17H4'/%3E%3C/svg%3E");
}

/* Admin & integrations (settings) */
.md-tabs__link[href$="admin/"],
html:has(link[rel="canonical"][href*="/admin/"]) .md-tabs__item--active .md-tabs__link {
  --cq-tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

/* Release notes (megaphone) */
.md-tabs__link[href$="release-notes/"],
html:has(link[rel="canonical"][href*="/release-notes/"]) .md-tabs__item--active .md-tabs__link {
  --cq-tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 6a13 13 0 0 0 8.4-2.8A1 1 0 0 1 21 4v12a1 1 0 0 1-1.6.8A13 13 0 0 0 11 14H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2z'/%3E%3Cpath d='M6 14a12 12 0 0 0 2.4 7.2 2 2 0 0 0 3.2-2.4A8 8 0 0 1 10 14M8 6v8'/%3E%3C/svg%3E");
}