/* DTB ICON — Front-end rendering styles */

.dtb-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--dtb-icon-size, 24px);
	height: var(--dtb-icon-size, 24px);
	color: var(--dtb-icon-color, currentColor);
	background: var(--dtb-icon-bg, transparent);
	padding: var(--dtb-icon-pad, 0);
	border-radius: 6px;
	transform: rotate(var(--dtb-icon-rotate, 0deg));
	transition: color .2s ease, background-color .2s ease, transform .2s ease;
	line-height: 0;
	vertical-align: middle;
}

.dtb-icon svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
	display: block;
}

.dtb-icon--hoverable:hover {
	color: var(--dtb-icon-hover, var(--dtb-icon-color, currentColor));
}

.dtb-icon-link {
	display: inline-flex;
	text-decoration: none;
}

.dtb-icon--spin svg {
	animation: dtb-icon-spin 2s linear infinite;
}

.dtb-icon--pulse svg {
	animation: dtb-icon-pulse 1.5s ease-in-out infinite;
}

.dtb-icon--bounce svg {
	animation: dtb-icon-bounce 1s ease infinite;
}

.dtb-icon--shake svg {
	animation: dtb-icon-shake .5s ease infinite;
}

@keyframes dtb-icon-spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

@keyframes dtb-icon-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: .35; }
}

@keyframes dtb-icon-bounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-6px); }
}

@keyframes dtb-icon-shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-3px); }
	75% { transform: translateX(3px); }
}