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

@mixin neutral {
	--components-card-background: var(--pr-t-elevation-surface-sunken);
}

@mixin clickable {
	color: var(--pr-t-color-text);
	text-decoration: none;
	cursor: pointer;

	&:hover {
		border-color: var(--components-card-hover-border);
		background-color: var(--components-card-hover-background);
		outline: none;
	}

	&:focus-visible {
		@include a11y.focusVisible;
	}
}

@mixin elevated {
	box-shadow: var(--pr-t-elevation-shadow-raised);
	border: 0;
}

@mixin action {
	box-shadow: var(--pr-t-elevation-shadow-raised);
	border: 0;
	cursor: pointer;
	padding: var(--components-card-content-padding);
	display: flex;
	flex-direction: row;
	row-gap: var(--pr-t-spacings-200);

	&:hover {
		box-shadow: var(--pr-t-elevation-shadow-overlay);
	}

	&:has(.card-action .button:focus-visible) {
		@include a11y.focusVisible($offset: 3px);

		.button {
			outline: none;

			&:not(:hover) {
				background-color: inherit;
			}
		}
	}

	.card-content {
		flex: 1;
		padding: 0;
	}
}

@mixin nested {
	--components-card-border-radius: var(--pr-t-border-radius-default);
}

@mixin expand {
	border: 0;
	background-color: transparent;
	box-shadow: none;
	cursor: pointer;

	&::before {
		content: '';
		position: absolute;
		inset: 0;
		background-color: var(--pr-t-elevation-surface-raised);
		border-radius: var(--components-card-border-radius);
		box-shadow: var(--pr-t-elevation-shadow-raised);
		transition-duration: var(--commons-animations-durations-fast);
		transition-property: inset, box-shadow;
	}

	&:hover {
		box-shadow: none;

		&::before {
			inset: -2px -6px;
			box-shadow: var(--pr-t-elevation-shadow-overlay);
		}
	}

	.card-content {
		z-index: 1;
	}
}