.header-wide {
	position: sticky;
	top: 0;
	z-index: 10;

	/* @media (width <= 56em) {
		display: none;
	} */

	& .header-container {
		display: flex;
		align-items: center;
		gap: 32px;
		padding-inline: 16px;
		padding-block: 8px;
		background: var(--color-bg-1);
		min-height: 72px;

		& .header-logo {
			flex-shrink: 0;

			& .header-logo-icon {
				width: 112px;
				height: 32px;
			}
		}

		& .header-nav {
			flex-grow: 1;

			display: flex;

			& .header-links {
				flex-grow: 1;

				display: flex;
				flex-wrap: wrap;
				align-items: center;
				column-gap: max(16px, 2lvw);
				row-gap: 4px;
			}
		}

		& .header-cta {
			flex-shrink: 0;

			display: flex;
			height: 56px;
			gap: 8px;

			& .header-auth {
				position: relative;

				& .header-auth-panel {
					border-radius: var(--radius);
					background: var(--color-bg-1);
					box-shadow: 0 16px 32px
						color-mix(in oklab, var(--color-fg-1) 30%, transparent);
					display: flex;
					flex-direction: column;
					gap: 24px;
					padding: 24px;
					width: 100%;
					max-width: calc(min(30em, 100% - 32px));
					height: fit-content;

					transition-property: opacity, filter, translate, visibility;
					transition-duration: var(--default-transition-duration);
					transition-delay:
						0s, 0s, 0s, var(--default-transition-duration);

					&[data-floater-state='open'] {
						transition-timing-function: var(--ease-out);
						transition-delay: 0s;
					}
					&[data-floater-state='closed'] {
						opacity: 0;
						filter: blur(4px);
						translate: 0 -16px;
						transition-timing-function: var(--ease-in-out);
					}

					& .header-auth-form {
						& .header-auth-form-buttons {
							& .button {
								flex-grow: 1;
							}
						}
					}
				}
			}
		}
	}
}