/*!
 * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
 * SPDX-License-Identifier: AGPL-3.0-or-later
 */
@use 'variables.scss' as variables;

.header-menu {
	position: relative;
	width: var(--header-height);
	height: var(--header-height);

	#{&}__trigger {
		--button-size: var(--header-height) !important;
		height: var(--header-height);
		opacity: .85;
		// header is filled with primary or image background
		filter: none !important;
		color: var(--color-background-plain-text, var(--color-primary-text)) !important;

		&:focus-visible {
			outline: none !important;
			box-shadow: none !important;
		}

		// ideally this is directly applied to the SVG for proper mask sizing
		// but if the icon slot use a different icon type then just apply it to the slot wrapper
		:deep(.button-vue__icon svg),
		:deep(.button-vue__icon:not(:has(svg))) {
			// apply a alpha mask on the header menu - same as for app icons (added with Nextcloud 32)
			mask: var(--header-menu-icon-mask, none);
		}
	}

	&--opened &__trigger,
	&__trigger:hover,
	&__trigger:focus,
	&__trigger:active {
		opacity: 1;
	}
}

@media only screen and (max-width: variables.$breakpoint-small-mobile) {
	.header-menu {
		width: var(--default-clickable-area);

		#{&}__trigger {
			--button-size: var(--default-clickable-area) !important;
		}
	}
}