.scroll-area :global(.mantine-ScrollArea-viewport)>div {
	height: 100%;
}

.banner {
	background-color: rgba(0, 0, 0, 0.3);

	@include light {
		background-color: rgba(255, 255, 255, 0.5);
	}
}

.reward-icon {
	border: 1px solid rgba(255, 255, 255, 0.3);
	background-origin: border-box;
}

.link {
	border: none;
	background-color: rgba(255, 255, 255, 0.1);
	transition: background-color 0.2s ease;

	&:hover,
	&:focus-within {
		background-color: rgba(255, 255, 255, 0.12);
	}

	@include light {
		background-color: rgba(0, 0, 0, 0.08);

		&:hover,
		&:focus-within {
			background-color: rgba(0, 0, 0, 0.1);
		}
	}
}

.timeline :global(.mantine-Timeline-itemBody) {
	background-color: var(--mantine-color-slate-8);
	padding-left: unset;
	margin-left: var(--mantine-spacing-xl);
	padding: var(--mantine-spacing-sm);
	border-radius: var(--mantine-radius-md);
}