/*!
 * 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.
 */

@import "./themes/spectrum-two.css";

.spectrum-DatePicker {
	--spectrum-datepicker-border-radius: var(--mod-datepicker-border-radius, var(--spectrum-corner-radius-100));
	--spectrum-datepicker-border-radius-quiet: var(--mod-datepicker-border-radius-quiet, 0);
	--spectrum-datepicker-border-width: var(--spectrum-border-width-100);
	--spectrum-datepicker-min-width: var(--mod-datepicker-min-width, var(--spectrum-field-width));
	--spectrum-datepicker-icon-size: var(--spectrum-workflow-icon-size-100);

	/* button */
	--spectrum-datepicker-pickerbutton-border-color: var(--highcontrast-datepicker-pickerbutton-border-color, var(--mod-datepicker-pickerbutton-border-color, var(--spectrum-gray-500)));
	--spectrum-datepicker-pickerbutton-border-color-invalid: var(--highcontrast-datepicker-pickerbutton-border-color, var(--mod-datepicker-pickerbutton-border-color-invalid, var(--spectrum-negative-border-color-default)));
	--spectrum-datepicker-pickerbutton-width: calc(var(--spectrum-field-edge-to-disclosure-icon-100) * 2 + var(--spectrum-workflow-icon-size-100));
	--spectrum-datepicker-quiet-button-offset: var(--mod-datepicker-quiet-button-offset, var(--spectrum-text-to-visual-100));
	--spectrum-datepicker-icon-to-text: var(--spectrum-component-edge-to-text-100);

	/* Calculated as width minus offset */
	--spectrum-datepicker-pickerbutton-width-quiet: calc(var(--spectrum-datepicker-pickerbutton-width) - var(--spectrum-datepicker-quiet-button-offset));

	/* focus */
	--spectrum-datepicker-focus-ring-gap: var(--mod-datepicker-focus-ring-gap, var(--spectrum-focus-indicator-gap));
	--spectrum-datepicker-focus-thickness: var(--mod-datepicker-focus-thickness, var(--spectrum-focus-indicator-thickness));
	--spectrum-datepicker-focus-animation: var(--mod-datepicker-focus-animation, var(--spectrum-animation-duration-100));
	--spectrum-datepicker-focus-ring-width: var(--mod-datepicker-focus-ring-width, var(--spectrum-border-width-100));
	--spectrum-datepicker-focus-ring-color: var(--highcontrast-datepicker-focus-ring-color, var(--mod-datepicker-focus-ring-color, var(--spectrum-focus-indicator-color)));
	--spectrum-datepicker-focus-line-gap: var(--mod-datepicker-focus-line-gap, var(--spectrum-spacing-75));

	/* color */
	--spectrum-datepicker-invalid-quiet-color: var(--mod-datepicker-invalid-quiet-color, var(--spectrum-negative-border-color-default));
	--spectrum-datepicker-quiet-border-color-hover: var(--mod-datepicker-quiet-border-color-hover, var(--spectrum-gray-500));
	--spectrum-datepicker-border-color-disabled: var(--mod-datepicker-border-color-disabled, var(--spectrum-disabled-border-color));

	/* dash */
	--spectrum-datepicker-dash-font-size: var(--mod-datepicker-dash-font-size, var(--spectrum-font-size-100));
	--spectrum-datepicker-dash-color: var(--highcontrast-datepicker-dash-color, var(--mod-datepicker-dash-color, var(--spectrum-neutral-content-color-default)));
	--spectrum-datepicker-range-dash-padding-top: var(--mod-datepicker-range-dash-padding-top, 0);

	/* Calculated as negative half of font-size */
	--spectrum-datepicker-range-dash-marin-inline-start: var(--mod-datepicker-range-dash-margin-left, calc(-0.5 * var(--spectrum-datepicker-dash-font-size)));

	/* calculating widths */
	/* initial-width and generic-padding are being served from the global tokens package */
	--spectrum-datepicker-range-input-width-first: var(--mod-datepicker-range-input-width-first, calc(var(--spectrum-datepicker-initial-width) - 2 * var(--spectrum-datepicker-generic-padding)));
	--spectrum-datepicker-input-width-base: calc(var(--spectrum-datepicker-range-input-width-first) + var(--spectrum-datepicker-icon-size));

	--spectrum-datepicker-input-width: var(--mod-datepicker-input-width, calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-initial-height)));
	--spectrum-datepicker-range-input-width-quiet-first: var(--mod-datepicker-range-input-width-quiet-first, calc(var(--spectrum-datepicker-width-quiet-first) + var(--spectrum-datepicker-width-quiet-second)));
	--spectrum-datepicker-input-width-quiet: var(--mod-datepicker-input-width-quiet, calc(var(--spectrum-datepicker-range-input-width-quiet-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height)));

	--spectrum-datepicker-datetime-input-width-first: var(--mod-datepicker-datetime-input-width-first, calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-datetime-width-first)));
	--spectrum-datepicker-datetime-input-width: var(--mod-datepicker-datetime-input-width, calc(var(--spectrum-datepicker-datetime-input-width-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height)));
	--spectrum-datepicker-datetime-quiet-input-width-first: var(--mod-datepicker-datetime-quiet-input-width-first, calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-input-datetime-width)));
	--spectrum-datepicker-datetime-quiet-input-width: var(--mod-datepicker-datetime-quiet-input-width, calc(var(--spectrum-datepicker-datetime-quiet-input-width-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height)));

	/* padding inline end */
	--spectrum-datepicker-padding-inline-end: var(--mod-datepicker-padding-inline, calc(var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100) - var(--spectrum-datepicker-border-width) * 2));
	--spectrum-datepicker-padding-inline-end-quiet: var(--mod-datepicker-padding-inline-quiet, calc((var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100)) - var(--spectrum-datepicker-quiet-button-offset)));
	--spectrum-datepicker-padding-inline-end-invalid-quiet: var(--mod-datepicker-padding-inline-end-invalid-quiet, calc(var(--spectrum-datepicker-pickerbutton-width-quiet) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-icon-to-text)));

	position: relative;
	display: inline-flex;
	flex-direction: row;
	flex-wrap: nowrap;
	min-inline-size: var(--spectrum-datepicker-min-width);
	border-radius: var(--spectrum-datepicker-border-radius);

	&.is-disabled {
		--mod-datepicker-dash-color: var(--mod-datepicker-dash-color-disabled, var(--spectrum-disabled-content-color));

		/* @passthrough -- ensures the textfield border color is hidden when disabled */
		--mod-textfield-border-color-disabled: transparent;
	}

	&.is-invalid {
		--mod-textfield-icon-spacing-inline-end-invalid: calc(var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-datepicker-invalid-icon-to-button));
		--mod-textfield-icon-spacing-inline-end-quiet-invalid: calc(var(--spectrum-datepicker-pickerbutton-width-quiet) + var(--spectrum-datepicker-invalid-icon-to-button-quiet));
	}

	&:not(.spectrum-DatePicker--quiet, .is-disabled) {
		/* @passthrough -- ensures picker button border color matches the textfield border color */
		--mod-picker-button-border-color: var(--spectrum-datepicker-pickerbutton-border-color);

		&.is-invalid {
			/* @passthrough */
			--mod-picker-button-border-color: var(--spectrum-datepicker-pickerbutton-border-color-invalid);
		}
	}
}

.spectrum-DatePicker-input {
	/* fill space */
	flex: 1;
	inline-size: 100%;
	padding-inline-end: var(--spectrum-datepicker-padding-inline-end);

	&.spectrum-DatePicker-startField {
		padding-inline-end: var(--mod-datepicker-generic-padding, var(--spectrum-datepicker-generic-padding));

		border-inline-end: 0;
		border-start-end-radius: 0;
		border-end-end-radius: 0;
	}

	&.spectrum-DatePicker-endField {
		border-inline-start: 0;
		border-start-start-radius: 0;
		border-end-start-radius: 0;
		padding-inline-start: var(--mod-datepicker-generic-padding, var(--spectrum-datepicker-generic-padding));
	}
}

/* Nested Picker Button */
.spectrum-DatePicker-button {
	/* Be above textfield so box shadow shines through */
	position: absolute;
	inset-inline-end: 0;
}

/* "-" between inputs */
.spectrum-DatePicker-rangeDash {
	color: var(--spectrum-datepicker-dash-color);
	line-height: var(--mod-datepicker-dash-line-height, var(--spectrum-datepicker-dash-line-height));
	padding-block-start: var(--spectrum-datepicker-range-dash-padding-top);
	flex: initial;
	inline-size: 0;
	z-index: 1;

	&::before {
		content: "–";
		display: inline-block;
		margin-block: 0;
		margin-inline: var(--spectrum-datepicker-range-dash-marin-inline-start);
		overflow: hidden;
		text-align: center;
		vertical-align: middle;
		inline-size: var(--spectrum-datepicker-dash-font-size);
	}
}

/* quiet */
.spectrum-DatePicker--quiet {
	--mod-datepicker-border-radius: var(--spectrum-datepicker-border-radius-quiet);
	--mod-datepicker-padding-inline: var(--spectrum-datepicker-padding-inline-end-quiet);

	/* @passthrough start -- quiet variant nested button styles */
	--mod-picker-button-border-color-disabled: var(--spectrum-datepicker-border-color-disabled);
	--mod-picker-button-background-color-hover-disabled: var(--spectrum-datepicker-border-color-disabled);
	/* @passthrough end */

	/* @passthrough start -- quiet variant nested button styles */
	&.is-disabled {
		--mod-textfield-border-color-disabled: var(--spectrum-datepicker-border-color-disabled);
	}
	/* @passthrough end */

	/* quiet invalid and quiet range invalid */
	&.is-invalid .spectrum-DatePicker-input:not(.spectrum-DatePicker-startField) {
		padding-inline-end: var(--spectrum-datepicker-padding-inline-end-invalid-quiet);
	}

	&:hover:not(.is-focused, .is-keyboardFocused, .is-disabled, .is-invalid) {
		/* @passthrough -- nested border colors */
		--mod-picker-button-border-color: var(--spectrum-datepicker-quiet-border-color-hover);
	}

	&.is-invalid {
		/* @passthrough -- invalid bottom border color */
		--mod-picker-button-border-color: var(--spectrum-datepicker-invalid-quiet-color);
	}

	/* Nested Picker Button */
	.spectrum-DatePicker-button {
		inline-size: auto;
		inset-inline-end: calc(-1 * var(--spectrum-datepicker-quiet-button-offset));

		&:not(.is-open) {
			--mod-picker-button-border-color-disabled: transparent;
		}

		&:not(:disabled, .is-open) {
			--mod-picker-button-background-color: transparent;
		}
	}
}

.spectrum-DatePicker--range {
	--mod-datepicker-border-radius: var(--spectrum-datepicker-border-radius);

	/* focus-ring */
	&::after {
		pointer-events: none;
		content: "";
		position: absolute;
		inset: 0;
		margin: calc(var(--spectrum-datepicker-focus-ring-gap) * -1);
		border-radius: calc(var(--spectrum-datepicker-border-radius) + var(--spectrum-datepicker-focus-ring-gap));
		border-color: transparent;
		transition:
			box-shadow var(--spectrum-datepicker-focus-animation) ease-in-out,
			border-color var(--spectrum-datepicker-focus-animation) ease-in-out;
	}

	&.is-keyboardFocused:not(.spectrum-DatePicker--quiet) {
		&::after {
			box-shadow: 0 0 0 var(--spectrum-datepicker-focus-ring-width) var(--spectrum-datepicker-focus-ring-color);
		}

		.spectrum-DatePicker-textfield::after {
			display: none;
		}
	}

	/* Input Group */
	&.spectrum-DatePicker--quiet {
		--mod-datepicker-border-radius: var(--spectrum-datepicker-border-radius-quiet);

		/* quiet variant bottom border focus indicator */
		&.is-keyboardFocused::after {
			margin: 0;
			box-shadow: none;
			border-radius: 0;
			border-block-end: var(--spectrum-datepicker-focus-thickness) solid var(--spectrum-datepicker-focus-ring-color);
			inset-block-end: calc(-1 * var(--spectrum-datepicker-focus-line-gap));
		}

		.spectrum-DatePicker-textfield {
			min-inline-size: 0;
			inline-size: var(--spectrum-datepicker-input-width-quiet);

			&:first-of-type {
				inline-size: var(--spectrum-datepicker-range-input-width-quiet-first);
			}
		}
	}

	/* Datetime Range */
	&.spectrum-DatePicker--datetimeRange {
		/* Inputs */
		.spectrum-DatePicker-textfield {
			inline-size: var(--spectrum-datepicker-datetime-input-width);
			min-inline-size: 0;

			&:first-of-type {
				inline-size: var(--spectrum-datepicker-datetime-input-width-first);
			}
		}

		&.spectrum-DatePicker--quiet .spectrum-DatePicker-textfield {
			inline-size: var(--spectrum-datepicker-datetime-quiet-input-width);

			&:first-of-type {
				inline-size: var(--spectrum-datepicker-datetime-quiet-input-width-first);
			}
		}
	}

	/* Inputs */
	.spectrum-DatePicker-textfield {
		flex: initial;
		min-inline-size: 0;
		inline-size: var(--spectrum-datepicker-input-width);

		&:first-of-type {
			inline-size: var(--spectrum-datepicker-range-input-width-first);
		}
	}
}

/********* WHCM *********/
@media (forced-colors: active) {
	.spectrum-DatePicker {
		--highcontrast-datepicker-dash-color: CanvasText;
		--highcontrast-datepicker-focus-ring-color: Highlight;
		--highcontrast-datepicker-pickerbutton-border-color: Highlight;

		&.is-disabled {
			--highcontrast-datepicker-dash-color: GrayText;
		}

		&.spectrum-DatePicker--quiet.is-invalid {
			--highcontrast-datepicker-pickerbutton-border-color: Highlight;
		}
	}
}
