/* variables specific to current element */

$audyo-player-inset-mobile:  map-deep-get($token-spacer-inset-map, "md");
$audyo-player-inset-desktop:  map-deep-get($token-spacer-inset-map, "lg");
$audyo-player-meta-offset-mobile: $audyo-player-inset-mobile + $icon-circle-regular-dimensions-global + map-deep-get($token-spacer-inline-map, "md");
$audyo-player-meta-offset-desktop: $audyo-player-inset-desktop + $icon-circle-regular-dimensions-global + map-deep-get($token-spacer-inline-map, "md");

.#{$namespace}audyoPlayer {

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

	$self: &;

	/* properties of current element  + media queries */
	@include custom-prop-fallback("background-color", "sys-color-elevation-surface-flat");
	padding: $audyo-player-inset-mobile;
	display: flex;
	align-items: center;
	border-radius: map-deep-get($token-radius-map, "48");
	position: relative;
	z-index: z("zero");

	@include media-breakpoint-up("lg") {
		padding: $audyo-player-inset-desktop;
	}

	/* Pseudo Elements */

	&::before,
	&::after {
		content: "";
		position: absolute;
		z-index: z("zero");
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: inherit;
		transition: opacity 0.15s linear;
		pointer-events: none;

	}

	&::before {

		box-shadow: map-deep-get($token-shadow-map, "active");

	}

	&::after {

		box-shadow: map-deep-get($token-shadow-map, "detail");
		opacity: 0;

	}

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

	// audyoPlayer__childElement
	//@include linear-gradient-to-right($primary, 0%, $primary-variation, 100%);

	// apxmultimedia-audyo__control-play
	&__controls {

		margin-right: map-deep-get($token-spacer-inline-map, "md");
		@extend .#{$namespace}icon;
		@extend .#{$namespace}iconBtn;
		@extend .-iconBtnBase;
		@extend .-iconBtnSecondary;

		@extend .stretched-link;

	}

	&__controlPlay {

		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;

	}

	// apxmultimedia-audyo__play-segment
	&__playSegment {

		position: absolute;
		width: 2px;
		height: 16px;

		border-radius: 40px;

		top: 50%;
		transform: translateY(-50%);
		left: 12px;

		transition: all 150ms linear;

		background-color: currentColor;

		&:nth-child(2),
		&:nth-child(3) {

			height: 16px;
			left: 18px;

		}

		&:nth-child(2) {
			transform: rotate(-55deg);
			top:6px;
		}

		&:nth-child(3) {
			transform: rotate(55deg);
			top:14px;
		}

	}

	&__progressBars{

		width: 100%;
		height: 100%;

		position: absolute;
		z-index: z("negative");
		top: 0;
		left: 0;
		border-radius: inherit;
		overflow: hidden;

	}

	&__meta {

		position: absolute;
		top: 0;
		left: $audyo-player-meta-offset-mobile;
		bottom: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;

		@include media-breakpoint-up("lg") {
			left: $audyo-player-meta-offset-desktop;
		}

	}

	&__barsWrap{

		height: inherit;

	}

	&__barPlaying,
	&__barLoading {

		position: absolute;
		left: 0;
		bottom: 0;
		height: map-deep-get($token-sizes-unit-map, "4");
		border-radius: map-deep-get($token-radius-map, "4");

	}

	&__barPlaying {

		transition : width 20ms linear;
		@include custom-prop-fallback("background-color", "sys-color-background-secondary-100");

	}

	//apxmultimedia-audyo__bar-loading
	&__barLoading{

		transition : width 50ms linear;
		z-index: z("negative");
		@include custom-prop-fallback("background-color", "sys-color-background-secondary-30");

	}

	&__barSeeker{

		display: none;

		position: absolute;
		top: 0;
		bottom: 0;
		left: map-deep-get($token-spacer-inset-map, "xl");
		width: $border-width*2;

		z-index: z("low");

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

	}

	//apxmultimedia-audyo__times
	&__times {

		color: $secondary;
		margin-left: auto;
		display: flex;
		align-items: center;
		@extend %textHelper;
		font-weight: map-deep-get($token-font-weight-map, "semi-bold");
		gap: map-deep-get($token-spacer-unit-map, "2");
		padding: map-deep-get($token-spacer-inset-map, "xs");
		border-radius: map-deep-get($token-radius-map, "20");
		@include custom-prop-fallback("background-color", "sys-color-elevation-surface-flat");

	}

	&__timePlayed,
	&__timeDuration {

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

	}

	&__timePlayed,
	&__timeSeparator {

		display: none;

	}

	&__timeSeparator {

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

	}

	&__title {

		@include fluid-type($min_width, $max_width, $font-size-lg-min, $font-size-lg-max);
		font-weight: map-deep-get($token-font-weight-map, "semi-bold");

	}

	&__description {

		font-size: map-deep-get($token-font-size-map,"body","s");

	}


	/* modifiers */

	// audyoPlayer -playing
	&.-playing {

		#{$self}__meta {

			display: none;

		}

		#{$self}__playSegment{

			&:nth-child(2),
			&:nth-child(3) {

				transform: rotate(0);
				top: 10px;
				left: 22px;
				height: 8px;

			}

			&:nth-child(3) {

				top: 18px;

			}

		}

	}

	&.-started,
	&.-playing {

		#{$self}__controls {

			&::after {

				content: none;

			}

		}

		@media (hover: hover) {

			&:hover {

				#{$self}__barSeeker {

					display: block;

				}

			}

		}

		#{$self}__timeDuration {

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

		}

		#{$self}__timePlayed,
		#{$self}__timeSeparator {

			display: inline;

		}

	}

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

	/* Pseudo Classes */

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

			&::before {
				opacity: 0;
			}

			&::after {
				opacity: 1;
			}

		}
	}

	&:focus {
	}

	&:active {
	}

	&:focus,
	&:active {
	}

}