/*!
 * 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-StatusLight,
.spectrum-StatusLight--sizeM {
	--spectrum-statuslight-height: var(--spectrum-component-height-100);
	--spectrum-statuslight-dot-size: var(--spectrum-status-light-dot-size-medium);

	--spectrum-statuslight-font-size: var(--spectrum-font-size-100);

	--spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-100);
	--spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-medium);
	--spectrum-statuslight-spacing-top-to-label: var(--spectrum-component-top-to-text-100);
	--spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-100);
}

.spectrum-StatusLight--sizeS {
	--spectrum-statuslight-height: var(--spectrum-component-height-75);
	--spectrum-statuslight-dot-size: var(--spectrum-status-light-dot-size-small);

	--spectrum-statuslight-font-size: var(--spectrum-font-size-75);

	--spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-75);
	--spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-small);
	--spectrum-statuslight-spacing-top-to-label: var(--spectrum-component-top-to-text-75);
	--spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-75);
}

.spectrum-StatusLight--sizeL {
	--spectrum-statuslight-height: var(--spectrum-component-height-200);
	--spectrum-statuslight-dot-size: var(--spectrum-status-light-dot-size-large);

	--spectrum-statuslight-font-size: var(--spectrum-font-size-200);

	--spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-200);
	--spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-large);
	--spectrum-statuslight-spacing-top-to-label: var(--spectrum-component-top-to-text-200);
	--spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-200);
}

.spectrum-StatusLight--sizeXL {
	--spectrum-statuslight-height: var(--spectrum-component-height-300);
	--spectrum-statuslight-dot-size: var(--spectrum-status-light-dot-size-extra-large);

	--spectrum-statuslight-font-size: var(--spectrum-font-size-300);

	--spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-300);
	--spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-extra-large);
	--spectrum-statuslight-spacing-top-to-label: var(--spectrum-component-top-to-text-300);
	--spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-300);
}

.spectrum-StatusLight {
	--spectrum-statuslight-corner-radius: 50%;
	--spectrum-statuslight-font-weight: 400;
	--spectrum-statuslight-border-width: var(--spectrum-border-width-100);

	--spectrum-statuslight-line-height: var(--spectrum-line-height-100);
	--spectrum-statuslight-line-height-cjk: var(--spectrum-cjk-line-height-100);

	--spectrum-statuslight-content-color-default: var(--spectrum-neutral-content-color-default);
	--spectrum-statuslight-subdued-content-color-default: var(--spectrum-neutral-subdued-content-color-default);
	--spectrum-statuslight-semantic-neutral-color: var(--spectrum-neutral-visual-color);
	--spectrum-statuslight-semantic-accent-color: var(--spectrum-accent-visual-color);
	--spectrum-statuslight-semantic-negative-color: var(--spectrum-negative-visual-color);
	--spectrum-statuslight-semantic-info-color: var(--spectrum-informative-visual-color);
	--spectrum-statuslight-semantic-notice-color: var(--spectrum-notice-visual-color);
	--spectrum-statuslight-semantic-positive-color: var(--spectrum-positive-visual-color);
	--spectrum-statuslight-nonsemantic-gray-color: var(--spectrum-gray-visual-color);
	--spectrum-statuslight-nonsemantic-red-color: var(--spectrum-red-visual-color);
	--spectrum-statuslight-nonsemantic-orange-color: var(--spectrum-orange-visual-color);
	--spectrum-statuslight-nonsemantic-yellow-color: var(--spectrum-yellow-visual-color);
	--spectrum-statuslight-nonsemantic-chartreuse-color: var(--spectrum-chartreuse-visual-color);
	--spectrum-statuslight-nonsemantic-celery-color: var(--spectrum-celery-visual-color);
	--spectrum-statuslight-nonsemantic-green-color: var(--spectrum-green-visual-color);
	--spectrum-statuslight-nonsemantic-seafoam-color: var(--spectrum-seafoam-visual-color);
	--spectrum-statuslight-nonsemantic-cyan-color: var(--spectrum-cyan-visual-color);
	--spectrum-statuslight-nonsemantic-blue-color: var(--spectrum-blue-visual-color);
	--spectrum-statuslight-nonsemantic-indigo-color: var(--spectrum-indigo-visual-color);
	--spectrum-statuslight-nonsemantic-purple-color: var(--spectrum-purple-visual-color);
	--spectrum-statuslight-nonsemantic-fuchsia-color: var(--spectrum-fuchsia-visual-color);
	--spectrum-statuslight-nonsemantic-magenta-color: var(--spectrum-magenta-visual-color);

	display: flex;
	flex-direction: row;
	align-items: flex-start;

	min-block-size: var(--mod-statuslight-height, var(--spectrum-statuslight-height));

	padding-block-start: var(--mod-statuslight-spacing-top-to-label, var(--spectrum-statuslight-spacing-top-to-label));
	padding-block-end: var(--mod-statuslight-spacing-bottom-to-label, var(--spectrum-statuslight-spacing-bottom-to-label));
	padding-inline: 0;
	box-sizing: border-box;

	font-size: var(--mod-statuslight-font-size, var(--spectrum-statuslight-font-size));
	font-weight: var(--mod-statuslight-font-weight, var(--spectrum-statuslight-font-weight));

	line-height: var(--mod-statuslight-line-height, var(--spectrum-statuslight-line-height));

	color: var(--highcontrast-statuslight-content-color-default, var(--mod-statuslight-content-color-default, var(--spectrum-statuslight-content-color-default)));

	&:lang(ja),
	&:lang(zh),
	&:lang(ko) {
		line-height: var(--mod-statuslight-line-height-cjk, var(--spectrum-statuslight-line-height-cjk));
	}

	/* Dot */
	&::before {
		--spectrum-statuslight-spacing-computed-top-to-dot: calc(var(--mod-statuslight-spacing-top-to-dot, var(--spectrum-statuslight-spacing-top-to-dot)) - var(--mod-statuslight-spacing-top-to-label, var(--spectrum-statuslight-spacing-top-to-label)));

		content: "";
		flex-grow: 0;
		flex-shrink: 0;
		display: inline-block;
		inline-size: var(--mod-statuslight-dot-size, var(--spectrum-statuslight-dot-size));
		block-size: var(--mod-statuslight-dot-size, var(--spectrum-statuslight-dot-size));
		border-radius: var(--mod-statuslight-corner-radius, var(--spectrum-statuslight-corner-radius));

		margin-block-start: var(--spectrum-statuslight-spacing-computed-top-to-dot);
		margin-inline-end: var(--mod-statuslight-spacing-dot-to-label, var(--spectrum-statuslight-spacing-dot-to-label));
	}
}

/* Semantic Colors */
.spectrum-StatusLight--neutral {
	font-style: italic;

	color: var(--highcontrast-statuslight-subdued-content-color-default, var(--mod-statuslight-subdued-content-color-default, var(--spectrum-statuslight-subdued-content-color-default)));

	&::before {
		background-color: var(--mod-statuslight-semantic-neutral-color, var(--spectrum-statuslight-semantic-neutral-color));
	}
}

.spectrum-StatusLight--accent::before {
	background-color: var(--mod-statuslight-semantic-accent-color, var(--spectrum-statuslight-semantic-accent-color));
}

.spectrum-StatusLight--info::before {
	background-color: var(--mod-statuslight-semantic-info-color, var(--spectrum-statuslight-semantic-info-color));
}

.spectrum-StatusLight--negative::before {
	background-color: var(--mod-statuslight-semantic-negative-color, var(--spectrum-statuslight-semantic-negative-color));
}

.spectrum-StatusLight--notice::before {
	background-color: var(--mod-statuslight-semantic-notice-color, var(--spectrum-statuslight-semantic-notice-color));
}

.spectrum-StatusLight--positive::before {
	background-color: var(--mod-statuslight-semantic-positive-color, var(--spectrum-statuslight-semantic-positive-color));
}

/* Non-Semantic Colors */
.spectrum-StatusLight--gray::before {
	background-color: var(--mod-statuslight-nonsemantic-gray-color, var(--spectrum-statuslight-nonsemantic-gray-color));
}

.spectrum-StatusLight--red::before {
	background-color: var(--mod-statuslight-nonsemantic-red-color, var(--spectrum-statuslight-nonsemantic-red-color));
}

.spectrum-StatusLight--orange::before {
	background-color: var(--mod-statuslight-nonsemantic-orange-color, var(--spectrum-statuslight-nonsemantic-orange-color));
}

.spectrum-StatusLight--yellow::before {
	background-color: var(--mod-statuslight-nonsemantic-yellow-color, var(--spectrum-statuslight-nonsemantic-yellow-color));
}

.spectrum-StatusLight--chartreuse::before {
	background-color: var(--mod-statuslight-nonsemantic-chartreuse-color, var(--spectrum-statuslight-nonsemantic-chartreuse-color));
}

.spectrum-StatusLight--celery::before {
	background-color: var(--mod-statuslight-nonsemantic-celery-color, var(--spectrum-statuslight-nonsemantic-celery-color));
}

.spectrum-StatusLight--green::before {
	background-color: var(--mod-statuslight-nonsemantic-green-color, var(--spectrum-statuslight-nonsemantic-green-color));
}

.spectrum-StatusLight--seafoam::before {
	background-color: var(--mod-statuslight-nonsemantic-seafoam-color, var(--spectrum-statuslight-nonsemantic-seafoam-color));
}

.spectrum-StatusLight--cyan::before {
	background-color: var(--mod-statuslight-nonsemantic-cyan-color, var(--spectrum-statuslight-nonsemantic-cyan-color));
}

.spectrum-StatusLight--blue::before {
	background-color: var(--mod-statuslight-nonsemantic-blue-color, var(--spectrum-statuslight-nonsemantic-blue-color));
}

.spectrum-StatusLight--indigo::before {
	background-color: var(--mod-statuslight-nonsemantic-indigo-color, var(--spectrum-statuslight-nonsemantic-indigo-color));
}

.spectrum-StatusLight--purple::before {
	background-color: var(--mod-statuslight-nonsemantic-purple-color, var(--spectrum-statuslight-nonsemantic-purple-color));
}

.spectrum-StatusLight--fuchsia::before {
	background-color: var(--mod-statuslight-nonsemantic-fuchsia-color, var(--spectrum-statuslight-nonsemantic-fuchsia-color));
}

.spectrum-StatusLight--magenta::before {
	background-color: var(--mod-statuslight-nonsemantic-magenta-color, var(--spectrum-statuslight-nonsemantic-magenta-color));
}

@media (forced-colors: active) {
	.spectrum-StatusLight {
		--highcontrast-statuslight-content-color-default: CanvasText;
		--highcontrast-statuslight-subdued-content-color-default: CanvasText;

		forced-color-adjust: none;

		/* Dot */
		&::before {
			forced-color-adjust: none;
			border: var(--mod-statuslight-border-width, var(--spectrum-statuslight-border-width)) solid ButtonText;
		}
	}
}
