.ccm-search-block-form {
	height: 100%;
	position: relative;
	width: 3rem;
	label {
		background-color: var(--ke-beige-dark);
		padding: 0 !important;
		height: 100% !important;
	}
	svg.icon {
		position: absolute;
		top: 0;
		height: 100%;
		width: 1em;
		align-content: center;
		display: block;
		left: 1rem;
	}
	input {
		width: 12rem;
		appearance: none;
		background: transparent;
		border: none;
		padding: 0;
		padding-left: 2.2rem;
		margin-left: -.7rem;
		height: 100%;
		text-decoration: underline;
		&::placeholder {
			font-style: normal;
			color: var(--ke-black);
			text-decoration: none;
		}
		@media (width >= 920px) {
		}
	}
}
@media (width >= 920px) {
	.ccm-search-block-form {
		label {
			position: absolute !important;
			padding: 0 .5rem 0 .5rem !important;
			right: 0;
			top: 0;
			&:has(input:focus, input:not(:placeholder-shown)) {
				svg {
					left: 1rem;
				}
			}
			input {
				padding-left: 2rem;
				margin-left: unset;
				&:placeholder-shown:not(:focus) {
					width: 0;
				}
			}
		}
	}
}