/*!
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-pickerbutton-spectrum-picker-button-background-color:var(--spectrum-gray-75);
  --system-spectrum-pickerbutton-spectrum-picker-button-background-color-hover:var(--spectrum-gray-200);
  --system-spectrum-pickerbutton-spectrum-picker-button-background-color-down:var(--spectrum-gray-300);
  --system-spectrum-pickerbutton-spectrum-picker-button-background-color-key-focus:var(--spectrum-gray-200);
  --system-spectrum-pickerbutton-spectrum-picker-button-border-color:inherit;
  --system-spectrum-pickerbutton-spectrum-picker-button-border-radius:var(--spectrum-corner-radius-100);
  --system-spectrum-pickerbutton-spectrum-picker-button-border-radius-rounded-sided:0;
  --system-spectrum-pickerbutton-spectrum-picker-button-border-radius-sided:0;
  --system-spectrum-pickerbutton-spectrum-picker-button-border-width:var(--spectrum-border-width-100);
}

.spectrum--express{
  --system-spectrum-pickerbutton-spectrum-picker-button-background-color:var(--spectrum-gray-200);
  --system-spectrum-pickerbutton-spectrum-picker-button-background-color-hover:var(--spectrum-gray-300);
  --system-spectrum-pickerbutton-spectrum-picker-button-background-color-down:var(--spectrum-gray-400);
  --system-spectrum-pickerbutton-spectrum-picker-button-background-color-key-focus:var(--spectrum-gray-300);
  --system-spectrum-pickerbutton-spectrum-picker-button-border-color:none;
  --system-spectrum-pickerbutton-spectrum-picker-button-border-radius:var(--spectrum-corner-radius-75);
  --system-spectrum-pickerbutton-spectrum-picker-button-border-radius-rounded-sided:var(--spectrum-corner-radius-200);
  --system-spectrum-pickerbutton-spectrum-picker-button-border-radius-sided:var(--spectrum-corner-radius-75);
  --system-spectrum-pickerbutton-spectrum-picker-button-border-width:0px;
}

.spectrum-PickerButton{
	--spectrum-picker-button-height:var(--spectrum-component-height-100);
	--spectrum-picker-button-width:var(--spectrum-component-height-100);
	--spectrum-picker-button-gap:var(--spectrum-text-to-visual-50);

	--spectrum-picker-button-padding:var(--spectrum-in-field-button-edge-to-fill);
	--spectrum-picker-button-label-padding:var(--spectrum-text-to-visual-50);
	--spectrum-picker-button-fill-padding:var(--spectrum-field-edge-to-disclosure-icon-100);

	--spectrum-picker-button-border-radius-rounded:var(
		--spectrum-corner-radius-200
	);

	--spectrum-picker-button-icon-color:var(
		--spectrum-neutral-content-color-default
	);
	--spectrum-picker-button-icon-color-hover:var(
		--spectrum-neutral-content-color-hover
	);
	--spectrum-picker-button-icon-color-down:var(
		--spectrum-neutral-content-color-down
	);
	--spectrum-picker-button-icon-color-key-focus:var(
		--spectrum-neutral-content-color-key-focus
	);

	--spectrum-picker-button-font-color:var(
		--spectrum-neutral-content-color-default
	);
	--spectrum-picker-button-font-color-hover:var(
		--spectrum-neutral-content-color-hover
	);
	--spectrum-picker-button-font-color-down:var(
		--spectrum-neutral-content-color-down
	);
	--spectrum-picker-button-font-color-key-focus:var(
		--spectrum-neutral-content-color-key-focus
	);

	--spectrum-picker-button-font-family:var(--spectrum-sans-font-family-stack);
	--spectrum-picker-button-font-style:var(--spectrum-default-font-style);
	--spectrum-picker-button-font-weight:var(
		--spectrum-body-sans-serif-font-weight
	);
	--spectrum-picker-button-font-size:var(--spectrum-font-size-100);

	--spectrum-picker-button-background-animation-duration:var(
		--spectrum-animation-duration-100
	);
}

.spectrum-PickerButton:disabled,
.spectrum-PickerButton.is-disabled{
		--mod-picker-button-background-color:var(
			--mod-picker-button-background-color-disabled,
			var(--spectrum-disabled-background-color)
		);
		--mod-picker-button-background-color-hover:var(
			--mod-picker-button-background-color-hover-disabled,
			var(--spectrum-disabled-background-color)
		);
		--mod-picker-button-background-color-down:var(
			--mod-picker-button-background-color-down-disabled,
			var(--spectrum-disabled-background-color)
		);
		--mod-picker-button-border-color:var(
			--mod-picker-button-border-color-disabled,
			var(--spectrum-disabled-background-color)
		);

		--mod-picker-button-font-color:var(
			--mod-picker-button-font-color-disabled,
			var(--spectrum-disabled-content-color)
		);
		--mod-picker-button-font-color-hover:var(
			--mod-picker-button-font-color-hover-disabled,
			var(--spectrum-disabled-content-color)
		);
		--mod-picker-button-font-color-down:var(
			--mod-picker-button-font-color-down-disabled,
			var(--spectrum-disabled-content-color)
		);

		--mod-picker-button-icon-color:var(
			--mod-picker-button-icon-color-disabled,
			var(--spectrum-disabled-content-color)
		);
		--mod-picker-button-icon-color-hover:var(
			--mod-picker-button-icon-color-hover-disabled,
			var(--spectrum-disabled-content-color)
		);
		--mod-picker-button-icon-color-down:var(
			--mod-picker-button-icon-color-down-disabled,
			var(--spectrum-disabled-content-color)
		);
	}

.spectrum-PickerButton.spectrum-PickerButton--quiet{
		--mod-picker-button-background-color:var(
			--mod-picker-button-background-color-quiet,
			transparent
		);
		--mod-picker-button-background-color-hover:var(
			--mod-picker-button-background-color-hover-quiet,
			transparent
		);
		--mod-picker-button-background-color-down:var(
			--mod-picker-button-background-color-down-quiet,
			transparent
		);
		--mod-picker-button-background-color-key-focus:var(
			--mod-picker-button-background-color-key-focus-quiet,
			transparent
		);

		--mod-picker-button-border-color:var(
			--mod-picker-button-border-color-quiet,
			transparent
		);
	}

.spectrum-PickerButton.spectrum-PickerButton--sizeS{
		--spectrum-picker-button-height:var(--spectrum-component-height-75);
		--spectrum-picker-button-width:var(--spectrum-component-height-75);
		--spectrum-picker-button-label-padding:var(--spectrum-spacing-75);
		--spectrum-picker-button-font-size:var(--spectrum-font-size-75);
		--spectrum-picker-button-fill-padding:var(--spectrum-field-edge-to-disclosure-icon-75);
	}

.spectrum-PickerButton.spectrum-PickerButton--sizeL{
		--spectrum-picker-button-height:var(--spectrum-component-height-200);
		--spectrum-picker-button-width:var(--spectrum-component-height-200);
		--spectrum-picker-button-label-padding:var(--spectrum-text-to-visual-200);
		--spectrum-picker-button-font-size:var(--spectrum-font-size-200);
		--spectrum-picker-button-fill-padding:var(--spectrum-field-edge-to-disclosure-icon-200);
	}

.spectrum-PickerButton.spectrum-PickerButton--sizeXL{
		--spectrum-picker-button-height:var(--spectrum-component-height-300);
		--spectrum-picker-button-width:var(--spectrum-component-height-300);
		--spectrum-picker-button-label-padding:var(--spectrum-text-to-visual-300);
		--spectrum-picker-button-font-size:var(--spectrum-font-size-300);
		--spectrum-picker-button-fill-padding:var(--spectrum-field-edge-to-disclosure-icon-300);
	}

.spectrum-PickerButton{
	border-style:none;
	background-color:transparent;
	block-size:var(
		--mod-picker-button-width,
		var(--spectrum-picker-button-width)
	);
	display:flex;
	justify-content:center;
	align-items:center;
	box-sizing:border-box;
	padding:var(
		--mod-picker-button-padding,
		var(--spectrum-picker-button-padding)
	);
}

@media (hover: hover){

.spectrum-PickerButton:hover .spectrum-PickerButton-fill,
.spectrum-PickerButton.is-hover .spectrum-PickerButton-fill{
			background-color:var(
				--mod-picker-button-background-color-hover,
				var(--spectrum-picker-button-background-color-hover)
			);
		}

.spectrum-PickerButton:hover .spectrum-PickerButton-label,
.spectrum-PickerButton.is-hover .spectrum-PickerButton-label{
			color:var(
				--mod-picker-button-font-color-hover,
				var(--spectrum-picker-button-font-color-hover)
			);
		}

.spectrum-PickerButton:hover .spectrum-PickerButton-icon,
.spectrum-PickerButton.is-hover .spectrum-PickerButton-icon{
			color:var(
				--mod-picker-button-icon-color-hover,
				var(--spectrum-picker-button-icon-color-hover)
			);
		}
}

.spectrum-PickerButton:active .spectrum-PickerButton-fill, .spectrum-PickerButton.is-open .spectrum-PickerButton-fill,
.spectrum-PickerButton.is-active .spectrum-PickerButton-fill{
			background-color:var(
				--mod-picker-button-background-color-down,
				var(--spectrum-picker-button-background-color-down)
			);
		}

.spectrum-PickerButton:active .spectrum-PickerButton-label, .spectrum-PickerButton.is-open .spectrum-PickerButton-label,
.spectrum-PickerButton.is-active .spectrum-PickerButton-label{
			color:var(
				--mod-picker-button-font-color-down,
				var(--spectrum-picker-button-font-color-down)
			);
		}

.spectrum-PickerButton:active .spectrum-PickerButton-icon, .spectrum-PickerButton.is-open .spectrum-PickerButton-icon,
.spectrum-PickerButton.is-active .spectrum-PickerButton-icon{
			color:var(
				--mod-picker-button-icon-color-down,
				var(--spectrum-picker-button-icon-color-down)
			);
		}

.spectrum-PickerButton:focus .spectrum-PickerButton-fill, .spectrum-PickerButton.is-focused .spectrum-PickerButton-fill, .spectrum-PickerButton:focus-visible .spectrum-PickerButton-fill, .spectrum-PickerButton.is-keyboardFocused .spectrum-PickerButton-fill,
.spectrum-PickerButton.is-focus-visible .spectrum-PickerButton-fill{
			background-color:var(
				--mod-picker-button-background-color-key-focus,
				var(--spectrum-picker-button-background-color-key-focus)
			);
		}

.spectrum-PickerButton:focus .spectrum-PickerButton-label, .spectrum-PickerButton.is-focused .spectrum-PickerButton-label, .spectrum-PickerButton:focus-visible .spectrum-PickerButton-label, .spectrum-PickerButton.is-keyboardFocused .spectrum-PickerButton-label,
.spectrum-PickerButton.is-focus-visible .spectrum-PickerButton-label{
			color:var(
				--mod-picker-button-font-color-key-focus,
				var(--spectrum-picker-button-font-color-key-focus)
			);
		}

.spectrum-PickerButton:focus .spectrum-PickerButton-icon, .spectrum-PickerButton.is-focused .spectrum-PickerButton-icon, .spectrum-PickerButton:focus-visible .spectrum-PickerButton-icon, .spectrum-PickerButton.is-keyboardFocused .spectrum-PickerButton-icon,
.spectrum-PickerButton.is-focus-visible .spectrum-PickerButton-icon{
			color:var(
				--mod-picker-button-icon-color-key-focus,
				var(--spectrum-picker-button-icon-color-key-focus)
			);
		}

.spectrum-PickerButton--right .spectrum-PickerButton-fill{
		border-end-start-radius:var(
			--mod-picker-button-border-radius-sided,
			var(--spectrum-picker-button-border-radius-sided)
		);
		border-start-start-radius:var(
			--mod-picker-button-border-radius-sided,
			var(--spectrum-picker-button-border-radius-sided)
		);
	}

.spectrum-PickerButton--right.spectrum-PickerButton--rounded .spectrum-PickerButton-fill{
			border-end-start-radius:var(
				--mod-picker-button-border-radius-rounded-sided,
				var(--spectrum-picker-button-border-radius-rounded-sided)
			);
			border-start-start-radius:var(
				--mod-picker-button-border-radius-rounded-sided,
				var(--spectrum-picker-button-border-radius-rounded-sided)
			);
		}

.spectrum-PickerButton--left .spectrum-PickerButton-fill{
		border-end-end-radius:var(
			--mod-picker-button-border-radius-sided,
			var(--spectrum-picker-button-border-radius-sided)
		);
		border-start-end-radius:var(
			--mod-picker-button-border-radius-sided,
			var(--spectrum-picker-button-border-radius-sided)
		);
	}

.spectrum-PickerButton--left.spectrum-PickerButton--rounded .spectrum-PickerButton-fill{
			border-end-end-radius:var(
				--mod-picker-button-border-radius-rounded-sided,
				var(--spectrum-picker-button-border-radius-rounded-sided)
			);
			border-start-end-radius:var(
				--mod-picker-button-border-radius-rounded-sided,
				var(--spectrum-picker-button-border-radius-rounded-sided)
			);
		}

.spectrum-PickerButton-label{
	flex:1 1 auto;
	color:var(
		--mod-picker-button-font-color,
		var(--spectrum-picker-button-font-color)
	);

	white-space:nowrap;
	overflow:hidden;
	padding-block-end:var(
		--mod-picker-button-label-padding,
		var(--spectrum-picker-button-label-padding)
	);
	padding-block-start:var(
		--mod-picker-button-label-padding,
		var(--spectrum-picker-button-label-padding)
	);

	font-family:var(
		--mod-picker-button-font-family,
		var(--spectrum-picker-button-font-family)
	);
	font-style:var(
		--mod-picker-button-font-style,
		var(--spectrum-picker-button-font-style)
	);
	font-weight:var(
		--mod-picker-button-font-weight,
		var(--spectrum-picker-button-font-weight)
	);
	font-size:var(
		--mod-picker-button-font-size,
		var(--spectrum-picker-button-font-size)
	);
}

.spectrum-PickerButton-fill{
	display:flex;
	align-items:center;
	justify-content:center;
	box-sizing:border-box;
	block-size:100%;
	inline-size:100%;
	gap:var(--mod-picker-button-gap, var(--spectrum-picker-button-gap));

	background-color:var(
		--mod-picker-button-background-color,
		var(--spectrum-picker-button-background-color)
	);
	border-color:var(
		--mod-picker-button-border-color,
		var(--spectrum-picker-button-border-color)
	);
	border-width:var(
		--mod-picker-button-border-width,
		var(--spectrum-picker-button-border-width)
	);
	border-style:solid;
	padding:calc(var(--mod-picker-button-fill-padding, var(--spectrum-picker-button-fill-padding)) - var(--mod-picker-button-padding, var(--spectrum-picker-button-padding)) - var(--mod-picker-button-border-width, var(--spectrum-picker-button-border-width)));

	border-end-end-radius:var(
		--mod-picker-button-border-radius,
		var(--spectrum-picker-button-border-radius)
	);
	border-end-start-radius:var(
		--mod-picker-button-border-radius,
		var(--spectrum-picker-button-border-radius)
	);
	border-start-end-radius:var(
		--mod-picker-button-border-radius,
		var(--spectrum-picker-button-border-radius)
	);
	border-start-start-radius:var(
		--mod-picker-button-border-radius,
		var(--spectrum-picker-button-border-radius)
	);

	transition:border-color var(
			--mod-picker-button-background-animation-duration,
			var(--spectrum-picker-button-background-animation-duration)
		) ease-in-out;
}

.spectrum-PickerButton-icon{
	flex-shrink:0;
	color:var(
		--mod-picker-button-icon-color,
		var(--spectrum-picker-button-icon-color)
	);
}

.spectrum-PickerButton--rounded .spectrum-PickerButton-fill{
		border-end-end-radius:var(
			--mod-picker-button-border-radius-rounded,
			var(--spectrum-picker-button-border-radius-rounded)
		);
		border-end-start-radius:var(
			--mod-picker-button-border-radius-rounded,
			var(--spectrum-picker-button-border-radius-rounded)
		);
		border-start-end-radius:var(
			--mod-picker-button-border-radius-rounded,
			var(--spectrum-picker-button-border-radius-rounded)
		);
		border-start-start-radius:var(
			--mod-picker-button-border-radius-rounded,
			var(--spectrum-picker-button-border-radius-rounded)
		);
	}

.spectrum-PickerButton--uiicononly{
	inline-size:var(
		--mod-picker-button-height,
		var(--spectrum-picker-button-height)
	);
}

.spectrum-PickerButton--uiicononly .spectrum-PickerButton-label{
		display:none;
	}

.spectrum-PickerButton--uiicononly .spectrum-PickerButton-fill{
		padding:0;
	}

.spectrum-PickerButton--textuiicon .spectrum-PickerButton-fill{
		inline-size:auto;
	}

.spectrum-PickerButton{
  --spectrum-picker-button-background-color:var(--system-spectrum-pickerbutton-spectrum-picker-button-background-color);
  --spectrum-picker-button-background-color-hover:var(--system-spectrum-pickerbutton-spectrum-picker-button-background-color-hover);
  --spectrum-picker-button-background-color-down:var(--system-spectrum-pickerbutton-spectrum-picker-button-background-color-down);
  --spectrum-picker-button-background-color-key-focus:var(--system-spectrum-pickerbutton-spectrum-picker-button-background-color-key-focus);
  --spectrum-picker-button-border-color:var(--system-spectrum-pickerbutton-spectrum-picker-button-border-color);
  --spectrum-picker-button-border-radius:var(--system-spectrum-pickerbutton-spectrum-picker-button-border-radius);
  --spectrum-picker-button-border-radius-rounded-sided:var(--system-spectrum-pickerbutton-spectrum-picker-button-border-radius-rounded-sided);
  --spectrum-picker-button-border-radius-sided:var(--system-spectrum-pickerbutton-spectrum-picker-button-border-radius-sided);
  --spectrum-picker-button-border-width:var(--system-spectrum-pickerbutton-spectrum-picker-button-border-width);
}
