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

$timer-transition-timing: 0.25s;
$timer-base-width: map-deep-get($token-sizes-component-map, "timer", "base-width");
$timer-expanded-width: map-deep-get($token-sizes-component-map, "timer", "expanded-width");
$timer-open-clock-dimensions: map-deep-get($token-sizes-component-map, "timer", "active-clock-dimension");

.#{$namespace}timer {

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

	$self: &;

	/* properties of current element  + media queries */
	position: fixed;
	z-index: z("sticky");
	right: $snet-frame-main-horiz-padding-mobile;
	bottom: $snet-frame-main-horiz-padding-mobile;
	width: $timer-base-width;
	border-radius: map-deep-get($token-radius-map, "16");
	@include custom-prop-fallback("background-color", "comp-card-raised-background-color");
	box-shadow: $dropdown-box-shadow;
	display: flex;
	flex-direction: column;
	max-height: calc(100% - #{$snet-frame-main-horiz-padding-desktop-global*2} - #{$snet-frame-nav-topbar-height});
	overflow: hidden;

	transition: width $timer-transition-timing linear;

	@include media-breakpoint-up(lg) {
		right: $snet-frame-main-horiz-padding-desktop;
		bottom: $snet-frame-main-horiz-padding-desktop;
	}

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

	// timer__timeZone
	&__timeZone {

		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		min-height: 0;
		transition: all $timer-transition-timing linear;
		position: relative;

	}

	&__timeZoneFooter {
		margin-top: map-deep-get($token-spacer-unit-map, "32");
	}

	&__title {

		margin-top: auto;
		@include custom-prop-fallback("color", "sys-color-text-neutral-vivid");
		transition: opacity $timer-transition-timing linear;
	}

	&__activeGroup {

		display: none;

	}

	&__btn {

		flex-grow: 1;

	}

	&__header {

		@include spacer-component-inset("md");

	}

	&__collapseToggle {

		position: absolute;
		top: 0;
		left: 0;

		&[aria-expanded="false"] {

			* {

				&::before {

					content: map-deep-get($token-icon-map, "chevronup")

				}

			}

		}

	}

	&__collapse {

		transition: height $timer-transition-timing linear;

	}
	
	&__collapseWrapper {
		@include custom-prop-fallback("background-color", "comp-card-background-color");
		overflow-y: auto;
		border-radius: map-deep-get($token-radius-map, "16");
	}

	&__timeline {

		overflow-y: auto;

	}

	&__timelineHeader {

		padding: map-deep-get($token-spacer-unit-map, "32") map-deep-get($token-spacer-unit-map, "16") map-deep-get($token-spacer-unit-map, "24");
		border-bottom: 1px solid $border-color;

	}

	&__timelineBody {

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

	}

	&__btnSecondary#{$self}__btnSecondary {

		@include custom-prop-fallback("background-color", "sys-color-background-primary-100");
		@include custom-prop-fallback("color", "sys-color-text-neutral-inverse");

		@include hover-focus() {

			@include custom-prop-fallback("background-color", "sys-color-background-primary-120", "true", "true");

		}

	}

	&__clock {

		width: map-deep-get($token-sizes-unit-map, "96");
		height: map-deep-get($token-sizes-unit-map, "96");
		transition: all $timer-transition-timing linear;
		position: relative;

	}

	&__clockTitle {

		position: absolute;
		top: 50%;
		left: 50%;
		bottom: auto;
		transform: translate(-50%,-50%);
		visibility: hidden;
		opacity: 0;
		transition: opacity $timer-transition-timing linear;

	}

	&__circularProgress {

		circle {

			@include custom-prop-fallback("stroke", "sys-color-background-primary-20");

		}

		path {

			@include custom-prop-fallback("stroke", "sys-color-background-highlight-100");
			stroke-width: 1.5;

		}

	}
	
	&__actionMenu {

		margin: map-deep-get($token-spacer-unit-map, "8") 0;

	}


	/* modifiers */
	
	// timer -isActive
	&.-isActive {

		@include gradient-x(map-deep-get($token-color-brand-map, "secondary", "140"), map-deep-get($token-color-brand-map, "secondary", "160"), 40%, 100%);

		#{$self}__title {

			@include custom-prop-fallback("color", "sys-color-text-neutral-inverse");
		}

		#{$self}__circularProgress {

			circle {

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

			}

			path {
				stroke-width: 1.5;
			}

		}

		#{$self}__activeGroup {
			display: flex;
		}

		#{$self}__inactiveGroup {
			display: none;
		}

	}

	&.-isOpen {

		width: $timer-expanded-width;

		#{$self}__title {

			visibility: hidden;
			opacity: 0;

		}

		#{$self}__clockTitle {

			visibility: visible;
			opacity: 1;

		}

		#{$self}__clock {

			width: $timer-open-clock-dimensions;
			height: $timer-open-clock-dimensions;

			transform: translateX(-(math.div($timer-expanded-width, 2) - map-deep-get($token-spacer-unit-map, "16") - (math.div($timer-open-clock-dimensions,2))));

		}

	}

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

	/* Pseudo Classes */

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

		}
	}

	&:focus {
	}

	&:active {
	}

	&:focus,
	&:active {
	}

}