/*
 * CHANGE LOG
 * -----------------------------------------------------------------------------
 * SEQ                 | AUTHOR                      | DESCRIPTION
 * -----------------------------------------------------------------------------
 * 1 | maintainer@emeraldcoastsystemsgroup.com | The application icon tile beside each name in the Apps menu and its Experiences rows: the glyph in its suite's colour on a tint of the same colour, so it reads on light and dark themes; an application with no suite takes the theme's accent.
 */
.app-icon {
  --app-icon-colour: var(--accent-primary, #6366f1);
  display: inline-grid; place-items: center; flex: none;
  width: 26px; height: 26px; border-radius: 8px;
  color: var(--app-icon-colour);
  background: color-mix(in srgb, var(--app-icon-colour) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app-icon-colour) 28%, transparent);
}
.app-icon .codicon { font-size: 16px; line-height: 1; }
.app-icon[data-suite="ai-productivity"] { --app-icon-colour: #3b82f6; }
.app-icon[data-suite="ai-knowledge"] { --app-icon-colour: #8b5cf6; }
.app-icon[data-suite="ai-finance"] { --app-icon-colour: #10b981; }
.app-icon[data-suite="ai-creative"] { --app-icon-colour: #ec4899; }
.app-icon[data-suite="ai-home"] { --app-icon-colour: #f59e0b; }
.app-icon[data-suite="ai-engineering"] { --app-icon-colour: #06b6d4; }
a.has-app-icon { display: flex !important; align-items: center; gap: 10px; }
a.has-app-icon .app-icon-label { min-width: 0; }