.navigator {
	position: fixed;
	top: 50%;
	right: 48px;
	z-index: 999;

	opacity: 0;

	@include media-query(palm) {
		display: none;
	}

	&.navigator--transparent{
		right: 0;

		background: white;

		border: 12px solid transparent;
		border-top-left-radius: 10px;
		border-bottom-left-radius: 10px;

		@include transition(opacity .3s ease-out);

		&:hover{
			opacity: 1 !important;
		}
	}
}

.navigator__item {
	display: block;
	padding: $_u4;
	background: rgba(255,255,255, 0.01);

	.bullet {
		width: $_u2;
		height: $_u2;
		border-radius: 50%;
		border: 2px solid white;
		@include transition(background-color, border-color .1s ease-in-out);
		cursor: pointer;

		.navigator--transparent &{
			border: 2px solid black;
		}
	}

	@include transform(scale(0.7));
	opacity: 0;
}

.navigator__item--selected {
	position: absolute;
	top: 0; left: 0;

	.bullet {
		background: white;
		border-color: transparent;
		border-color: rgba(255, 255, 255, 0.01);
		cursor: default;

		.navigator--transparent &{
			background: black;
		}
	}

	@include transform(scale(0.7));
	opacity: 0;
}

.navigator--black {

	.navigator__item .bullet {
		border-color: black;
	}

	.navigator__item--selected .bullet {
		background: black;
	}
}