/**
 * Pool occupancy top line styles.
 * Desktop: pools shown side-by-side with separators.
 * Mobile (≤767px): single pool visible at a time, slides in from the top.
 * Long names wrap with the percentage dropping to a second line.
 */

.top_line__track {
	display: inline;
}

@media screen and (max-width: 767px) {
	.top_line__inner {
		position: relative;
		overflow: hidden;
		width: 100%;
		min-height: 1.6em;
	}

	.top_line--multiple .top_line__inner {
		min-height: 2.8em;
	}

	.top_line__track {
		position: relative;
		display: block;
		width: 100%;
	}

	.top_line--multiple .top_line__track {
		min-height: 2.8em;
	}

	.top_line--multiple .top_line__pool {
		position: absolute;
		inset: 0;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		align-content: center;
		justify-content: center;
		text-align: center;
		line-height: 1.3;
		padding: 4px 12px;
		box-sizing: border-box;
		transform: translateY(-110%);
		opacity: 0;
		transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1);
		will-change: transform, opacity;
		pointer-events: none;
	}

	.top_line--multiple .top_line__pool.is-active {
		transform: translateY(0);
		opacity: 1;
		pointer-events: auto;
	}

	.top_line--multiple .top_line__pool.is-leaving {
		transform: translateY(110%);
		opacity: 0;
	}

	.top_line--multiple .top_line__label,
	.top_line--multiple .top_line__value {
		display: inline-block;
		max-width: 100%;
	}

	.top_line--multiple .top_line__value {
		white-space: nowrap;
	}

	.top_line__separator {
		display: none !important;
	}
}