.tripbuilder-counter {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	height: 100%;
	color: var(--white);
	font-size: var(--text-lg);
	line-height: var(--leading-none);
	font-weight: 300;
	white-space: nowrap;
}

.tripbuilder-counter i {
	font-size: var(--text-base);
}

.tripbuilder-counter:focus-visible {
	outline-color: var(--sw-light-focus-color);
}

@media (hover: hover) {
	.tripbuilder-counter:hover {
		color: var(--white);
	}
}

@media (min-width: 64em) {
	.tripbuilder-counter {
		font-size: var(--text-sm);
		color: var(--black);
		font-weight: 600;
	}

	.tripbuilder-counter i {
		font-size: var(--text-xs);
	}

	.tripbuilder-counter:focus-visible {
		outline: 1px dashed var(--sw-focus-color);
	}

	@media (hover: hover) {
		.tripbuilder-counter:hover {
			color: var(--black);
		}
	}
}

@media (min-width: 90em) {
	.tripbuilder-counter {
		font-size: var(--text-lg);
	}
	
	.tripbuilder-counter i {
		font-size: var(--text-base);
	}
}