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

@mixin component($atRoot: namespace.$defaultAtRoot) {
	list-style-type: '';
	padding: 0;
	font: var(--pr-t-font-body-M);
	color: var(--pr-t-color-text);

	@at-root ($atRoot) {
		.activityFeed-step {
			position: relative;
			display: flex;
			gap: var(--pr-t-spacings-100);

			&:not(:last-child) {
				padding-block-end: var(--pr-t-spacings-200);

				&::before {
					content: '';
					inline-size: var(--pr-t-spacings-25);
					background-color: var(--palettes-neutral-100);
					position: absolute;
					inset-block-end: 0;
					border-radius: var(--pr-t-border-radius-full);
					inset-block-start: var(--components-activityFeed-step-before-insetBlockStart);
					inset-inline-start: calc(var(--pr-t-spacings-200) - var(--pr-t-spacings-25) / 2);
				}
			}
		}

		.activityFeed-step-state,
		.activityFeed-step-avatar {
			margin-block: var(--pr-t-spacings-75);
		}

		.activityFeed-step-state {
			inline-size: var(--pr-t-spacings-400);
			block-size: var(--pr-t-spacings-400);
			border-radius: var(--pr-t-border-radius-full);
			position: relative;
			background-color: var(--palettes-100, var(--palettes-neutral-100));

			&::before {
				color: var(--palettes-700, var(--palettes-neutral-700));
				font-size: calc(1.5 * var(--pr-t-font-body-M-fontSize));
				block-size: var(--pr-t-font-body-M-lineHeight);
				inset: 0;
				margin: auto;
				position: absolute;
				text-align: center;
			}
		}

		.activityFeed-step-description {
			flex-grow: 1;
			align-self: var(--components-activityFeed-step-description-alignSelf);
			font-style: var(--components-activityFeed-step-description-fontStyle);
			color: var(--components-activityFeed-step-description-color);
			line-height: var(--components-activityFeed-step-description-lineHeight);
		}

		.activityFeed-step-description-time {
			font: var(--pr-t-font-body-S);
			color: var(--pr-t-color-text-subtle);
			display: block;
		}

		.activityFeed-content-update-icon {
			display: var(--components-activityFeed-content-update-icon-display);
		}

		.activityFeed-content-update {
			display: var(--components-activityFeed-content-update-display);
			align-items: center;
			gap: var(--pr-t-spacings-100);
		}

		.activityFeed-content-update-before,
		.activityFeed-content-update-after {
			display: flex;

			&:empty {
				display: none;
			}
		}

		.activityFeed-content {
			margin-block-start: var(--pr-t-spacings-100);
			display: flex;
			flex-direction: column;
			gap: var(--pr-t-spacings-100);
			align-items: flex-start;

			&:empty {
				display: none;
			}
		}
	}
}