/*!
Copyright 2023 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{
  --system-spectrum-search-border-radius:var(--spectrum-corner-radius-100);
  --system-spectrum-search-edge-to-visual:var(
			--spectrum-component-edge-to-visual-100
		);
  --system-spectrum-search-border-color-default:var(--spectrum-gray-500);
  --system-spectrum-search-border-color-hover:var(--spectrum-gray-600);
  --system-spectrum-search-border-color-focus:var(--spectrum-gray-800);
  --system-spectrum-search-border-color-focus-hover:var(--spectrum-gray-900);
  --system-spectrum-search-border-color-key-focus:var(--spectrum-gray-900);
  --system-spectrum-search-sizes-border-radius:var(--spectrum-corner-radius-100);
  --system-spectrum-search-sizes-edge-to-visual:var(
			--spectrum-component-edge-to-visual-75
		);
  --system-spectrum-search-sizem-border-radius:var(--spectrum-corner-radius-100);
  --system-spectrum-search-sizem-edge-to-visual:var(
			--spectrum-component-edge-to-visual-100
		);
  --system-spectrum-search-sizel-border-radius:var(--spectrum-corner-radius-100);
  --system-spectrum-search-sizel-edge-to-visual:var(
			--spectrum-component-edge-to-visual-200
		);
  --system-spectrum-search-sizexl-border-radius:var(--spectrum-corner-radius-100);
  --system-spectrum-search-sizexl-edge-to-visual:var(
			--spectrum-component-edge-to-visual-300
		);
}

.spectrum--express{
  --system-spectrum-search-border-radius:calc(
			var(--spectrum-component-height-100) / 2
		);
  --system-spectrum-search-edge-to-visual:var(
			--spectrum-component-pill-edge-to-visual-100
		);
  --system-spectrum-search-border-color-default:var(--spectrum-gray-400);
  --system-spectrum-search-border-color-hover:var(--spectrum-gray-500);
  --system-spectrum-search-border-color-focus:var(--spectrum-gray-800);
  --system-spectrum-search-border-color-focus-hover:var(--spectrum-gray-900);
  --system-spectrum-search-border-color-key-focus:var(--spectrum-gray-900);
  --system-spectrum-search-sizes-border-radius:calc(
			var(--spectrum-component-height-75) / 2
		);
  --system-spectrum-search-sizes-edge-to-visual:var(
			--spectrum-component-pill-edge-to-visual-75
		);
  --system-spectrum-search-sizem-border-radius:calc(
			var(--spectrum-component-height-100) / 2
		);
  --system-spectrum-search-sizem-edge-to-visual:var(
			--spectrum-component-pill-edge-to-visual-100
		);
  --system-spectrum-search-sizel-border-radius:calc(
			var(--spectrum-component-height-200) / 2
		);
  --system-spectrum-search-sizel-edge-to-visual:var(
			--spectrum-component-pill-edge-to-visual-200
		);
  --system-spectrum-search-sizexl-border-radius:calc(
			var(--spectrum-component-height-300) / 2
		);
  --system-spectrum-search-sizexl-edge-to-visual:var(
			--spectrum-component-pill-edge-to-visual-300
		);
}

.spectrum-Search{
	--spectrum-search-inline-size:var(--spectrum-field-width);
	--spectrum-search-block-size:var(--spectrum-component-height-100);
	--spectrum-search-button-inline-size:var(--spectrum-search-block-size);
	--spectrum-search-min-inline-size:calc(
		var(--spectrum-search-field-minimum-width-multiplier) *
			var(--spectrum-search-block-size)
	);
	--spectrum-search-icon-size:var(--spectrum-workflow-icon-size-100);

	--spectrum-search-text-to-icon:var(--spectrum-text-to-visual-100);
	--spectrum-search-to-help-text:var(--spectrum-help-text-to-component);
	--spectrum-search-top-to-text:var(--spectrum-component-top-to-text-100);
	--spectrum-search-bottom-to-text:var(
		--spectrum-component-bottom-to-text-100
	);
	--spectrum-search-focus-indicator-thickness:var(
		--spectrum-focus-indicator-thickness
	);
	--spectrum-search-focus-indicator-gap:var(--spectrum-focus-indicator-gap);
	--spectrum-search-focus-indicator-color:var(
		--spectrum-focus-indicator-color
	);
	--spectrum-search-font-family:var(--spectrum-sans-font-family-stack);
	--spectrum-search-font-weight:var(--spectrum-regular-font-weight);
	--spectrum-search-font-style:var(--spectrum-default-font-style);
	--spectrum-search-line-height:var(--spectrum-line-height-100);

	--spectrum-search-color-default:var(
		--spectrum-neutral-content-color-default
	);
	--spectrum-search-color-hover:var(--spectrum-neutral-content-color-hover);
	--spectrum-search-color-focus:var(--spectrum-neutral-content-color-focus);
	--spectrum-search-color-focus-hover:var(
		--spectrum-neutral-content-color-focus-hover
	);
	--spectrum-search-color-key-focus:var(
		--spectrum-neutral-content-color-key-focus
	);
	--spectrum-search-border-width:var(--spectrum-border-width-100);
	--spectrum-search-background-color:var(--spectrum-gray-50);
	--spectrum-search-color-disabled:var(--spectrum-disabled-content-color);
	--spectrum-search-background-color-disabled:var(
		--spectrum-disabled-background-color
	);
	--spectrum-search-border-color-disabled:var(
		--spectrum-disabled-background-color
	);
	--mod-textfield-font-family:var(
		--mod-search-font-family,
		var(--spectrum-search-font-family)
	);
	--mod-textfield-font-weight:var(
		--mod-search-font-weight,
		var(--spectrum-search-font-weight)
	);

	--mod-textfield-corner-radius:var(
		--mod-search-border-radius,
		var(--spectrum-search-border-radius)
	);
	--mod-textfield-border-width:var(
		--mod-search-border-width,
		var(--spectrum-search-border-width)
	);

	--mod-textfield-focus-indicator-gap:var(
		--mod-search-focus-indicator-gap,
		var(--spectrum-search-focus-indicator-gap)
	);
	--mod-textfield-focus-indicator-width:var(
		--mod-search-focus-indicator-thickness,
		var(--spectrum-search-focus-indicator-thickness)
	);
	--mod-textfield-focus-indicator-color:var(
		--mod-search-focus-indicator-color,
		var(--spectrum-search-focus-indicator-color)
	);

	--mod-textfield-text-color-default:var(
		--mod-search-color-default,
		var(--spectrum-search-color-default)
	);
	--mod-textfield-text-color-hover:var(
		--mod-search-color-hover,
		var(--spectrum-search-color-hover)
	);
	--mod-textfield-text-color-focus:var(
		--mod-search-color-focus,
		var(--spectrum-search-color-focus)
	);
	--mod-textfield-text-color-focus-hover:var(
		--mod-search-color-focus-hover,
		var(--spectrum-search-color-focus-hover)
	);
	--mod-textfield-text-color-keyboard-focus:var(
		--mod-search-color-key-focus,
		var(--spectrum-search-color-key-focus)
	);
	--mod-textfield-text-color-disabled:var(
		--mod-search-color-disabled,
		var(--spectrum-search-color-disabled)
	);

	--mod-textfield-border-color:var(
		--mod-search-border-color-default,
		var(--spectrum-search-border-color-default)
	);
	--mod-textfield-border-color-hover:var(
		--mod-search-border-color-hover,
		var(--spectrum-search-border-color-hover)
	);
	--mod-textfield-border-color-focus:var(
		--mod-search-border-color-focus,
		var(--spectrum-search-border-color-focus)
	);
	--mod-textfield-border-color-focus-hover:var(
		--mod-search-border-color-focus-hover,
		var(--spectrum-search-border-color-focus-hover)
	);
	--mod-textfield-border-color-keyboard-focus:var(
		--mod-search-border-color-key-focus,
		var(--spectrum-search-border-color-key-focus)
	);
	--mod-textfield-border-color-disabled:var(
		--mod-search-border-color-disabled,
		var(--spectrum-search-border-color-disabled)
	);

	--mod-textfield-background-color:var(
		--mod-search-background-color,
		var(--spectrum-search-background-color)
	);
	--mod-textfield-background-color-disabled:var(
		--mod-search-background-color-disabled,
		var(--spectrum-search-background-color-disabled)
	);
}

.spectrum-Search--sizeS{
	--spectrum-search-block-size:var(--spectrum-component-height-75);
	--spectrum-search-icon-size:var(--spectrum-workflow-icon-size-75);
	--spectrum-search-text-to-icon:var(--spectrum-text-to-visual-75);
}

.spectrum-Search--sizeL{
	--spectrum-search-block-size:var(--spectrum-component-height-200);
	--spectrum-search-icon-size:var(--spectrum-workflow-icon-size-200);
	--spectrum-search-text-to-icon:var(--spectrum-text-to-visual-200);
}

.spectrum-Search--sizeXL{
	--spectrum-search-block-size:var(--spectrum-component-height-300);
	--spectrum-search-icon-size:var(--spectrum-workflow-icon-size-300);
	--spectrum-search-text-to-icon:var(--spectrum-text-to-visual-300);
}

.spectrum-Search--quiet{
	--spectrum-search-quiet-button-offset:calc(
		(var(--mod-search-block-size, var(--spectrum-search-block-size)) / 2) -
			(
				var(
						--mod-workflow-icon-size-100,
						var(--spectrum-workflow-icon-size-100)
					) / 2
			)
	);
	--spectrum-search-background-color:transparent;
	--spectrum-search-background-color-disabled:transparent;
	--spectrum-search-border-color-disabled:var(
		--spectrum-disabled-border-color
	);
}

.spectrum-Search--quiet.spectrum-Search{
		--spectrum-search-border-radius:0;
		--spectrum-search-edge-to-visual:var(
			--spectrum-field-edge-to-visual-quiet
		);
	}

@media (forced-colors: active){
	.spectrum-Search .spectrum-Search-textfield, .spectrum-Search .spectrum-Search-textfield .spectrum-Search-input{
		--highcontrast-search-color-default:CanvasText;
		--highcontrast-search-color-hover:CanvasText;
		--highcontrast-search-color-focus:CanvasText;
		--highcontrast-search-color-disabled:GrayText;
	}
		.spectrum-Search .spectrum-Search-clearButton .spectrum-ClearButton-fill{
			forced-color-adjust:none;
			background-color:transparent;
		}
}

.spectrum-Search{
	display:inline-block;
	position:relative;
	inline-size:var(
		--mod-search-inline-size,
		var(--spectrum-search-inline-size)
	);
	min-inline-size:var(
		--mod-search-min-inline-size,
		var(--spectrum-search-min-inline-size)
	);
}

.spectrum-Search .spectrum-HelpText{
		margin-block-start:var(
			--mod-search-to-help-text,
			var(--spectrum-search-to-help-text)
		);
	}

.spectrum-Search-clearButton{
	position:absolute;
	inset-inline-end:0;
	inset-block-start:0;
	border-radius:var(
		--mod-search-border-radius,
		var(--spectrum-search-border-radius)
	);
}

.spectrum-Search-clearButton .spectrum-ClearButton-fill{
		border-radius:var(
			--mod-search-border-radius,
			var(--spectrum-search-border-radius)
		);
	}

.spectrum-Search.is-disabled .spectrum-Search-clearButton{
		display:none;
	}

.spectrum-Search-textfield{
	inline-size:100%;
}

.spectrum-Search-icon{
	display:block;
	position:absolute;
	inset-block:0;
	margin-block:auto;

	--spectrum-search-color:var(
		--highcontrast-search-color-default,
		var(--mod-search-color-default, var(--spectrum-search-color-default))
	);
	color:var(--spectrum-search-color);
}

.spectrum-Search-textfield.is-focused .spectrum-Search-icon{
		--spectrum-search-color:var(
			--highcontrast-search-color-focus,
			var(--mod-search-color-focus, var(--spectrum-search-color-focus))
		);
	}

.spectrum-Search-textfield.is-keyboardFocused .spectrum-Search-icon{
		--spectrum-search-color:var(
			--highcontrast-search-color-focus,
			var(--mod-search-color-key-focus, var(--spectrum-search-color-key-focus))
		);
	}

.spectrum-Search-textfield.is-disabled .spectrum-Search-icon{
		--spectrum-search-color:var(
			--highcontrast-search-color-disabled,
			var(--mod-search-color-disabled, var(--spectrum-search-color-disabled))
		);
	}

@media (hover: hover){

.spectrum-Search-textfield:hover .spectrum-Search-icon,
.spectrum-Search-textfield.is-hover .spectrum-Search-icon{
		--spectrum-search-color:var(
			--highcontrast-search-color-hover,
			var(--mod-search-color-hover, var(--spectrum-search-color-hover))
		);
	}

.spectrum-Search-textfield.is-focused:hover .spectrum-Search-icon,
.spectrum-Search-textfield.is-focused.is-hover .spectrum-Search-icon{
		--spectrum-search-color:var(
			--highcontrast-search-color-focus,
			var(
				--mod-search-color-focus-hover,
				var(--spectrum-search-color-focus-hover)
			)
		);
	}

.spectrum-Search-textfield.is-disabled:hover .spectrum-Search-icon,
.spectrum-Search-textfield.is-disabled.is-hover .spectrum-Search-icon{
		--spectrum-search-color:var(
			--highcontrast-search-color-disabled,
			var(--mod-search-color-disabled, var(--spectrum-search-color-disabled))
		);
	}
}

.spectrum-Search-input{
	appearance:none;

	block-size:var(--mod-search-block-size, var(--spectrum-search-block-size));
	padding-block-start:calc(
		var(--mod-search-top-to-text, var(--spectrum-search-top-to-text)) -
			var(--mod-search-border-width, var(--spectrum-search-border-width))
	);
	padding-block-end:calc(
		var(--mod-search-bottom-to-text, var(--spectrum-search-bottom-to-text)) -
			var(--mod-search-border-width, var(--spectrum-search-border-width))
	);

	font-style:var(--mod-search-font-style, var(--spectrum-search-font-style));
	line-height:var(
		--mod-search-line-height,
		var(--spectrum-search-line-height)
	);
}

.spectrum-Search-input::-webkit-search-cancel-button, .spectrum-Search-input::-webkit-search-decoration{
		appearance:none;
	}

.spectrum-Search:not(.spectrum-Search--quiet) .spectrum-Search-icon{
		inset-inline-start:var(
			--mod-search-edge-to-visual,
			var(--spectrum-search-edge-to-visual)
		);
	}

.spectrum-Search:not(.spectrum-Search--quiet) .spectrum-Search-input{
		padding-inline-start:calc(
			var(--mod-search-edge-to-visual, var(--spectrum-search-edge-to-visual)) -
				var(--mod-search-border-width, var(--spectrum-search-border-width)) +
				var(--mod-search-icon-size, var(--spectrum-search-icon-size)) +
				var(--mod-search-text-to-icon, var(--spectrum-search-text-to-icon))
		);
		padding-inline-end:calc(
			var(
					--mod-search-button-inline-size,
					var(--spectrum-search-button-inline-size)
				) - var(--mod-search-border-width, var(--spectrum-search-border-width))
		);
	}

.spectrum-Search--quiet .spectrum-Search-clearButton{
		transform:translateX(
			var(
				--mod-search-quiet-button-offset,
				var(--spectrum-search-quiet-button-offset)
			)
		);
	}

.spectrum-Search--quiet.spectrum-Search .spectrum-Search-input{
		border-radius:var(
			--mod-search-border-radius,
			var(--spectrum-search-border-radius)
		);
		padding-inline-start:calc(
			var(--mod-search-edge-to-visual, var(--spectrum-search-edge-to-visual)) +
				var(--mod-search-icon-size, var(--spectrum-search-icon-size)) +
				var(--mod-search-text-to-icon, var(--spectrum-search-text-to-icon))
		);
		padding-inline-end:calc(
			var(
					--mod-search-button-inline-size,
					var(--spectrum-search-button-inline-size)
				) -
				var(
					--mod-search-quiet-button-offset,
					var(--spectrum-search-quiet-button-offset)
				)
		);
		padding-block-start:var(
			--mod-search-top-to-text,
			var(--spectrum-search-top-to-text)
		);
	}

.spectrum-Search{
  --spectrum-search-border-radius:var(--system-spectrum-search-border-radius);
  --spectrum-search-edge-to-visual:var(--system-spectrum-search-edge-to-visual);
  --spectrum-search-border-color-default:var(--system-spectrum-search-border-color-default);
  --spectrum-search-border-color-hover:var(--system-spectrum-search-border-color-hover);
  --spectrum-search-border-color-focus:var(--system-spectrum-search-border-color-focus);
  --spectrum-search-border-color-focus-hover:var(--system-spectrum-search-border-color-focus-hover);
  --spectrum-search-border-color-key-focus:var(--system-spectrum-search-border-color-key-focus);
}

.spectrum-Search--sizeS{
  --spectrum-search-border-radius:var(--system-spectrum-search-sizes-border-radius);
  --spectrum-search-edge-to-visual:var(--system-spectrum-search-sizes-edge-to-visual);
}

.spectrum-Search--sizeM{
  --spectrum-search-border-radius:var(--system-spectrum-search-sizem-border-radius);
  --spectrum-search-edge-to-visual:var(--system-spectrum-search-sizem-edge-to-visual);
}

.spectrum-Search--sizeL{
  --spectrum-search-border-radius:var(--system-spectrum-search-sizel-border-radius);
  --spectrum-search-edge-to-visual:var(--system-spectrum-search-sizel-edge-to-visual);
}

.spectrum-Search--sizeXL{
  --spectrum-search-border-radius:var(--system-spectrum-search-sizexl-border-radius);
  --spectrum-search-edge-to-visual:var(--system-spectrum-search-sizexl-edge-to-visual);
}
