/* variables specific to current element */

$circular-completion-dimensions: 112px;
$circular-completion-border-radius: map-deep-get($token-radius-map, "circle");

.#{$namespace}circularCompletion {

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

	$self: &;

	/* properties of current element  + media queries */

	position: relative;
	width: $circular-completion-dimensions;
	height: $circular-completion-dimensions;
	border-radius: $circular-completion-border-radius;

	display: flex;

	/* 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 */

	// circularCompletion__circle
	&__circle {

		// follows same logic as parent

		@include custom-prop-fallback("stroke", "sys-color-border-primary-subtle");
		stroke-width: $border-width * 2;
		transform-origin: center center;

	}

	&__inner,
	&__circleWrapper {

		width: 100%;
		height: 100%;

	}

	&__progress {

		transform: rotate(-90deg);
		stroke: currentColor;

	}

	&__more {

		@include custom-prop-fallback("color", "sys-color-text-secondary-vivid");
		margin-top: map-deep-get($token-spacer-unit-map, "4");
		padding: 0 map-deep-get($token-spacer-unit-map, "16");
		text-align: center;

	}

	&__img {

		width: 80px;
		height: 80px;
		border-radius: $circular-completion-border-radius;
		object-fit: cover;

	}

	&__complete {

		@include custom-prop-fallback("color", "sys-color-background-accent-100");

	}

	&__inner,
	&__circleWrapper,
	&__img,
	&__complete {

		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);

	}
	
	&__dropdown {

		align-self: flex-start;
		margin-left: auto;
		z-index: z("medium"); // z-index works on position: static here because of the flex context DO NOT REMOVE

		@media (hover: hover) {

			opacity: 0;

		}

	}

	&__link {

		border-radius: $circular-completion-border-radius;

		&::after {

			content: "";
			position: absolute;
			top: $border-width*2;
			right: $border-width*2;
			bottom: $border-width*2;
			left: $border-width*2;
			border: $border-width*2 dashed;
			@include custom-prop-fallback("border-color", "sys-color-border-primary-moderate");
			border-radius: $circular-completion-border-radius;

		}

	}


	/* modifiers */

	// circularCompletion -altStyle
	&.altStyle {

		// follows same logic as base element

	}

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

	/* Pseudo Classes */

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

			#{$self}__dropdown {

				opacity: 1;

			}

			#{$self}__link {

				&::after {
					@include custom-prop-fallback("border-color", "sys-color-text-secondary-vivid");
				}

			}

		}
	}

	&:focus {
	}

	&:active {
	}

	&:focus,
	&:active {
	}

}