header.less before refactor

header.less

.header {
	padding-bottom: 10px;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;

	&__logo {
		width: 100%;
		padding: 10px;
	}

	&__middle {
		width: 100%;
		margin: 10px 0;
		order: 2;
	}

	&__cart {
		width: 38px;
	}

	&__top {
		display: none;
	}

	&__mobile {
		width: 80%;
		width: calc(~"100% - 38px");

		text-align: right;
	}
}

@media @query-lg {
	.header {
		padding-bottom: 20px;

		&__top {
			order: -1;
			display: flex;
			align-items: center;
			width: 100%;
			margin-bottom: 10px;

			&__left {
				flex: 1;
			}

			&__right {
				flex: 1;
			}
		}

		&__logo {
			flex: 1;
			order: 1;
			width: auto;
			padding-right: 20px;
		}

		&__middle {
			order: 2;
			width: 280px;
			margin: 0;
		}

		&__cart {
			padding-left: 20px;
			flex: 1;
			order: 3;

			text-align: right;
		}

		&__mobile {
			display: none;
		}
	}
}

@media @query-vl {
	.header {
		&__middle {
			width: 440px;
		}
	}
}