@use "../variables-site/structure";
@use "../mixins/utilities";

/** === Dropdown menus === */

.dd-menu {
	// Unstyle buttons
	button {
		display: inline-block;
		border: none;
		padding: 0;
		margin: 0;
		font-family: var(--newspack-theme-font-heading);
		line-height: 1.2;
		text-decoration: none;
		background: transparent;
		color: inherit;
		cursor: pointer;
		transition: background 250ms ease-in-out, transform 150ms ease;
		appearance: none;

		&:hover,
		&:focus {
			background: transparent;
		}

		&:focus {
			outline: 1px dotted currentcolor;
			outline-offset: -4px;
		}

		&:active {
			transform: scale(0.99);
		}
	}

	ul,
	li {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	li {
		position: relative;
	}

	.submenu-expand {
		display: inline-block;
		pointer-events: none;
	}

	.sub-menu {
		> li {
			display: block;
			&.menu-item-has-children {
				.submenu-expand {
					position: absolute;
					width: calc(24px + #{structure.$size__spacing-unit});
					bottom: 0;
					color: white;
					line-height: 1;
					padding: calc(0.5 * #{structure.$size__spacing-unit});
					margin-right: 0;

					svg {
						top: 0;
					}
				}
			}

			> a {
				display: inline-block;
			}

			> a:empty {
				display: none;
			}
		}
	}
}

.dd-menu > ul {
	overflow: visible;
	width: 100%;

	> li {
		&.menu-item-has-children {
			position: inherit;

			@include utilities.media( tablet ) {
				position: relative;
			}

			.submenu-expand {
				height: 18px;
				width: 24px;

				.wp-customizer-unloading &,
				&.is-empty {
					display: none;
				}

				svg {
					position: relative;
					top: -0.2em;
				}

				&.open-dropdown svg {
					transform: rotate(180deg);
				}
			}
		}
	}
}

.site-header .dd-menu {
	> ul > li {
		@include utilities.media( tablet ) {
			&.menu-item-has-children > a {
				padding-right: 0;
			}
		}

		> .sub-menu {
			padding-top: 12px;

			&::before {
				border-style: solid;
				border-width: 0 8px 8px;
				border-color: transparent transparent var(--newspack-theme-color-bg-dark) transparent;
				content: "";
				display: inline-block;
				height: 0;
				left: 10px;
				position: absolute;
				top: 4px;
				width: 0;
			}
		}
	}

	.sub-menu {
		color: var(--newspack-theme-color-bg-body);
		display: none;
		position: absolute;
		opacity: 0;
		transition: opacity 0.2s;
		left: -9999px;
		z-index: 99999;

		a {
			background-color: var(--newspack-theme-color-bg-dark);
			color: var(--newspack-theme-color-bg-body);
			display: block;
			line-height: var(--newspack-theme-font-line-height-heading);
			padding:
				calc(0.75 * #{structure.$size__spacing-unit})
				calc(24px + #{structure.$size__spacing-unit})
				calc(0.75 * #{structure.$size__spacing-unit}) structure.$size__spacing-unit;

			&:hover,
			&:focus {
				background-color: #020202;
			}
		}

		.submenu-expand {
			right: -5px;
			top: #{0.65 * structure.$size__spacing-unit};
			transform: rotate(-90deg);

			svg {
				margin-top: -10px;
			}
		}
	}

	/*
	 * Sub-menu styles
	 */
	.menu-item-has-children:hover > .sub-menu,
	.menu-item-has-children > .submenu-expand.open-dropdown + .sub-menu {
		display: block;
		float: none;
		margin-top: 0;
		opacity: 1;
		position: absolute;
		inset: 100% auto auto 0;
		height: auto;
		transform: none;
		width: #{12.5 * structure.$size__spacing-unit};
	}

	.sub-menu .menu-item-has-children:hover > .sub-menu,
	.sub-menu .menu-item-has-children > .submenu-expand.open-dropdown + .sub-menu {
		display: block;
		left: 100%;
		top: 0;
	}
}
