/*!
 * 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 "@spectrum-css/commons/overlay.css";
@import "./themes/spectrum-two.css";

.spectrum-Modal {
	--spectrum-modal-confirm-entry-animation-duration: var(--mod-modal-confirm-entry-animation-duration, var(--spectrum-animation-duration-500));
	/* @deprecated --mod-overlay-animation-duration-opened in favor of --mod-modal-confirm-entry-animation-delay */
	--spectrum-modal-confirm-entry-animation-delay: var(--mod-overlay-animation-duration-opened, var(--mod-modal-confirm-entry-animation-delay, var(--spectrum-animation-duration-200)));

	/* @deprecated --mod-overlay-animation-duration in favor of --mod-modal-confirm-exit-animation-duration */
	--spectrum-modal-confirm-exit-animation-duration: var(--mod-overlay-animation-duration, var(--mod-modal-confirm-exit-animation-duration, var(--spectrum-animation-duration-100)));
	--spectrum-modal-confirm-exit-animation-delay: var(--mod-modal-confirm-exit-animation-delay, var(--spectrum-animation-duration-0));

	/* Distance between top and bottom of modal and edge of window for fullscreen modal */
	--spectrum-modal-fullscreen-margin: var(--mod-modal-fullscreen-margin, 32px);
}

/* Used to position the modal */
.spectrum-Modal-wrapper {
	position: fixed;
	inset-inline-start: 0;
	inset-block-start: 0;

	display: flex;
	align-items: center;
	justify-content: center;

	box-sizing: border-box;
	inline-size: 100vw;

	/**
	 * On mobile browsers, vh units are fixed based on the maximum height of the screen.
	 * However, when you scroll, the toolbar and address bar shrink, making the viewport resize.
	 * We use the stretch value to counteract this where supported.
	 */
	block-size: 100vh;
	block-size: -webkit-fill-available;

	/* autoprefixer: ignore next -- -moz-available providing inconsistent results; want to fall FF back to 100vh */
	block-size: stretch;

	visibility: hidden;

	/* Don't catch clicks */
	pointer-events: none;

	/* Appear above underlay */
	z-index: 2;

	/* Be invisible by default */
	transition: visibility 0ms linear var(--mod-modal-transition-animation-duration, var(--spectrum-animation-duration-100));

	&.is-open {
		visibility: visible;
	}
}

.spectrum-Modal {
	visibility: hidden;
	opacity: 0;

	/* Start offset by the animation distance -- @note this is using the global dialog token */
	transform: translateY(var(--mod-modal-confirm-entry-animation-distance, var(--spectrum-dialog-confirm-entry-animation-distance)));

	/* Appear above underlay */
	z-index: 2;

	/* Don't be bigger than the screen */
	max-block-size: var(--mod-modal-max-height, 90vh);
	max-inline-size: var(--mod-modal-max-width, 90%);

	background: var(--mod-modal-background-color, var(--spectrum-modal-background-color));
	border-radius: var(--mod-modal-confirm-border-radius, var(--spectrum-corner-radius-100));
	overflow: hidden;
	outline: none; /* Firefox shows outline */
	pointer-events: auto;

	/* Exit animations */
	transition:
		opacity var(--spectrum-modal-confirm-exit-animation-duration) var(--spectrum-animation-ease-in) var(--spectrum-modal-confirm-exit-animation-delay),
		visibility var(--spectrum-animation-duration-0) var(--spectrum-animation-linear) calc(var(--spectrum-modal-confirm-exit-animation-delay) + var(--spectrum-modal-confirm-exit-animation-duration)),
		transform var(--spectrum-animation-duration-0) var(--spectrum-animation-linear) calc(var(--spectrum-modal-confirm-exit-animation-delay) + var(--spectrum-modal-confirm-exit-animation-duration));

	&.is-open {
		pointer-events: auto;
		visibility: visible;
		opacity: 1;

		/* Entry animations */
		transition:
			transform var(--spectrum-modal-confirm-entry-animation-duration) var(--spectrum-animation-ease-out) var(--spectrum-modal-confirm-entry-animation-delay),
			opacity var(--spectrum-modal-confirm-entry-animation-duration) var(--spectrum-animation-ease-out) var(--spectrum-modal-confirm-entry-animation-delay);

		transform: translateY(0);
	}
}

/* Responsive modals will fill the screen on small viewports */
@media only screen and (device-width <= 400px), only screen and (device-height <= 350px) {
	.spectrum-Modal--responsive {
		inline-size: 100%;
		block-size: 100%;
		max-inline-size: 100%;
		max-block-size: 100%;
		border-radius: 0;
	}

	.spectrum-Modal-wrapper .spectrum-Modal--responsive {
		margin-block-start: 0; /* Prevent the vertical offset bit */
	}
}

/** @unofficial */
.spectrum-Modal--fullscreen {
	position: fixed;
	inset-inline-start: var(--spectrum-modal-fullscreen-margin);
	inset-block-start: var(--spectrum-modal-fullscreen-margin);
	inset-inline-end: var(--spectrum-modal-fullscreen-margin);
	inset-block-end: var(--spectrum-modal-fullscreen-margin);
	max-inline-size: none;
	max-block-size: none;
}

.spectrum-Modal--fullscreenTakeover {
	position: fixed;
	inset: 0;
	max-inline-size: none;
	max-block-size: none;

	box-sizing: border-box;

	/* Remove the border since we've taken over */
	border: none;
	border-radius: 0;

	&,
	&.is-open {
		transform: none;
	}
}