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

@mixin action-active {
	li.action {
		&:hover,
		&.active {
			border-radius: 6px;
			padding: 0;
		}

		&:hover {
			background-color: var(--color-background-hover);
		}
	}
}

@mixin action--disabled {
	.action--disabled {
		pointer-events: none;
		opacity: $opacity_disabled;
		&:hover, &:focus {
			cursor: default;
			opacity: $opacity_disabled;
		}
		& * {
			opacity: 1 !important;
		}
	}
}


@mixin action-item($name) {
	.action-#{$name} {
		display: flex;
		align-items: flex-start;

		width: 100%;
		height: auto;
		margin: 0;
		padding: 0;
		padding-inline-end: $icon-margin;
		box-sizing: border-box; // otherwise router-link overflows in Firefox

		cursor: pointer;
		white-space: nowrap;

		color: var(--color-main-text);
		border: 0;
		border-radius: 0; // otherwise Safari will cut the border-radius area
		background-color: transparent;
		box-shadow: none;

		font-weight: var(--font-weight-element, normal);
		font-size: var(--default-font-size);
		line-height: var(--default-clickable-area);

		& > span {
			cursor: pointer;
			white-space: nowrap;
		}

		&__icon {
			width: var(--default-clickable-area);
			height: var(--default-clickable-area);
			opacity: $opacity_full;
			background-position: $icon-margin center;
			background-size: $icon-size;
			background-repeat: no-repeat;
		}

		&:deep(.material-design-icon) {
			width: var(--default-clickable-area);
			height: var(--default-clickable-area);
			align-self: flex-start;
			opacity: $opacity_full;

			.material-design-icon__svg {
				vertical-align: middle;
			}
		}

		// long text area
		&__longtext-wrapper,
		&__longtext {
			max-width: 220px;
			line-height: 1.6em;

			padding: calc((var(--default-clickable-area) - 1.6em) / 2) 0;

			cursor: pointer;
			text-align: start;

			// in case there are no spaces like long email addresses
			overflow: hidden;
			text-overflow: ellipsis;
		}

		&__longtext {
			cursor: pointer;
			// allow the use of `\n`
			white-space: pre-wrap !important;
		}

		&__name {
			font-weight: var(--font-weight-heading, bold);
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			max-width: 100%;
			display: block;
		}

		&__description {
			display: block;
			white-space: pre-wrap;
			font-size: var(--font-size-small);
			font-weight: var(--font-weight-default, normal);
			line-height: var(--default-line-height);
			color: var(--color-text-maxcontrast);
			cursor: pointer;
		}

		&__menu-icon {
			margin-inline: auto calc($icon-margin * -1);
		}
	}
}
