/*
 * c-icon — ícono como marcador semántico, sin fuente de íconos.
 *
 *   <span class="c-icon" data-icon="close" aria-hidden="true"></span>
 *   (en PHP: theme_icon('close', _t('Close')), ver helper_functions/blocks.php)
 *
 * Scratch NO dibuja íconos. Solo pone un carácter de texto de respaldo en los
 * que hacen falta para usar el sitio (cerrar, anterior/siguiente, orden, más,
 * buscar); el resto queda vacío y el marcador queda como pista.
 *
 * Un theme los dibuja por CSS, sin tocar PHP. Por ejemplo, con SVG en máscara
 * (toma el color del texto):
 *
 *   .c-icon { inline-size: 1em; block-size: 1em; background: currentColor;
 *             mask: var(--icon) center / contain no-repeat; }
 *   .c-icon::before { content: none; }          quita el respaldo de texto
 *   [data-icon="close"]  { --icon: url(../icons/close.svg); }
 *   [data-icon="search"] { --icon: url(../icons/search.svg); }
 *
 * Nombres en uso: menu, close, prev, next, arrow-up, arrow-down, arrow-right, more,
 * search, tree, user, help, remove, image, list, grid, zoom, download, delete,
 * comment, add, box, folder, external, view-<vista> (view-images, view-list,
 * view-table…) y redes (facebook, instagram, twitter, youtube, vimeo, dropbox).
 */
@layer components {
	.c-icon { display: inline-block; line-height: 1; font-style: normal; }

	.c-icon::before { content: none; }
	[data-icon="close"]::before,
	[data-icon="remove"]::before      { content: "×"; }
	[data-icon="prev"]::before        { content: "‹"; }
	[data-icon="next"]::before        { content: "›"; }
	[data-icon="arrow-up"]::before    { content: "↑"; }
	[data-icon="arrow-down"]::before  { content: "↓"; }
	[data-icon="arrow-right"]::before { content: "→"; }
	[data-icon="more"]::before        { content: "…"; }
	[data-icon="search"]::before      { content: "⌕"; }
	[data-icon="menu"]::before        { content: "☰"; }
	[data-icon="tree"]::before        { content: "☷"; }

	/* íconos que emite el core con clases de Bootstrap 3 (no se pueden cambiar
	   desde el theme): orden de la búsqueda múltiple (searchHelpers.php) */
	.glyphicon-sort-by-alphabet::before     { content: "↑"; }
	.glyphicon-sort-by-alphabet-alt::before { content: "↓"; }
}