*, *::before, *::after {
	box-sizing: border-box;
}

:root {
	--clr-primary: #ee6352;
	--clr-body: #333;
	--clr-bg: #ddd;
}


.content2 {
	background: #FEF5E2;
	width: 500px;
	box-shadow: 0 0 3em rgba(0,0,0,.15);
	position: absolute;
	right:0;
}

.search {
	--size: 40px;
	display: flex;
	border-radius: 100px;
	overflow: hidden;
	font-size: 1.25em;
	position: absolute;
	right:0;
	width: var(--size);
	height: var(--size);
// margin-left: auto;
	transition: width 450ms cubic-bezier(0.18, 0.89, 0.32, 1.28);
	padding: 3px;
    background-color:#fefced;
}


.search__input {
	border: 0;
	padding: .25em 1em;
	flex-grow: 1;
	outline: 0;
	z-index: 3;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	background: transparent;
	opacity: 1;
	cursor: pointer;
}
.search__input:focus{
	z-index:1;
}
.search__submit {
	font-size: 1.5rem;
	margin-left: auto;
	background: 0;
	border: 0;
	z-index:2;
	cursor: pointer;
	border-radius: 50%;
	transition: background 200ms ease-out;
	width: calc(var(--size) - 10px);
	height: calc(var(--size) - 10px);
	color: var(--clr-body);
}

.search:focus-within {
/ / box-shadow: 0 0 5 px var(--clr-primary);
	width: 100%;
	z-index: 2;
	background-color:white;
}

.search__input {
	opacity: 1;
	cursor: initial;
	width: calc(100% - var(--size));
}
.search__input:focus-within + .search__submit{
	
}