.header-top-bar {
	width: 100%;
}

.header-top-bar__container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 5px;
}

.header-top-bar__city-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.header-top-bar__city-btn:hover {
	color: var(--blue);
}

.header-top-bar__city-btn svg {
	flex-shrink: 0;
}

.header-top-bar__nav {
	display: flex;
	gap: 24px;
}

.header-top-bar__dropdown {
	position: relative;

}

.header-top-bar__dropdown-trigger {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	transition: color 0.2s ease;
	anchor-name: var(--dropdown-anchor);
}

.header-top-bar__dropdown-trigger:hover,
.header-top-bar__dropdown-trigger.is-active {
	color: var(--blue);
}

.header-top-bar__dropdown-trigger svg {
	transition: transform 0.2s ease;
}

.header-top-bar__dropdown-trigger.is-active svg {
	transform: rotate(180deg);
}

.header-top-bar__dropdown-menu {
	position: fixed;
	position-anchor: var(--dropdown-anchor);
	position-area: bottom span-left;
	z-index: 1000;
	min-width: 220px;
	padding: 10px 17px;
	margin: 4px 0 0 0;
	list-style: none;
	background-color: #ffffff;
	border-radius: 10px;
}

.header-top-bar__dropdown-link {
	display: block;
	text-decoration: none;
	padding: 5px 0;
	transition:
		background-color 0.15s ease,
		color 0.15s ease;
}

.header-top-bar__dropdown-link:hover {
	color: var(--blue);
}