:root {
	--rabbit-mobile-dock-height: 64px;
}

.rabbit-mobile-dock__item.is-current .rabbit-mobile-dock__indicator {
	opacity: 1;
	transform: translateX(-50%) scaleX(1);
}

@media (max-width: 781px) {
	body {
		padding-bottom: calc(var(--rabbit-mobile-dock-height) + env(safe-area-inset-bottom));
	}
}

.rabbit-mobile-hub::backdrop,
.rabbit-mobile-activity::backdrop {
	background: rgb(18 24 29 / 0.62);
}

.rabbit-mobile-hub__surface,
.rabbit-mobile-activity__surface {
	transform: none;
	transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
	touch-action: pan-y;
}

.rabbit-mobile-hub[data-rabbit-mobile-hub-state="opening"] .rabbit-mobile-hub__surface,
.rabbit-mobile-hub[data-rabbit-mobile-hub-state="closing"] .rabbit-mobile-hub__surface,
.rabbit-mobile-activity[data-rabbit-mobile-activity-state="opening"] .rabbit-mobile-activity__surface,
.rabbit-mobile-activity[data-rabbit-mobile-activity-state="closing"] .rabbit-mobile-activity__surface {
	transform: translateY(100%);
}

.rabbit-mobile-hub.is-dragging .rabbit-mobile-hub__surface,
.rabbit-mobile-hub[data-rabbit-mobile-hub-state="settling"] .rabbit-mobile-hub__surface {
	transform: translateY(var(--rabbit-mobile-hub-drag, 0));
}

.rabbit-mobile-activity[data-rabbit-mobile-activity-dragging="true"] .rabbit-mobile-activity__surface,
.rabbit-mobile-activity[data-rabbit-mobile-activity-state="settling"] .rabbit-mobile-activity__surface {
	transform: translateY(var(--rabbit-mobile-activity-drag, 0));
}

.rabbit-mobile-hub.is-dragging .rabbit-mobile-hub__surface,
.rabbit-mobile-activity[data-rabbit-mobile-activity-dragging="true"] .rabbit-mobile-activity__surface {
	transition: none;
}

.rabbit-mobile-hub__drag-handle,
.rabbit-mobile-hub__header[data-rabbit-mobile-hub-drag-handle],
[data-rabbit-mobile-activity-drag-handle] {
	touch-action: none;
	user-select: none;
}

.rabbit-mobile-hub.is-expanded .rabbit-mobile-hub__surface {
	min-height: 92dvh;
}

.rabbit-mobile-hub.is-expanded [data-rabbit-mobile-hub-expand] svg {
	transform: rotate(180deg);
}

[data-rabbit-mobile-activity-content] > * {
	width: 100%;
	min-width: 0;
}

[data-rabbit-mobile-activity-content] .infinite-area,
[data-rabbit-mobile-activity-content] .infinite-area-scores,
[data-rabbit-mobile-activity-content] .infinite-area-coin {
	width: 100% !important;
	max-width: none;
}

.rabbit-mobile-hub__widget-group > [data-rabbit-adaptive-sidebar-content],
.rabbit-mobile-hub__widget-group > .rabbit-magazine-sidebar {
	position: static !important;
	display: flex !important;
	width: 100% !important;
	max-width: none !important;
	max-height: none !important;
	flex-direction: column;
	gap: 16px;
	overflow: visible !important;
	padding-bottom: 0 !important;
}

.rabbit-mobile-overlay-open,
.rabbit-runtime-scroll-locked {
	overflow: hidden;
}

[data-rh-component="activity"] [data-rh-notification-tab][aria-selected="false"] {
	border-color: transparent;
	color: rgb(133 151 165);
}

[data-rh-component="activity"] [data-rh-notification-tab][aria-selected="true"] {
	border-color: rgb(var(--white-rabbit--preset--color-primary));
	color: rgb(var(--white-rabbit--preset--color-primary));
}

@media (min-width: 782px) and (max-width: 1249px) {
	.rabbit-mobile-hub__surface,
	.rabbit-mobile-activity__surface {
		touch-action: pan-x;
	}

	.rabbit-mobile-hub[data-rabbit-mobile-hub-state="opening"] .rabbit-mobile-hub__surface,
	.rabbit-mobile-hub[data-rabbit-mobile-hub-state="closing"] .rabbit-mobile-hub__surface,
	.rabbit-mobile-activity[data-rabbit-mobile-activity-state="opening"] .rabbit-mobile-activity__surface,
	.rabbit-mobile-activity[data-rabbit-mobile-activity-state="closing"] .rabbit-mobile-activity__surface {
		transform: translateX(100%);
	}

	.rabbit-mobile-hub.is-dragging .rabbit-mobile-hub__surface,
	.rabbit-mobile-hub[data-rabbit-mobile-hub-state="settling"] .rabbit-mobile-hub__surface {
		transform: translateX(var(--rabbit-mobile-hub-drag, 0));
	}

	.rabbit-mobile-activity[data-rabbit-mobile-activity-dragging="true"] .rabbit-mobile-activity__surface,
	.rabbit-mobile-activity[data-rabbit-mobile-activity-state="settling"] .rabbit-mobile-activity__surface {
		transform: translateX(var(--rabbit-mobile-activity-drag, 0));
	}
}

@media (min-width: 1250px) {
	.rabbit-mobile-hub,
	.rabbit-mobile-activity {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rabbit-mobile-hub__surface,
	.rabbit-mobile-activity__surface {
		transition: none;
	}
}