/* Acople Pill Animation — estilos del widget */

.acople-pill{
	--pill-label-inline-size: 0px;
	--pill-speed: .65s;

	display: inline-flex;
	align-items: center;
	vertical-align: baseline;
	gap: 0.22em;
	padding: 0.04em 0.28em 0.04em 0.22em;
	border-radius: 999px;
	background: var(--color-background, #FFD6E0);
	inline-size: calc(var(--pill-label-inline-size) + 0.22em + 0.42em + 0.5em);
	transition:
		inline-size var(--pill-speed) cubic-bezier(.3, 1.1, .35, 1),
		background-color var(--pill-speed) ease;
	overflow: hidden;
	white-space: nowrap;
}

.acople-pill__dot{
	flex: none;
	inline-size: 0.42em;
	block-size: 0.42em;
	border-radius: 50%;
	background: var(--color-dot, #FF3366);
	transition: background-color var(--pill-speed) ease;
}

.acople-pill__label{
	position: relative;
	display: inline-block;
	overflow: hidden;
	inline-size: var(--pill-label-inline-size);
	transition: inline-size var(--pill-speed) cubic-bezier(.3, 1.1, .35, 1);
}

.acople-pill__measure{
	display: inline-block;
	will-change: transform, opacity;
}

.acople-pill__measure.is-leaving{
	animation: acople-pill-out .32s ease-in forwards;
}
.acople-pill__measure.is-entering{
	animation: acople-pill-in .38s cubic-bezier(.2, .9, .3, 1.2) forwards;
}

@keyframes acople-pill-out{
	to{ transform: translateY(-110%); opacity: 0; }
}
@keyframes acople-pill-in{
	from{ transform: translateY(110%); opacity: 0; }
	to{   transform: translateY(0);    opacity: 1; }
}

.acople-pill-ghost{
	position: absolute;
	visibility: hidden;
	pointer-events: none;
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce){
	.acople-pill,
	.acople-pill__label{ transition: none; }
	.acople-pill__measure.is-leaving,
	.acople-pill__measure.is-entering{ animation: none; }
}