@use '@lucca-front/scss/src/components/button/exports' as button;
@use '@lucca-front/icons/src/icon/exports' as icon;
@use '@lucca-front/scss/src/commons/utils/namespace';

@mixin component($atRoot: namespace.$defaultAtRoot) {
	user-select: none;
	font-weight: var(--components-sortable-fontWeight);
	vertical-align: top;
	align-items: flex-end;
	white-space: wrap;
	inset-inline-start: var(--components-sortable-offset);
	padding: 0 var(--pr-t-spacings-50);
	gap: var(--pr-t-spacings-25);
	text-align: inherit;
	flex-direction: var(--components-sortable-direction);
	font-size: var(--components-sortable-fontSize);
	line-height: var(--components-sortable-lineHeight);
	color: currentColor;

	@include button.ghost;

	@at-root ($atRoot) {
		.tableSortable-arrows {
			margin-block-end: var(--components-sortable-arrowsOffset);
			position: relative;
			inline-size: 1rem;
			block-size: 1rem;
		}

		.tableSortable-arrows-ascending,
		.tableSortable-arrows-descending {
			@include icon.XS;

			position: absolute;
			inset: 0;
			color: var(--components-sortable-arrowColor);
			transition-property: translate, scale, color;
			transition-duration: var(--commons-animations-durations-slow);
			scale: var(--components-sortable-arrowScale);
		}

		.tableSortable-arrows-ascending {
			translate: 0 calc(var(--pr-t-spacings-50) * -1);
		}

		.tableSortable-arrows-descending {
			translate: 0 var(--pr-t-spacings-50);
		}
	}
}