// Repeat for specificity.
// TODO(v2): Refactor everything to use RCSS.
:root .toolbar-snapped-scroll-list.toolbar-snapped-scroll-list.toolbar-snapped-scroll-list {
	height: min(140px, 50vh);
	position: relative;
	display: flex;
	align-items: center;

	> .scroller {
		display: flex;
		flex-direction: column;
		overflow-y: auto;
		scroll-snap-type: y mandatory;

		height: 100%;
		width: 100%;
		flex-grow: 1;

		> .item {
			height: 100%;
			width: 100%;
			flex-shrink: 0;

			display: flex;
			justify-content: center;
			align-items: center;

			scroll-snap-align: start;
			scroll-snap-stop: always;
			box-sizing: border-box;
		}
	}

	&.-empty {
		display: none;
	}

	> .page-markers {
		overflow: hidden;

		display: flex;
		flex-direction: column;
		align-items: center;

		max-height: 100%;
		min-height: 0;

		&.-one-element {
			visibility: hidden;
		}

		> .marker {
			> .content {
				background-color: var(--foreground-color-1);
				border-radius: 2px;
				padding: 2px;
			}

			padding: 2px;
			opacity: 0.1;
			cursor: pointer;

			left: 0;
			transition: left 0.2s ease;

			&.-active {
				position: relative;
				left: 2px;
				opacity: 0.2;
			}
		}
	}
}