/*!
 * Copyright 2024 Adobe. All rights reserved.
 *
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

.spectrum-CoachIndicator {
	--spectrum-coach-indicator-ring-border-size: var(--spectrum-border-width-200);
	--spectrum-coach-indicator-sizing-multiple: 3;
	--spectrum-coach-indicator-ring-diameter-size: var(--mod-coach-indicator-ring-diameter, var(--spectrum-coach-indicator-ring-diameter));

	--spectrum-coach-indicator-min-inline-size: calc(var(--spectrum-coach-indicator-ring-diameter-size) * var(--spectrum-coach-indicator-sizing-multiple));
	--spectrum-coach-indicator-min-block-size: calc(var(--spectrum-coach-indicator-ring-diameter-size) * var(--spectrum-coach-indicator-sizing-multiple));

	--spectrum-coach-indicator-inline-size: var(--mod-coach-indicator-inline-size, var(--spectrum-coach-indicator-min-inline-size));
	--spectrum-coach-indicator-block-size: var(--mod-coach-indicator-block-size, var(--spectrum-coach-indicator-min-block-size));

	--spectrum-coach-animation-indicator-ring-duration: var(--spectrum-animation-duration-6000);
	--spectrum-coach-indicator-animation-keyframe-scale-initial: 1;
	--spectrum-coach-indicator-animation-ring-inner-delay-multiple: var(--mod-coach-indicator-inner-animation-delay-multiple, -0.5);

	&.spectrum-CoachIndicator--quiet {
		--spectrum-coach-indicator-animation-keyframe-scale-initial: 0.8;
		--spectrum-coach-indicator-sizing-multiple: 2.75;
		--spectrum-coach-indicator-ring-diameter-size: var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter));
		--spectrum-coach-indicator-animation-ring-inner-delay-multiple: var(--mod-coach-indicator-quiet-animation-ring-inner-delay-multiple, -0.33);
	}

	/* @deprecated .spectrum-CoachIndicator--light */
	&.spectrum-CoachIndicator--light {
		/* @deprecated --mod-coach-indicator-ring-light-color, use --mod-coach-indicator-ring-default-color instead */
		--spectrum-coach-indicator-ring-default-color: var(--mod-coach-indicator-ring-light-color, var(--spectrum-white));
	}

	/* @deprecated .spectrum-CoachIndicator--dark */
	&.spectrum-CoachIndicator--dark {
		/* @deprecated --mod-coach-indicator-ring-dark-color, use --mod-coach-indicator-ring-default-color instead */
		--spectrum-coach-indicator-ring-default-color: var(--mod-coach-indicator-ring-dark-color, var(--spectrum-black));
	}

	&.spectrum-CoachIndicator--staticWhite {
		--spectrum-coach-indicator-ring-default-color: var(--spectrum-white);
	}

	&.spectrum-CoachIndicator--staticBlack {
		--spectrum-coach-indicator-ring-default-color: var(--spectrum-black);
	}

	position: relative;
	margin: var(--mod-coach-indicator-gap, var(--spectrum-coach-indicator-gap));

	min-inline-size: var(--mod-coach-indicator-min-inline-size, var(--spectrum-coach-indicator-min-inline-size));
	min-block-size: var(--mod-coach-indicator-min-block-size, var(--spectrum-coach-indicator-min-block-size));

	inline-size: var(--spectrum-coach-indicator-inline-size);
	block-size: var(--spectrum-coach-indicator-block-size);
}

.spectrum-CoachIndicator-ring {
	display: block;
	position: absolute;

	border-style: solid;
	border-width: var(--mod-coach-indicator-ring-border-size, var(--spectrum-coach-indicator-ring-border-size));
	border-radius: 50%;
	border-color: var(--mod-coach-indicator-ring-default-color, var(--spectrum-coach-indicator-ring-default-color));

	inset-block-start: var(--mod-coach-indicator-top, calc(var(--spectrum-coach-indicator-block-size) / 3 - var(--spectrum-coach-indicator-ring-border-size)));
	inset-inline-start: var(--mod-coach-indicator-left, calc(var(--spectrum-coach-indicator-inline-size) / 3 - var(--spectrum-coach-indicator-ring-border-size)));

	inline-size: var(--mod-coach-indicator-ring-inline-size, var(--spectrum-coach-indicator-ring-diameter-size));
	block-size: var(--mod-coach-indicator-ring-block-size, var(--spectrum-coach-indicator-ring-diameter-size));
	animation: var(--mod-coach-indicator-animation-name, pulse) var(--mod-coach-animation-indicator-ring-duration, var(--spectrum-coach-animation-indicator-ring-duration)) linear infinite;

	&:nth-child(1) {
		animation-delay: calc(var(--mod-coach-animation-indicator-ring-duration, var(--spectrum-coach-animation-indicator-ring-duration)) * var(--spectrum-coach-indicator-animation-ring-inner-delay-multiple));
	}

	&:nth-child(2) {
		animation-delay: calc(var(--mod-coach-animation-indicator-ring-duration, var(--spectrum-coach-animation-indicator-ring-duration)) * var(--mod-coach-animation-indicator-ring-center-delay-multiple, -0.66));
	}

	&:nth-child(3) {
		animation-delay: calc(var(--mod-coach-animation-indicator-ring-duration, var(--spectrum-coach-animation-indicator-ring-duration)) * var(--mod-coach-animation-indicator-ring-outer-delay-multiple, -1));
	}
}

@media (prefers-reduced-motion: reduce) {
	.spectrum-CoachIndicator-ring {
		animation: none;
	}
}

@keyframes pulse {
	0% {
		transform: scale(var(--spectrum-coach-indicator-animation-keyframe-scale-initial));
		opacity: 0;
	}

	50% {
		transform: scale(1.5);
		opacity: 1;
	}

	100% {
		transform: scale(2);
		opacity: 0;
	}
}
