/* ========================================
   Certificate Creator Icons - SVG Mask System
   ======================================== */

/* Hide original text content but keep color inheritance */
.cert-creater .material-symbols-outlined {
	display: inline-block;
	width: 1em;
	height: 1em;
	font-size: 20px;
	/* Hide text by setting font-size to 0 */
	font-size: 0 !important;
	line-height: 0;
	overflow: hidden;
	/* DO NOT set color: transparent - we need to inherit color from parent! */
	user-select: none;
	position: relative;
}

/* Icon display via ::before pseudo-element with SVG mask */
.cert-creater .material-symbols-outlined::before {
	content: '';
	display: block;
	width: 20px;
	height: 20px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: currentColor;
	-webkit-mask: var(--icon-svg, none) no-repeat center / contain;
	mask: var(--icon-svg, none) no-repeat center / contain;
}

/* Consistent 20x20px icon sizes (Design System Standard) */
.cert-creater .material-symbols-outlined {
	width: 20px;
	height: 20px;
}

.cert-creater .material-symbols-outlined::before {
	width: 20px;
	height: 20px;
}

/* Slight size adjustments for specific contexts */
.cert-creater__btn .material-symbols-outlined {
	width: 20px;
	height: 20px;
}

.cert-creater__btn .material-symbols-outlined::before {
	width: 20px;
	height: 20px;
}

.cert-creater__tool-btn .material-symbols-outlined {
	width: 20px;
	height: 20px;
}

.cert-creater__tool-btn .material-symbols-outlined::before {
	width: 20px;
	height: 20px;
}

/* Modal and list icons */
.cert-creater__modal-search .material-symbols-outlined {
	width: 20px;
	height: 20px;
}

.cert-creater__list-item .material-symbols-outlined {
	width: 20px;
	height: 20px;
}

.cert-creater__list-item--new .material-symbols-outlined {
	width: 24px;
	height: 24px;
}

.cert-creater__list-item--new .material-symbols-outlined::before {
	width: 24px;
	height: 24px;
}

/* Icon SVG Mappings - Using PC Design System Icons (20x20px) */
.cert-creater .material-symbols-outlined[data-icon="folder_open"] {
	--icon-svg: url('/src/img/2026/Icon/Unfilled/folder-open.svg');
}

.cert-creater .material-symbols-outlined[data-icon="grid_view"] {
	--icon-svg: url('/src/img/2026/Icon/Unfilled/template.svg');
}

.cert-creater .material-symbols-outlined[data-icon="remove"] {
	--icon-svg: url('/src/img/2026/Icon/Unfilled/minus.svg');
}

.cert-creater .material-symbols-outlined[data-icon="add"] {
	--icon-svg: url('/src/img/2026/Icon/Unfilled/plus.svg');
}

.cert-creater .material-symbols-outlined[data-icon="fit_screen"] {
	--icon-svg: url('/src/img/2026/Icon/Unfilled/fit-page.svg');
}

.cert-creater .material-symbols-outlined[data-icon="undo"] {
	--icon-svg: url('/src/img/2026/Icon/Unfilled/reply.svg');
}

.cert-creater .material-symbols-outlined[data-icon="redo"] {
	--icon-svg: url('/src/img/2026/Icon/Unfilled/reply.svg');
}

.cert-creater .material-symbols-outlined[data-icon="redo"]::before {
	transform: translate(-50%, -50%) scaleX(-1);
}

.cert-creater .material-symbols-outlined[data-icon="content_copy"] {
	--icon-svg: url('/src/img/2026/Icon/Unfilled/duplicate.svg');
}

.cert-creater .material-symbols-outlined[data-icon="delete"] {
	--icon-svg: url('/src/img/2026/Icon/Unfilled/trash.svg');
}

.cert-creater .material-symbols-outlined[data-icon="check_circle"] {
	--icon-svg: url('/src/img/2026/Icon/Unfilled/check-circle.svg');
}

.cert-creater .material-symbols-outlined[data-icon="hourglass_empty"] {
	--icon-svg: url('/src/img/2026/Icon/Unfilled/clock.svg');
}

.cert-creater .material-symbols-outlined[data-icon="lock"] {
	--icon-svg: url('/src/img/2026/Icon/Unfilled/lock-closed.svg');
}

.cert-creater .material-symbols-outlined[data-icon="lock_open"] {
	--icon-svg: url('/src/img/2026/Icon/Unfilled/lock-open.svg');
}

.cert-creater .material-symbols-outlined[data-icon="visibility"] {
	--icon-svg: url('/src/img/2026/Icon/Unfilled/eye.svg');
}

.cert-creater .material-symbols-outlined[data-icon="upload"] {
	--icon-svg: url('/src/img/2026/Icon/Unfilled/upload.svg');
}

.cert-creater .material-symbols-outlined[data-icon="download"] {
	--icon-svg: url('/src/img/2026/Icon/Unfilled/download.svg');
}

.cert-creater .material-symbols-outlined[data-icon="save"] {
	--icon-svg: url('/src/img/2026/Icon/Unfilled/save.svg');
}

.cert-creater .material-symbols-outlined[data-icon="fullscreen"] {
	--icon-svg: url('/src/img/2026/Icon/Unfilled/arrows-expand.svg');
}

.cert-creater .material-symbols-outlined[data-icon="fullscreen_exit"] {
	--icon-svg: url('/src/img/2026/Icon/Unfilled/arrows-contract.svg');
}

.cert-creater .material-symbols-outlined[data-icon="info"] {
	--icon-svg: url('/src/img/2026/Icon/Unfilled/information-circle.svg');
}

.cert-creater .material-symbols-outlined[data-icon="arrow_selector_tool"] {
	--icon-svg: url('/src/img/2026/Icon/Filled/cursor-click.svg');
}

.cert-creater .material-symbols-outlined[data-icon="text_fields"] {
	--icon-svg: url('/src/img/2026/Icon/Unfilled/pencil-alt.svg');
}

.cert-creater .material-symbols-outlined[data-icon="image"] {
	--icon-svg: url('/src/img/2026/Icon/Unfilled/photograph.svg');
}

.cert-creater .material-symbols-outlined[data-icon="category"] {
	--icon-svg: url('/src/img/2026/Icon/Unfilled/template.svg');
}

.cert-creater .material-symbols-outlined[data-icon="rectangle"] {
	--icon-svg: url('/src/img/2026/Icon/Unfilled/rectangle-o.svg');
}

.cert-creater .material-symbols-outlined[data-icon="rounded_corner"] {
	--icon-svg: url('/src/img/2026/Icon/Unfilled/rounded-rectangle-o.svg');
}

.cert-creater .material-symbols-outlined[data-icon="change_history"] {
	--icon-svg: url('/src/img/2026/Icon/Unfilled/triangle-o.svg');
}

.cert-creater .material-symbols-outlined[data-icon="circle"] {
	--icon-svg: url('/src/img/2026/Icon/Unfilled/circle-o.svg');
}

.cert-creater .material-symbols-outlined[data-icon="horizontal_rule"] {
	--icon-svg: url('/src/img/2026/Icon/Unfilled/minus.svg');
}

.cert-creater .material-symbols-outlined[data-icon="close"] {
	--icon-svg: url('/src/img/2026/Icon/Unfilled/x.svg');
}

.cert-creater .material-symbols-outlined[data-icon="search"] {
	--icon-svg: url('/src/img/2026/Icon/Unfilled/search.svg');
}

.cert-creater .material-symbols-outlined[data-icon="chevron_right"] {
	--icon-svg: url('/src/img/2026/Icon/Unfilled/cheveron-right.svg');
}

.cert-creater .material-symbols-outlined[data-icon="chevron_left"] {
	--icon-svg: url('/src/img/2026/Icon/Unfilled/cheveron-left.svg');
}

.cert-creater .material-symbols-outlined[data-icon="description"] {
	--icon-svg: url('/src/img/2026/Icon/Unfilled/document-text.svg');
}

.cert-creater .material-symbols-outlined[data-icon="add_circle"] {
	--icon-svg: url('/src/img/2026/Icon/Unfilled/plus-circle.svg');
}

.cert-creater .material-symbols-outlined[data-icon="wallpaper"] {
	--icon-svg: url('/src/img/2026/Icon/Unfilled/photograph.svg');
}

.cert-creater .material-symbols-outlined[data-icon="data_object"] {
	--icon-svg: url('/src/img/2026/Icon/Unfilled/hashtag.svg');
}

.cert-creater .material-symbols-outlined[data-icon="straighten"] {
	--icon-svg: url('/src/img/2026/Icon/Unfilled/view-grid.svg');
}

.cert-creater .material-symbols-outlined[data-icon="format_bold"] {
	--icon-svg: url('/src/img/2026/Icon/Unfilled/text-bold.svg');
}

.cert-creater .material-symbols-outlined[data-icon="format_italic"] {
	--icon-svg: url('/src/img/2026/Icon/Unfilled/text-italic.svg');
}

.cert-creater .material-symbols-outlined[data-icon="format_align_left"] {
	--icon-svg: url('/src/img/2026/Icon/Unfilled/menu-alt-1.svg');
}

.cert-creater .material-symbols-outlined[data-icon="format_align_center"] {
	--icon-svg: url('/src/img/2026/Icon/Unfilled/menu.svg');
}

.cert-creater .material-symbols-outlined[data-icon="format_align_right"] {
	--icon-svg: url('/src/img/2026/Icon/Unfilled/menu-alt-3.svg');
}

.cert-creater .material-symbols-outlined[data-icon="vertical_align_top"] {
	--icon-svg: url('/src/img/2026/Icon/Unfilled/chevron-double-up.svg');
}

.cert-creater .material-symbols-outlined[data-icon="vertical_align_bottom"] {
	--icon-svg: url('/src/img/2026/Icon/Unfilled/chevron-double-down.svg');
}

.cert-creater .material-symbols-outlined[data-icon="arrow_upward"] {
	--icon-svg: url('/src/img/2026/Icon/Unfilled/cheveron-up.svg');
}

.cert-creater .material-symbols-outlined[data-icon="drag_indicator"] {
	--icon-svg: url('/src/img/2026/Icon/Unfilled/dots-vertical.svg');
}

.cert-creater .material-symbols-outlined[data-icon="arrow_downward"] {
	--icon-svg: url('/src/img/2026/Icon/Unfilled/cheveron-down.svg');
}

.cert-creater .material-symbols-outlined[data-icon="ink_eraser"] {
	--icon-svg: url('/src/img/2026/Icon/Unfilled/eraser.svg');
}

.cert-creater .material-symbols-outlined[data-icon="brush"] {
	--icon-svg: url('/src/img/2026/Icon/Unfilled/brush.svg');
}

.cert-creater .material-symbols-outlined[data-icon="format_paint"] {
	--icon-svg: url('/src/img/2026/Icon/Unfilled/brush.svg');
}

.cert-creater .material-symbols-outlined[data-icon="radio_button_unchecked"] {
	--icon-svg: url('/src/img/2026/Icon/Unfilled/circle-o.svg');
}

/* Properties panel group-header + control icons (mockup-aligned redesign) */
.cert-creater .material-symbols-outlined[data-icon="text_format"] {
	--icon-svg: url('/src/img/2026/Icon/Unfilled/translate.svg');
}

.cert-creater .material-symbols-outlined[data-icon="open_with"] {
	--icon-svg: url('/src/img/2026/Icon/Unfilled/arrows-expand.svg');
}

.cert-creater .material-symbols-outlined[data-icon="layers"] {
	--icon-svg: url('/src/img/2026/Icon/Unfilled/collection.svg');
}

.cert-creater .material-symbols-outlined[data-icon="format_align_justify"] {
	--icon-svg: url('/src/img/2026/Icon/Unfilled/menu-alt-4.svg');
}

.cert-creater .material-symbols-outlined[data-icon="expand_more"] {
	--icon-svg: url('/src/img/2026/Icon/Unfilled/cheveron-down.svg');
}

.cert-creater .material-symbols-outlined[data-icon="aspect_ratio"] {
	--icon-svg: url('/src/img/2026/Icon/Unfilled/scale.svg');
}

.cert-creater .material-symbols-outlined[data-icon="title"] {
	--icon-svg: url('/src/img/2026/Icon/Unfilled/pencil.svg');
}

.cert-creater .material-symbols-outlined[data-icon="format_color_fill"] {
	--icon-svg: url('/src/img/2026/Icon/Unfilled/color-swatch.svg');
}

.cert-creater .material-symbols-outlined[data-icon="border_style"] {
	--icon-svg: url('/src/img/2026/Icon/Unfilled/rectangle-o.svg');
}

.cert-creater .material-symbols-outlined[data-icon="select_all"] {
	--icon-svg: url('/src/img/2026/Icon/Unfilled/view-grid.svg');
}