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

@mixin component($atRoot: namespace.$defaultAtRoot) {
	background-color: var(--components-card-background);
	border-radius: var(--components-card-border-radius);
	border-color: var(--components-card-border-color);
	border-width: 1px;
	display: block;
	border-style: solid;
	position: relative;
	transition-duration: var(--commons-animations-durations-fast);
	transition-property: background-color, box-shadow, color;

	@if config.$deprecatedCardBoxMargin {
		margin-block-end: var(--pr-t-spacings-200);
	}

	@at-root ($atRoot) {
		.card-content {
			padding: var(--components-card-content-padding);
			position: relative;
		}

		.card-title {
			padding: 0;
			margin-block-end: var(--pr-t-spacings-100);
		}

		.card-action {
			display: flex;
			align-items: center;
			justify-content: center;
			border-inline-start: 1px solid var(--commons-border-200);
			padding-inline-start: var(--pr-t-spacings-200);
			margin-inline-start: var(--pr-t-spacings-200);
		}

		.card-footer {
			padding: var(--components-card-footer-padding);
			border-block-start-color: var(--components-card-border-color);
			border-block-start-width: 1px;
			border-block-start-style: solid;
			align-items: center;
			display: flex;
			min-block-size: 3rem;
		}

		.card-footer-right {
			margin-inline-start: auto;
			display: inline-flex;
			gap: var(--pr-t-spacings-200);
		}
	}
}