.block-limit {
	--width: 14px;
	--height: 21px;
	--padding: 2px;
	--border-radius: 3px;
	--fill-level: 50%;
	
	width: var(--width);
	height: var(--height);
	display: block;
	white-space: nowrap;
	color: var(--color--decent);
	cursor: help;

	&__icon {
		width: 1.2rem;
		height: 1.2rem;
		display: inline-block;
		position: relative;
	}
	
	&__battery {
		position: absolute;
		left: 0;
		bottom: -4px;
		width: var(--width);
		height: var(--height);
		border-radius: var(--border-radius);
		border: 2px solid var(--graphics-color);
		margin-right: .5rem;

		// plus pole:
		&::before {
			content: "";
			background: var(--graphics-color);
			width: 50%;
			height: calc(var(--width) / 3.5);
			border-radius: calc(var(--border-radius) / 2);
			position: absolute;
			left: 50%;
			top: 0;
			transform: translate(-50%, -100%);
		}

		// inner fill-level:
		&::after {
			content: "";
			position: absolute;
			left: var(--padding);
			bottom: var(--padding);
			background-color: hsla(calc(var(--fill-level) * 1deg) 90% 50% / 70%);
			border-radius: calc(var(--border-radius) / 2);
			width: calc(var(--width) - var(--padding) * 4);
			height: calc(var(--fill-level) * 1% - var(--padding));
			min-height: 2px;
			max-height: calc(100% - var(--padding) * 2);
			transition: height 500ms;
		}
	}
}