.header-primary {
	z-index: 2;
	display: flex;
	justify-content: space-between;
	width: 100%;
	height: rem(48);
	background-color: $c-grey-09;
	color: $c-white;
	flex-shrink: 0;

	.avatar__image-wrapper {
		width: rem(32);
		height: rem(32);
	}

	.text-input {
		flex: 1 0 auto;
		display: none;
	}
}

.header-primary__user-btn {
	padding-right: spacing('tight');
}

.header-primary__left,
.header-primary__right {
	display: inline-flex;
	align-items: center;
}

.header-primary__left {
	flex: 1 1 auto;
	max-width: rem(240);
	padding-right: spacing('tight');
	overflow: hidden;
}

.header-primary__right {
	flex: 1 0 auto;
	justify-content: flex-end;
	padding-right: spacing('tight');
}

.header-primary__location {
	width: 100%;
}

.header-primary__search-btn {
	align-items: center;
	flex: 1 0 auto;
	padding: spacing('tight');
	height: 100%;
	max-width: rem(50);

	.btn__icon {
		fill: $c-white;
		height: rem(24);
		width: rem(24);
		opacity: 1;
	}

	.btn__inner {
		border-color: $c-grey-08;
		color: $c-white;
	}

	.btn__text {
		color: $c-grey-01;
		display: none;
	}

	.btn__inner:focus {
		background-color: $c-white;
		border-color: $c-grey-08;
		color: $c-grey-08;
	}

	.autosuggest__list-item-inner {
		color: $c-grey-07;
	}

	.autosuggest__no-results-title {
		color: $c-grey-08;
	}
}

.header-primary__organization,
.header-primary__lockup {
	display: flex;
	align-items: center;
}

.header-primary__lockup {
	padding-left: spacing('tight');
}

.header-primary__lockup-icon {
	stroke: $c-white;

	+ * {
		margin-left: spacing('extra-tight');
	}
}

.header-primary__organization-image {
	background-position: center;
	background-size: cover;
	border-radius: 2px;
	height: 2rem;
	width: 2rem;

	+ * {
		margin-left: spacing('tight');
	}
}

.header-primary__text {
	@include typescale('ui');
	font-weight: $font-weight-bold;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;

	&.header-primary__address {
		font-weight: $font-weight-normal;
		color: $c-off-white;
	}

	a {
		color: inherit;
		text-decoration: none;
	}
}

.header-primary__shortcut-btn {
	border-left: 1px solid $c-grey-08;
	border-right: 1px solid $c-grey-08;
	border-radius: 0;

	&:hover {
		background-color: rgba($c-white, 0.05);
	}

	&:active,
	&--is-active {
		background-color: $c-black;
	}

	+ .header-primary__shortcut-btn,
	+ .header-primary__autosuggest {
		border-left: none;
	}

	.btn__icon {
		fill: none;
		stroke: $c-white;
	}
}

.header-primary__shortcut-btn-wrapper {
	position: relative;
}

.header-primary__location-menu-wrapper {
	position: absolute;
	top: calc(100% + #{rem(4)});
	left: rem(-4);
}

.header-primary__location-menu {
	width: rem(256);
	padding-bottom: spacing('tight');
	color: $c-text;
	transform: translate(0, 0);
}

.header-primary__location-management-btn {
	margin-left: rem(20);
	margin-top: spacing('tight');
}

@include gt('small') {
	.header-primary {
		.text-input {
			display: block;
		}
	}

	.header-primary__search-btn {
		display: flex;
		border-left: 1px solid $c-grey-08;
		padding: 0;
		max-width: rem(296);
		&:hover {
			.btn__text {
				color: $c-white;
			}
		}
		.btn__inner {
			background-color: $c-grey-07;
			border-radius: 4px;
			justify-content: flex-start;
			position: absolute;
			top: spacing('tight');
			right: spacing('tight');
			left: spacing('tight');
			bottom: spacing('tight');
			height: auto;
			padding: spacing('tight');
			width: auto;
		}
		.btn__icon {
			opacity: 0.7;
			height: rem(20);
			width: rem(20);
		}
	}
}

@include gt('medium') {
	.header-primary {
		.hamburger {
			display: none;
		}

		.header-primary__search-btn {
			.btn__text {
				display: block;
			}
		}

		.text-input {
			display: block;
		}
	}

	.header-primary__left {
		padding-left: spacing('tight');
	}
}

.user-menu {
	position: relative;
}

.user-menu__menu {
	position: absolute;
	top: 100%;
	right: 0;
	width: rem(256);
	padding-bottom: spacing('extra-tight');
	color: $c-text;

	.avatar__image-wrapper {
		width: rem(40);
		height: rem(40);
	}

	.list-item:not(:first-child):after {
		display: none;
	}

	.btn__inner {
		justify-content: flex-start;
	}
}