@use "sass:math";
/* variables specific to current element */

$activity-log-item-connector-width: map-deep-get($token-sizes-unit-map, "32");

.#{$namespace}activityLog {

	/* Save root element context for easy access if nesting is needed */

	$self: &;

	/* properties of current element  + media queries */

	@include spacer-component-stack("sm");

	/* Pseudo Elements */

	&::before {
	}

	&::after {
	}

	/*
	Include elements that are linked to the current element but have to reside at the root level of the stylesheet
	(e.g: keyframes)
	*/
	@at-root {
	}


	/* children - write selector in full in comments in order to facilitate search */

	// activityLog__row
	&__row {

		// follows same logic as parent

		display: flex;
		align-items: center;
		@include spacer-component-inline("md");
		@include spacer-component-inset("sm");

		position: relative;
		z-index: z("zero");

		&::before {

			content: "";
			position: absolute;
			z-index: z("negative");
			top: 50%;
			bottom: 0;
			left: $icon-circle-regular-smaller-dimensions-global;
			transform: translateX(-50%);
			width: $border-width*2;
			@include custom-prop-fallback("background-color", "sys-color-border-primary-moderate");

		}

		& + & {

			&::before {

				top: -(map-deep-get($token-spacer-unit-map, "12")); // 12 and not 8 bc tiny 1px space on FF base zoom level
				bottom: 0;

			}

		}
		
		&:last-child {
			
			&::before {
				bottom: 50%;
			}
			
		}

	}

	&__itemConnector {

		width: $activity-log-item-connector-width;
		margin-right: math.div($icon-circle-regular-smaller-dimensions-global,2);

		&::after {

			right: auto;
			width: math.div($icon-circle-regular-smaller-dimensions-global,2);

		}

	}

	&__meta {

		@include custom-prop-fallback("color", "sys-color-text-primary-muted");

	}


	/* modifiers */

	// activityLog -noAvatar
	&.-noAvatar {

		// follows same logic as base element
		
	}

	&.-alignStart {

		#{$self}__itemConnector {

			position: relative;
			height: auto;

		}

		#{$self}__row {

			align-items: flex-start;

			&::before {

				top: -(map-deep-get($token-spacer-unit-map, "16"));
				bottom: 0;

			}

			&:first-of-type {

				&::before {
					top: map-deep-get($token-spacer-unit-map, "16");
				}

			}

			&:last-of-type {

				&::before {
					top: 0;
					bottom: auto;
					height: map-deep-get($token-spacer-unit-map, "16");
				}

			}

		}

	}
	
	&.-noVerticalSpacing {
		
		> * + * {margin-top: 0}
		
	}

	&.-noConnector, // @TODO remove this class after replacing it with seconda one
	&.-itemInteraction {

		#{$self}__row {

			border-radius: map-deep-get($token-radius-map, "16");

			&:hover {

				@media (hover: hover) {

					@include custom-prop-fallback("background-color", "sys-color-elevation-surface-sunken");

				}

			}

		}

	}

	/* random parent element */
	/* 
	*
	*   Syntax : .randomParentElt & {}
	*
	*/

	/* Pseudo Classes */

	&:hover {
		@media (hover: hover) {

		}
	}

	&:focus {
	}

	&:active {
	}

	&:focus,
	&:active {
	}

}