@import './shared/log.css';

.page-indicator {
	position: fixed;
	top: 1px;
	left: 0;
	z-index: 10000000000;
	pointer-events: none;

	&:not(:hover) {
		opacity: 0.2;
	}

	display: flex;
	flex-direction: column;

	.page-indicator-elem {
		font-family: Funnel Sans, system-ui;
		font-size: 14px;
		line-height: 18px;
		color: #fff;
		display: flex;
		gap: 2px;
		width: fit-content;
		pointer-events: auto;
		cursor: default;

		border-radius: 4px;

		padding: 1px 2px;

		.page-indicator-head {
			width: 65px;
			padding: 0 6px;
			background: #000 !important;
			font-weight: 500 !important;
		}

		.page-indicator-sub {
			background: rgba(255, 255, 255, 0.15);
			display: flex;
			padding: 0 6px;

			border-radius: 4px;

			&:nth-child(3) {
				background: rgba(255, 255, 255, 0.25);
			}
			&:nth-child(4) {
				background: rgba(255, 255, 255, 0.35);
			}
			&:nth-child(5) {
				background: rgba(255, 255, 255, 0.45);
			}
			&:nth-child(6) {
				background: rgba(255, 255, 255, 0.55);
			}
		}
	}

	&::selection,
	::selection {
		background: red;
	}
	&::-moz-selection,
	::-moz-selection {
		background: red;
	}
}