@import "@Themes/constants.scss";

.root {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-shrink: 0;

	height: var(--header-height);
	padding: 0px var(--spacing-lg, 24px);

	border-bottom: 1px solid var(--menu-border, #d7dce0);
	background: var(--menu-background, #fff);

	position: sticky;
	top: 0;
	z-index: 4;

	.logo-container {
		> a {
			cursor: pointer !important;
		}
		.logo {
			width: 174px;
			height: 39px;
		}
	}

	.right-section {
		display: flex;
		align-items: center;
		gap: var(--spacing-md);
	}

	.desktop {
		@media (max-width: $screen-m) {
			display: none;
		}
	}

	.mobile {
		display: none;

		@media (max-width: $screen-m) {
			display: inline-flex;
		}
	}
}

.subscription-line {
	position: sticky;
	top: 83px;
	display: flex;
	gap: 8px;
	justify-content: center;
	align-items: center;
	background-color: var(--color-neutral-50);
	padding: 14px 0;
}