@use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;
@use "@automattic/jetpack-base-styles/root-variables";

.dot-pager {
	width: 100%;
	height: 100%;
	position: relative;
}

.dot-pager__page {
	height: 100%;
	transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
	opacity: 1;
	visibility: visible;

	@include gb.reduce-motion( "transition" );
}

.dot-pager__controls {
	margin: 0;
	margin-bottom: 16px;
	margin-top: auto;
	display: flex;
	justify-content: center;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1;

	li {
		display: inline-flex;
		margin: 0 4px;
		height: 18px;
		align-items: center;

		&:first-child {
			margin-left: 0;
		}

		&:last-child {
			margin-right: 0;
		}
	}

	.dot-pager__control-gap {
		margin-left: auto;
	}
}

.dot-pager__control-choose-page {
	cursor: pointer;
	border-radius: 50%;
	width: 6px;
	height: 6px;
	padding: 0;
	background-color: var(--jp-white-off);

	&:disabled {
		cursor: default;
	}

	&:focus-visible {
		box-shadow: 0 0 0 2px var(--jp-gray-90);
	}

	&:hover {
		background-color: var(--jp-gray-20);
	}

	&.dot-pager__control-current {
		background-color: var(--jp-gray-80);
	}
}

.dot-pager__button {
	margin-right: 10px;
}
