/*!
 * 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-Badge {
	/* badge styling for all t-shirt sizes and all themes */
	--spectrum-badge-corner-radius: var(--spectrum-corner-radius-100);

	/* label text styles for all t-shirt sizes and all themes */
	--spectrum-badge-line-height: var(--spectrum-line-height-100);
	--spectrum-badge-line-height-cjk: var(--spectrum-cjk-line-height-100);

	/* text and icon color default white for all t-shirt sizes and all themes */
	--spectrum-badge-label-icon-color: var(--spectrum-white);

	/* background color default for all t-shirt sizes and all themes */
	--spectrum-badge-background-color-default: var(--spectrum-neutral-subdued-background-color-default);

	/* semantic background colors for all t-shirt sizes and all themes */
	--spectrum-badge-background-color-accent: var(--spectrum-accent-background-color-default);
	--spectrum-badge-background-color-informative: var(--spectrum-informative-background-color-default);
	--spectrum-badge-background-color-negative: var(--spectrum-negative-background-color-default);
	--spectrum-badge-background-color-positive: var(--spectrum-positive-background-color-default);
	--spectrum-badge-background-color-notice: var(--spectrum-notice-background-color-default);

	/* non-semantic background colors */
	--spectrum-badge-background-color-gray: var(--spectrum-gray-background-color-default);
	--spectrum-badge-background-color-red: var(--spectrum-red-background-color-default);
	--spectrum-badge-background-color-orange: var(--spectrum-orange-background-color-default);
	--spectrum-badge-background-color-yellow: var(--spectrum-yellow-background-color-default);
	--spectrum-badge-background-color-chartreuse: var(--spectrum-chartreuse-background-color-default);
	--spectrum-badge-background-color-celery: var(--spectrum-celery-background-color-default);
	--spectrum-badge-background-color-green: var(--spectrum-green-background-color-default);
	--spectrum-badge-background-color-seafoam: var(--spectrum-seafoam-background-color-default);
	--spectrum-badge-background-color-cyan: var(--spectrum-cyan-background-color-default);
	--spectrum-badge-background-color-blue: var(--spectrum-blue-background-color-default);
	--spectrum-badge-background-color-indigo: var(--spectrum-indigo-background-color-default);
	--spectrum-badge-background-color-purple: var(--spectrum-purple-background-color-default);
	--spectrum-badge-background-color-fuchsia: var(--spectrum-fuchsia-background-color-default);
	--spectrum-badge-background-color-magenta: var(--spectrum-magenta-background-color-default);

	/*** DEFAULT STYLE fallbacks if no t-shirt size - uses Medium t-shirt styles ***/
	/* badge height - fallback if no t-shirt size */
	--spectrum-badge-height: var(--spectrum-component-height-100);

	/* label font size - fallback if no t-shirt size */
	--spectrum-badge-font-size: var(--spectrum-font-size-100);

	/* label spacing - fallback if no t-shirt size */
	--spectrum-badge-label-spacing-vertical-top: var(--spectrum-component-top-to-text-100);
	--spectrum-badge-label-spacing-vertical-bottom: var(--spectrum-component-bottom-to-text-100);
	--spectrum-badge-label-spacing-horizontal: var(--spectrum-component-edge-to-text-100);

	/* icon size - fallback if no t-shirt size */
	--spectrum-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-100);

	/* icon spacing - fallback if no t-shirt size */
	--spectrum-badge-icon-text-spacing: var(--spectrum-text-to-visual-100);
	--spectrum-badge-icon-spacing-horizontal: var(--spectrum-component-edge-to-visual-100);
	--spectrum-badge-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-100);
	--spectrum-badge-icon-only-spacing-horizontal: var(--spectrum-component-edge-to-visual-only-100);

	--highcontrast-badge-border-color: CanvasText;
}

/* text and icon color is black for these background colors */
.spectrum-Badge--orange,
.spectrum-Badge--yellow,
.spectrum-Badge--chartreuse,
.spectrum-Badge--celery {
	--spectrum-badge-label-icon-color: var(--spectrum-black);
}

/* dark theme all non-semantic colors are black */
.spectrum-Badge--gray,
.spectrum-Badge--red,
.spectrum-Badge--green,
.spectrum-Badge--seafoam,
.spectrum-Badge--cyan,
.spectrum-Badge--blue,
.spectrum-Badge--indigo,
.spectrum-Badge--purple,
.spectrum-Badge--fuchsia,
.spectrum-Badge--magenta {
	--spectrum-badge-label-icon-color: var(--spectrum-badge-label-icon-color-primary);
}

.spectrum-Badge--sizeS {
	--spectrum-badge-height: var(--spectrum-component-height-75);

	/* label */
	--spectrum-badge-font-size: var(--spectrum-font-size-75);
	--spectrum-badge-label-spacing-vertical-top: var(--spectrum-component-top-to-text-75);
	--spectrum-badge-label-spacing-vertical-bottom: var(--spectrum-component-bottom-to-text-75);
	--spectrum-badge-label-spacing-horizontal: var(--spectrum-component-edge-to-text-75);

	/* icon */
	--spectrum-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-75);
	--spectrum-badge-icon-text-spacing: var(--spectrum-text-to-visual-75);
	--spectrum-badge-icon-spacing-horizontal: var(--spectrum-component-edge-to-visual-75);
	--spectrum-badge-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-75);
	--spectrum-badge-icon-only-spacing-horizontal: var(--spectrum-component-edge-to-visual-only-75);
}

.spectrum-Badge--sizeL {
	--spectrum-badge-height: var(--spectrum-component-height-100);

	/* label */
	--spectrum-badge-font-size: var(--spectrum-font-size-200);
	--spectrum-badge-label-spacing-vertical-top: var(--spectrum-component-top-to-text-200);
	--spectrum-badge-label-spacing-vertical-bottom: var(--spectrum-component-bottom-to-text-200);
	--spectrum-badge-label-spacing-horizontal: var(--spectrum-component-edge-to-text-200);

	/* icon */
	--spectrum-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-200);
	--spectrum-badge-icon-text-spacing: var(--spectrum-text-to-visual-200);
	--spectrum-badge-icon-spacing-horizontal: var(--spectrum-component-edge-to-visual-200);
	--spectrum-badge-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-200);
	--spectrum-badge-icon-only-spacing-horizontal: var(--spectrum-component-edge-to-visual-only-200);
}

.spectrum-Badge--sizeXL {
	--spectrum-badge-height: var(--spectrum-component-height-100);

	/* label */
	--spectrum-badge-font-size: var(--spectrum-font-size-300);
	--spectrum-badge-label-spacing-vertical-top: var(--spectrum-component-top-to-text-300);
	--spectrum-badge-label-spacing-vertical-bottom: var(--spectrum-component-bottom-to-text-300);
	--spectrum-badge-label-spacing-horizontal: var(--spectrum-component-edge-to-text-300);

	/* icon */
	--spectrum-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-300);
	--spectrum-badge-icon-text-spacing: var(--spectrum-text-to-visual-300);
	--spectrum-badge-icon-spacing-horizontal: var(--spectrum-component-edge-to-visual-300);
	--spectrum-badge-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-300);
	--spectrum-badge-icon-only-spacing-horizontal: var(--spectrum-component-edge-to-visual-only-300);
}

/* windows high contrast mode */
@media (forced-colors: active) {
	.spectrum-Badge {
		border-color: var(--highcontrast-badge-border-color);
	}
}

.spectrum-Badge {
	min-block-size: var(--mod-badge-height, var(--spectrum-badge-height));
	inline-size: auto;

	display: inline-flex;
	vertical-align: middle;
	position: relative;

	cursor: default;

	-webkit-font-smoothing: subpixel-antialiased;
	-moz-osx-font-smoothing: auto;

	border-radius: var(--mod-badge-corner-radius, var(--spectrum-badge-corner-radius));
	border: 1px solid transparent;

	background: var(--mod-badge-background-color-default, var(--spectrum-badge-background-color-default));
	color: var(--mod-badge-label-icon-color, var(--spectrum-badge-label-icon-color));
}

/* background color variants */
.spectrum-Badge--neutral {
	background: var(--mod-badge-background-color-default, var(--spectrum-badge-background-color-default));
}

.spectrum-Badge--accent {
	background: var(--mod-badge-background-color-accent, var(--spectrum-badge-background-color-accent));
}

.spectrum-Badge--informative {
	background: var(--mod-badge-background-color-informative, var(--spectrum-badge-background-color-informative));
}

.spectrum-Badge--negative {
	background: var(--mod-badge-background-color-negative, var(--spectrum-badge-background-color-negative));
}

.spectrum-Badge--positive {
	background: var(--mod-badge-background-color-positive, var(--spectrum-badge-background-color-positive));
}

/* New in S2, not supporting in Foundations yet! */
.spectrum-Badge--notice {
	background: var(--mod-badge-background-color-notice, var(--spectrum-badge-background-color-notice));
}

/* non-semantic colors */
.spectrum-Badge--gray {
	background: var(--mod-badge-background-color-gray, var(--spectrum-badge-background-color-gray));
}

.spectrum-Badge--red {
	background: var(--mod-badge-background-color-red, var(--spectrum-badge-background-color-red));
}

.spectrum-Badge--orange {
	background: var(--mod-badge-background-color-orange, var(--spectrum-badge-background-color-orange));
}

.spectrum-Badge--yellow {
	background: var(--mod-badge-background-color-yellow, var(--spectrum-badge-background-color-yellow));
}

.spectrum-Badge--chartreuse {
	background: var(--mod-badge-background-color-chartreuse, var(--spectrum-badge-background-color-chartreuse));
}

.spectrum-Badge--celery {
	background: var(--mod-badge-background-color-celery, var(--spectrum-badge-background-color-celery));
}

.spectrum-Badge--green {
	background: var(--mod-badge-background-color-green, var(--spectrum-badge-background-color-green));
}

.spectrum-Badge--seafoam {
	background: var(--mod-badge-background-color-seafoam, var(--spectrum-badge-background-color-seafoam));
}

.spectrum-Badge--cyan {
	background: var(--mod-badge-background-color-cyan, var(--spectrum-badge-background-color-cyan));
}

.spectrum-Badge--blue {
	background: var(--mod-badge-background-color-blue, var(--spectrum-badge-background-color-blue));
}

.spectrum-Badge--indigo {
	background: var(--mod-badge-background-color-indigo, var(--spectrum-badge-background-color-indigo));
}

.spectrum-Badge--purple {
	background: var(--mod-badge-background-color-purple, var(--spectrum-badge-background-color-purple));
}

.spectrum-Badge--fuchsia {
	background: var(--mod-badge-background-color-fuchsia, var(--spectrum-badge-background-color-fuchsia));
}

.spectrum-Badge--magenta {
	background: var(--mod-badge-background-color-magenta, var(--spectrum-badge-background-color-magenta));
}

/* fixed position variants with border radius 0 on the fixed edge of the component */
.spectrum-Badge--fixed-inline-start {
	border-start-start-radius: 0;
	border-end-start-radius: 0;
}

.spectrum-Badge--fixed-inline-end {
	border-start-end-radius: 0;
	border-end-end-radius: 0;
}

.spectrum-Badge--fixed-block-start {
	border-start-start-radius: 0;
	border-start-end-radius: 0;
}

.spectrum-Badge--fixed-block-end {
	border-end-start-radius: 0;
	border-end-end-radius: 0;
}

/* label */
.spectrum-Badge-label {
	font-size: var(--mod-badge-font-size, var(--spectrum-badge-font-size));
	line-height: var(--mod-badge-line-height, var(--spectrum-badge-line-height));

	padding-inline-end: var(--mod-badge-label-spacing-horizontal, var(--spectrum-badge-label-spacing-horizontal));
	padding-inline-start: var(--mod-badge-label-spacing-horizontal, var(--spectrum-badge-label-spacing-horizontal));
	padding-block-start: var(--mod-badge-label-spacing-vertical-top, var(--spectrum-badge-label-spacing-vertical-top));
	padding-block-end: var(--mod-badge-label-spacing-vertical-bottom, var(--spectrum-badge-label-spacing-vertical-bottom));

	color: var(--mod-badge-label-icon-color, var(--spectrum-badge-label-icon-color));

	/* cjk language support */
	&:lang(ja),
	&:lang(zh),
	&:lang(ko) {
		line-height: var(--mod-badge-line-height-cjk, var(--spectrum-badge-line-height-cjk));
	}

	/* remove left padding from label if preceded by an icon */
	.spectrum-Badge-icon + & {
		padding-inline-start: 0;
	}
}

/* optional icon */
.spectrum-Badge-icon {
	block-size: var(--mod-badge-workflow-icon-size, var(--spectrum-badge-workflow-icon-size));
	inline-size: var(--mod-badge-workflow-icon-size, var(--spectrum-badge-workflow-icon-size));

	/* ensures icon does not shrink when badge width is limited */
	flex: 0 0 var(--mod-badge-workflow-icon-size, var(--spectrum-badge-workflow-icon-size));

	padding-inline-start: var(--mod-badge-icon-spacing-horizontal, var(--spectrum-badge-icon-spacing-horizontal));

	/* icon with label has reduced padding between icon and text */
	padding-inline-end: var(--mod-badge-icon-text-spacing, var(--spectrum-badge-icon-text-spacing));
	padding-block-start: var(--mod-badge-icon-spacing-vertical-top, var(--spectrum-badge-icon-spacing-vertical-top));
	padding-block-end: var(--mod-badge-icon-spacing-vertical-top, var(--spectrum-badge-icon-spacing-vertical-top));

	color: var(--mod-badge-label-icon-color, var(--spectrum-badge-label-icon-color));
}

.spectrum-Badge-icon--no-label {
	/* icon without label has identical padding left and right */
	padding-inline-start: var(--mod-badge-icon-only-spacing-horizontal, var(--spectrum-badge-icon-only-spacing-horizontal));
	padding-inline-end: var(--mod-badge-icon-only-spacing-horizontal, var(--spectrum-badge-icon-only-spacing-horizontal));
}
