/* stylelint-disable color-named */
/* stylelint-disable unit-blacklist */

.detected-timestamp {
	border: 2px solid forestgreen;
	border-radius: 6px;
	margin: -2px;
}

.detected-signature {
	border: 2px solid blue;
	border-bottom-left-radius: 6px;
	border-top-left-radius: 6px;
	border-right: 0;
	margin: -2px;
	margin-right: 0;
}

.detected-signature + .detected-timestamp {
	border-left: 0;
	padding-left: 0;
	margin-left: 0;
	border-bottom-left-radius: 0;
	border-top-left-radius: 0;
}

.detected-timestamp:hover:after {
	content: ' ' attr( title );
}

.detected-comment {
	position: absolute;
	opacity: 0.2;
	pointer-events: none;
}

.detected-comment:nth-child( 2n ) {
	background: lightpink;
}

.detected-comment:nth-child( 2n + 1 ) {
	background: skyblue;
}

.detected-comment-ruler {
	position: absolute;
	box-sizing: border-box;
	border-left: 3px solid red;
	border-bottom: 3px solid red;
	box-shadow: -5px 10px 6px 0 white;
	border-bottom-left-radius: 8px;
}

.detected-comment-warnings {
	position: absolute;
	color: transparent;
	font-size: 0;
	height: 1em;
	width: 1em;
	pointer-events: none;
}

.detected-comment-warnings:hover {
	background: white;
	color: red;
	font-size: inherit;
	pointer-events: all;
}

.detected-comment-warnings:before {
	content: '⚠';
	color: white;
	font-size: 1rem;
	pointer-events: all;
}