@use '@lucca-front/icons/src/commons/utils/icon';
@use '@lucca-front/scss/src/commons/utils/a11y';

@mixin clickable {
	transition-duration: var(--commons-animations-durations-fast);
	transition-property: background-color;
	text-decoration: none;
	cursor: pointer;

	&:focus {
		outline: none;
	}

	&:focus-visible,
	&:hover {
		outline: none;
		background-color: var(--components-list-hover-background);
	}
}

@mixin draggable {
	padding-inline-start: var(--pr-t-spacings-200);

	.list-item-handler {
		color: var(--palettes-neutral-400);
		font-size: 1.3rem;
		inset-inline-start: 0;
		inline-size: 2.4rem;
		text-align: center;
		position: absolute;
		cursor: move;

		&::before {
			@include icon.generate('dots_drag');

			vertical-align: middle;
		}
	}
}

@mixin actionsHidden {
	// if no hover on list item
	@media (hover: hover) {
		&:not(:hover) {
			.button {
				&:not(:focus) {
					@include a11y.mask;

					opacity: 0;
				}
			}
		}
	}
}