.focus-window {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 100;
	background-color: #fff;

	transform: translateX(100%);
	transition: transform 0.5s ease;
}

body.open-menu {
	overflow: hidden;

	.focus-window {
		transform: translateX(0);
	}
}

.focus-window__wrap {
	display: flex;
	height: 100%;
}

.focus-window__close {
	position: absolute;
	top: 0;
	right: 0;
}

.focus-window__search {
	margin-bottom: 20px;
	display: none;
}

.focus-window__input {
	clip-path: none;
	border: var(--border-dark);
	outline: none;
	padding: 20px;
	font-size: 14px;
	font-family: inherit;
	line-height: var(--line-height-medium);
	color: var(--neutral-500);
	width: 100%;

	&::placeholder {
		color: var(--neutral-500);
		transition: color var(--transition-surface-delay);
	}

	&:focus::placeholder {
		color: var(--neutral-200);
	}
}


@media(width <= 1200px) {
	.focus-window__wrap {
		flex-direction: column;
		overflow-y: scroll;
	}
}

@media(width <= 1024px) {
	.focus-window__search {
		display: block;
	}
}