@scope (#harleys-mega-menu) {

	& {
		--background-color: color-mix(in srgb, #1E1C28 45%, transparent);
		--backdrop-filter: blur(10px);
		--menu-padding: 1rem;
		position: relative;
		&:before {
			content: '';
			position: absolute;
			inset: 0;
			background-color: var(--background-color);
			backdrop-filter: var(--backdrop-filter);
			border-radius: .5rem;
		}
		padding: var(--menu-padding);
		border-radius: .5rem;

		font-size: 1.125rem;

		display: inline-flex;
		margin: 0 auto;
	}


	.menu-level {

		button, a {
			background-color: transparent;
			border: none;
			color: white;
			cursor: pointer;
			font-size: 1em;
			line-height: 1.2;
			display: flex;
			align-items: center;
			gap: 1ch;
			transition: color 0.3s ease;
			&:hover {
				color: #de6923;
			}
			span {
				text-box: trim-both cap alphabetic;
				color: inherit;
			}
			i {
				font-size: 0.875em;
				line-height: 0.75;
			}
		}


		&[data-depth="0"] {
			display: inline-flex;
			margin: 0 auto;
			justify-content: center;
			flex-direction: row;
			gap: 1rem;



			> li {
				position: relative;

				> ul.menu-level {
					position: absolute;
					min-width: 16rem;
					top: calc(100% + var(--menu-padding) - 2px);
					left: 0;
					flex-direction: column;
					gap: 1rem;
					background-color: var(--background-color);
					backdrop-filter: var(--backdrop-filter);
					box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
					padding: var(--menu-padding);
					border-radius: .5rem;
					z-index: 1000;
					a {
						color: white;
						text-decoration: none;
						cursor: pointer;
						padding-block: 1em;
						&:hover {
							color: #de6923;
							text-decoration: underline;
						}
					}
				}
			}
		}
	}

}