codesignd Patterns

.input {
	background: -cdd-img-url('warn.svg');
	background-size: 1.5rem;
	background-repeat: no-repeat;
	
	background-position: calc(100% + 1.5rem + 1px) center;
	transition: background-position 0.2s ease;
	
	// Duplicated styles for browsers that don't support :placeholder-shown
	&:invalid:not(:focus):not(:placeholder-shown) {
		background-position: calc(100% - 0.7rem) center;
	}
	&--invalid {
		background-position: calc(100% - 0.7rem) center;
	}
}