/**
 * WooBricks — Counter (unified Cart / Wishlist / … counter)
 *
 * Icon + badge. Badge colours/size/position come from element controls (css[]);
 * these rules provide structure, positioning and the add animation.
 */

.wbxe-counter {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	line-height: 1;
}

.wbxe-counter[data-trigger="none"] {
	cursor: default;
}

/* =========================================================================
   Icon
   ========================================================================= */

.wbxe-counter__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: currentColor;
}

.wbxe-counter__icon svg {
	display: block;
	width: 1em;
	height: 1em;
}

/* =========================================================================
   Badge
   ========================================================================= */

.wbxe-counter__badge {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1em;
	padding: 0 0.25em;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	box-sizing: border-box;
	pointer-events: none;
}

/* Position modifiers */
.wbxe-counter__badge--top-right    { top: -6px; right: -8px; }
.wbxe-counter__badge--top-left     { top: -6px; left: -8px; }
.wbxe-counter__badge--bottom-right { bottom: -6px; right: -8px; }
.wbxe-counter__badge--bottom-left  { bottom: -6px; left: -8px; }

/* Hidden (count 0 + hide-when-empty) */
.wbxe-counter__badge--hidden {
	display: none;
}

/* Add animation */
.wbxe-counter__badge--bounce {
	animation: wbxe-counter-bounce 0.4s ease;
}

@keyframes wbxe-counter-bounce {
	0%   { transform: scale(1); }
	30%  { transform: scale(1.35); }
	60%  { transform: scale(0.9); }
	100% { transform: scale(1); }
}