/* variables specific to current element */

$element-specific-variables: "";

.#{$namespace}monthsPicker {

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

	$self: &;

	/* properties of current element  + media queries */

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

	&__body {



	}

	&__inner {

		max-width: 208px;
		display: flex;
		justify-content: center;
		margin: auto;
		position: relative;
		z-index: z("zero");

	}

	// monthsPicker__item
	&__item {

		// follows same logic as parent

		$item: &;
		$item-offset: map-deep-get($token-spacer-grid-map, "xs");

		position: relative;
		padding-bottom: $item-offset;

		&::before {

			content: "";
			opacity: 0;
			position: absolute;
			z-index: z("negative");
			top: 0;
			bottom: $item-offset;
			left: (-(map-deep-get($token-spacer-inset-map, "sm")));
			right:(-(map-deep-get($token-spacer-inset-map, "sm")));
			margin: auto;
			@include custom-prop-fallback("background-color", "comp-button-secondary-background-color");
			border-radius: inherit;

		}

		&:nth-of-type(4n + 1) {

			&::before {

				left: map-deep-get($token-spacer-inline-map, "sm") !important;

			}

		}

		&:nth-of-type(4n + 4) {

			&::before {

				right: map-deep-get($token-spacer-inline-map, "sm") !important;

			}

		}

		&.-isActive,
		&.-noRange {

			border-radius: 50%;

			> * {

				border-color: inherit;
				border-radius: inherit;

			}

		}

		&.-isHovered ~ #{$self}__item {

			&::before {
				opacity: 0;
			}

		}

		&.-isHovered:not(.-isActive) {

			border-top-right-radius: 0 !important;
			border-bottom-right-radius: 0 !important;

			border-top-left-radius: 50% !important;
			border-bottom-left-radius: 50% !important;

			> * {

				border-color: inherit;
				border-radius: inherit;

			}

		}

		&.-isHovered ~ &.-isActive:not(.-noRange) {

			border-top-right-radius: 50% !important;
			border-bottom-right-radius: 50% !important;

			border-top-left-radius: 0 !important;
			border-bottom-left-radius: 0 !important;

			> * {

				border-radius: inherit;

			}

		}

		&.-isActive:not(.-noRange) {

			// follows same logic as base element

			border-top-right-radius: 0 !important;
			border-bottom-right-radius: 0 !important;

			> * {

				border-radius: inherit;


			}

			& ~ .-isActive {

				border-top-right-radius: 50% !important;
				border-bottom-right-radius: 50% !important;

				border-top-left-radius: 0 !important;
				border-bottom-left-radius: 0 !important;

				> * {

					border-radius: inherit;

				}

			}

			& ~ .-isHovered {

				> * {

					border-top-right-radius: 50% !important;
					border-bottom-right-radius: 50% !important;

					border-top-left-radius: 0 !important;
					border-bottom-left-radius: 0 !important;

				}

			}

		}

		&.-noRange {

			&.-isHovered {

				border-radius: 50% !important;

				> * {

					border-radius: inherit;

				}

			}

			~ .-isHovered {

				border-top-right-radius: 50% !important;
				border-bottom-right-radius: 50% !important;

				border-top-left-radius: 0 !important;
				border-bottom-left-radius: 0 !important;

				> * {

					border-radius: inherit;

				}

			}

		}

		#{$self}:has(&.-isActive) {

			#{$self}__item.-isHovered:not(.-noRange) ~ #{$self}__item {

				&::before {

					opacity: 1;

				}

			}

		}

		&.-isHovered:not(.-noRange) + &.-isActive,
		&.-isHovered:not(.-noRange) ~ #{$self}__item ~ &.-isActive {

			&::before {

				right: map-deep-get($token-spacer-inline-map, "sm");

			}

		}

		&.-isHovered:not(.-noRange) + &.-isActive  ~ #{$self}__item,
		&.-isHovered:not(.-noRange) ~ #{$self}__item ~ &.-isActive  ~ #{$self}__item {

			&::before {

				opacity: 0 !important;

			}

		}

		&.-isActive:not(.-noRange) ~ #{$self}__item {

			&::before {

				opacity: 1;

			}

		}

		&.-isActive + &.-isHovered,
		&.-isActive ~ #{$self}__item ~ &.-isHovered {

			&::before {

				right: map-deep-get($token-spacer-inline-map, "sm");
				border-top-right-radius: 50%;
				border-bottom-right-radius: 50%;
				border-top-left-radius: 0;
				border-bottom-left-radius: 0;

			}

		}

		&.-isActive + &.-isHovered ~ #{$self}__item,
		&.-isActive ~ #{$self}__item ~ &.-isHovered ~ #{$self}__item {

			&::before {

				opacity: 0 !important;

			}

		}

	}


	/* modifiers */

	// timeFrame -rangeLocked
	.-rangeLocked {

		// follows same logic as base element


		#{$self}__item.-isHovered {

			border-top-right-radius: 50% !important;
			border-top-left-radius: 50% !important;
			border-bottom-left-radius: 50% !important;
			border-bottom-right-radius: 50% !important;

			> * {

				border-radius: inherit;

			}

			& ~ #{$self}__item::before {

				opacity: 0 !important;

			}

		}

		#{$self}__item#{$self}__item.-isActive {

			border-top-right-radius: 0 !important;
			border-bottom-right-radius: 0 !important;
			border-top-left-radius: 50% !important;
			border-bottom-left-radius: 50% !important;

			> * {

				border-radius: inherit;

			}

			& ~ .-isActive {

				border-top-right-radius: 50% !important;
				border-bottom-right-radius: 50% !important;
				border-top-left-radius: 0 !important;
				border-bottom-left-radius: 0 !important;

				> * {

					border-radius: inherit;

				}

			}

		}

		#{$self}__item.-isActive + #{$self}__item.-isHovered:not(.-isActive),
		#{$self}__item.-isActive ~ #{$self}__item ~ #{$self}__item.-isHovered:not(.-isActive) {

			&::before {

				right: (-(map-deep-get($token-spacer-inline-map, "sm")));
				border-top-right-radius: 0;
				border-bottom-right-radius: 0;
				border-top-left-radius: 0;
				border-bottom-left-radius: 0;

			}

		}

		#{$self}__item.-isActive:not(.-noRange),
		#{$self}__item.-isActive:not(.-noRange) ~ #{$self}__item:not(.-isActive) {

			&::before {

				opacity: 1 !important;

			}

		}

		#{$self}__item.-isActive:not(.-noRange) ~ #{$self}__item:not(.-isActive) {

			border-radius: 0 !important;

			> * {

				border-radius: 50% !important;

			}

		}

		#{$self}__item.-isActive:not(.-noRange) {

			&::before {

				left: map-deep-get($token-spacer-inline-map, "sm");
				right: (-(map-deep-get($token-spacer-inline-map, "sm")));

			}

		}

		#{$self}__item.-isActive:not(.-noRange) + #{$self}__item.-isActive:not(.-noRange),
		#{$self}__item.-isActive:not(.-noRange) ~ #{$self}__item ~ #{$self}__item.-isActive:not(.-noRange) {

			&::before {

				left: (-(map-deep-get($token-spacer-inline-map, "sm")));
				right: map-deep-get($token-spacer-inline-map, "sm");

			}

		}

		#{$self}__item.-isActive:not(.-noRange) + #{$self}__item.-isActive:not(.-noRange) {

			&::before {

				left: (-(map-deep-get($token-spacer-inline-map, "sm"))) !important;
				opacity: 1;

			}

		}

		#{$self}__item.-isActive:not(.-noRange) + #{$self}__item.-isActive:not(.-noRange) ~ #{$self}__item,
		#{$self}__item.-isActive:not(.-noRange) ~ #{$self}__item ~ #{$self}__item.-isActive:not(.-noRange) ~ #{$self}__item {

			&::before {

				opacity: 0 !important;

			}


		}

	}

	.-noRangeLocked {

		#{$self}__item {

			&::before {

				opacity: 0 !important;

			}

		}

	}

	&.-noRange {

		#{$self}__item#{$self}__item {

			&.-isActive,
			&.-isActive + *,
			&.-isActive ~ * {

				&::before {

					content: none !important;

				}

			}
			
			&.-isActive {
				
				> * {

					border-radius: 50%;

				}
				
			}

		}

	}

	&__yearSelect {

		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		height: 100% !important;
		@include custom-prop-fallback("background-color", "comp-dropdown-background-color");
		opacity: 0;
		transition: opacity 0.1s linear !important;
		margin: 0;

		&.show {

			opacity: 1;

		}

	}

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

	/* Pseudo Classes */

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

		}
	}

	&:focus {
	}

	&:active {
	}

	&:focus,
	&:active {
	}

}