.cdi-icon-wrapper {
	display: flex;
	width: 100%;
}

.cdi-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	line-height: 1;
	overflow: hidden;
	text-decoration: none;
	transition-property: color, background-color, border-color, box-shadow, opacity, transform;
	transition-timing-function: ease;
}

.cdi-icon:hover,
.cdi-icon:focus {
	text-decoration: none;
}

.cdi-icon--shape-circle {
	border-radius: 50%;
}

.cdi-icon__media {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	transform-origin: center;
}

.cdi-icon img,
.cdi-icon svg {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
}

.cdi-icon img {
	object-position: center;
}

.cdi-icon--colorize svg [fill]:not([fill="none"]) {
	fill: currentColor;
}

.cdi-icon--colorize svg [stroke]:not([stroke="none"]) {
	stroke: currentColor;
}

.cdi-icon--colorize svg path:not([fill]):not([stroke]),
.cdi-icon--colorize svg circle:not([fill]):not([stroke]),
.cdi-icon--colorize svg ellipse:not([fill]):not([stroke]),
.cdi-icon--colorize svg polygon:not([fill]):not([stroke]),
.cdi-icon--colorize svg rect:not([fill]):not([stroke]) {
	fill: currentColor;
}

.cdi-editor-placeholder {
	padding: 12px;
	border: 1px dashed #b5b5b5;
	font-size: 12px;
	text-align: center;
}

.cdi-icon--view-default,
.cdi-icon--view-framed {
	color: #69727d;
}

.cdi-icon--view-framed {
	border: 1px solid currentColor;
	background-color: transparent;
}

.cdi-icon--view-stacked {
	color: #fff;
	background-color: #69727d;
}