/* base style for all icons */
.ui-icon-img, .ui-icon-wrapper {
	vertical-align: bottom;
	display: inline-block;
}

.ui-icon-wrapper, .ui-icon-placeholder {
	vertical-align: middle;
	text-align: center;
}

.ui-icon-wrapper {
	overflow: hidden;
	border: 1px darkgray dotted;
}

.ui-icon-placeholder {
	font-size: x-small;
	margin: -1px;
	object-fit: cover;
}

/* ===== identifier icons ===== */
.ui-icon-identifier, .ui-icon-identifier-wrapper {
	height: 25px; /** TODO get dynamically */
	width: 25px; /** TODO get dynamically */
	margin-right: 5px;
}

.ui-icon-identifier-placeholder {
	height: 27px; /** TODO get dynamically */
	width: 27px; /** TODO get dynamically */
	line-height: 25px; /** TODO get dynamically */
}

/* ===== grid icons ===== */
.ui-icon-grid, .ui-icon-grid-wrapper {
	height: 218px; /** TODO get dynamically */
	width: 218px; /** TODO get dynamically */
	margin: 0;
}

/* TODO for some reason size is set to 216x216 in chrome - causing broken image frame to show up ... */
.ui-icon-grid-placeholder {
	height: 220px; /** TODO get dynamically */
	width: 220px; /** TODO get dynamically */
	line-height: 218px; /** TODO get dynamically */
}