.baseline::before {
	position: absolute;
	inset: 0;
	z-index: 99999;
	display: block;
	width: auto;
	height: inherit;
	pointer-events: none;
	content: '';
	background-position: left top;
	background-size: 100% var(--baseline);
}

.baseline--full::before {
	background-image: linear-gradient(transparent calc(100% - 1px), rgb(255 0 255 / 0.5) calc(100% - 1px));
}

.baseline--half::before {
	background-image: linear-gradient(
		transparent calc(50% - 1px),
		rgb(255 0 255 / 0.5) calc(50% - 1px),
		rgb(255 0 255 / 0.5) 50%,
		transparent 50%,
		transparent calc(100% - 1px),
		rgb(255 0 255 / 0.5) calc(100% - 1px)
	);
}

.devbar {
	position: fixed;
	right: 0;
	bottom: 0;
	z-index: 9999999;
	font-size: 12px;
	line-height: 2;

	.devbar__option {
		display: inline-block;
		padding: 0 12px;
		margin-right: 3px;
		font-weight: 500;
		color: #ffffff;
		text-transform: capitalize;
		cursor: pointer;
		background-color: #212121;
	}
}

.debug * {
	background-color: rgb(255 0 0 / 0.2);

	* {
		background-color: rgb(0 255 0 / 0.2);

		* {
			background-color: rgb(0 0 255 / 0.2);

			* {
				background-color: rgb(255 0 255 / 0.2);

				* {
					background-color: rgb(0 255 255 / 0.2);

					* {
						background-color: rgb(255 255 0 / 0.2);

						* {
							background-color: rgb(255 0 0 / 0.2);

							* {
								background-color: rgb(0 255 0 / 0.2);

								* {
									background-color: rgb(0 0 255 / 0.2);
								}
							}
						}
					}
				}
			}
		}
	}
}