:root {
	--lf-ask: #f6465d;
	--lf-bid: #2ebd85;
	--lf-ask-fill: rgba(246, 70, 93, 0.18);
	--lf-bid-fill: rgba(46, 189, 133, 0.2);
}
button:has(> span.depth-bar-ask),
button:has(> span.depth-bar-bid) {
	font-family: Inter, "SF Pro Text", system-ui, -apple-system, "Segoe UI", sans-serif !important;
	font-size: 12.5px !important;
	font-variant-numeric: tabular-nums;
	padding-top: 4px !important;
	padding-bottom: 4px !important;
}
button:has(> span.depth-bar-ask) > span.text-market-down {
	color: var(--lf-ask) !important;
}
button:has(> span.depth-bar-bid) > span.text-market-up {
	color: var(--lf-bid) !important;
}
button:has(> span.depth-bar-ask) > span.text-fg-muted,
button:has(> span.depth-bar-bid) > span.text-fg-muted {
	color: #eaecef !important;
}
button.lf-mb > span.depth-bar-ask,
button.lf-mb > span.depth-bar-bid {
	opacity: 0 !important;
}
button.lf-mb::before {
	content: "";
	position: absolute;
	top: 1px;
	bottom: 1px;
	right: 0;
	width: var(--lf-w, 0%);
	transition: width 280ms cubic-bezier(0.2, 0.7, 0.2, 1);
	pointer-events: none;
}
button.lf-mb.lf-ask::before {
	background: var(--lf-ask-fill);
}
button.lf-mb.lf-bid::before {
	background: var(--lf-bid-fill);
}
div:has(> span[class*="bg-market-up/20"]):has(> span[class*="bg-market-down/20"]) {
	height: auto !important;
	overflow: visible !important;
	gap: 4px;
	margin-top: 8px !important;
	font-family: Inter, "SF Pro Text", system-ui, -apple-system, sans-serif !important;
	font-size: 12px !important;
}
span[class*="bg-market-up/20"] {
	background: none !important;
	color: var(--lf-bid) !important;
	border-top: 3px solid var(--lf-bid);
	border-radius: 2px 2px 0 0;
	padding: 5px 0 0 !important;
	transition: width 300ms ease;
}
span[class*="bg-market-down/20"] {
	background: none !important;
	color: var(--lf-ask) !important;
	border-top: 3px solid var(--lf-ask);
	border-radius: 2px 2px 0 0;
	padding: 5px 0 0 !important;
}
@media (prefers-reduced-motion: reduce) {
	button.lf-mb::before,
	span[class*="bg-market-up/20"] {
		transition: none;
	}
}
span[class*="bg-market-up/20"],
span[class*="bg-market-down/20"] {
	white-space: nowrap !important;
	min-width: 0 !important;
	border-top-width: 2px !important;
	border-radius: 2px !important;
	padding-top: 6px !important;
	line-height: 1 !important;
}
span[class*="bg-market-down/20"] {
	justify-content: flex-end !important;
	overflow: visible !important;
}