@use '@lucca-front/icons/src/icon/exports' as icon;

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

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

@mixin S {
	--components-sortableList-padding: var(--pr-t-spacings-75) var(--pr-t-spacings-100);
	--components-sortableList-handler-size: var(--pr-t-font-body-S-lineHeight);
	--components-sortableList-description-font: var(--pr-t-font-body-S);
	--components-sortableList-helper-font: var(--pr-t-font-body-XS);

	// Deprecated
	--components-sortableList-description-fontSize: var(--pr-t-font-body-S-fontSize);
	--components-sortableList-description-lineHeight: var(--pr-t-font-body-S-lineHeight);

	.lucca-icon {
		@include icon.S;
	}
}