@charset "UTF-8";

i.icon.notification {
	position: relative;
	width: 14px;
	height: 14px;
	box-sizing: border-box;
	display: block;
	background:
		linear-gradient(to left, currentColor 10px, transparent 0) no-repeat right bottom/2px 8px,
		linear-gradient(to left, currentColor 10px, transparent 0) no-repeat left top/8px 2px;

	&:after,
	&:before {
		content: "";
		position: absolute;
		box-sizing: border-box;
		display: block;
	}

	&:before {
		width: 14px;
		height: 14px;
		border-bottom: 2px solid;
		border-left: 2px solid;
	}

	&:after {
		top: -2px;
		right: -2px;
		width: 6px;
		height: 6px;
		border-radius: 4px;
		background-color: currentColor;
	}

	&:is(:disabled, [disabled="true"], .disabled) {
		background:
			linear-gradient(to left, currentColor 10px, transparent 0) no-repeat right bottom/2px 14px,
			linear-gradient(to left, currentColor 10px, transparent 0) no-repeat left top/12px 2px;

		&:after {
			display: none;
		}
	}
}
