index.css

/*!
 * 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/express.css";

.spectrum-Modal {
	/* Bug: this must be 0ms, not 0 */
	--spectrum-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: 32px;
	--spectrum-modal-max-height: 90vh;
	--spectrum-modal-max-width: 90%;

	--spectrum-modal-background-color: var(--spectrum-gray-100);
	--spectrum-modal-confirm-border-radius: var(--spectrum-corner-radius-100);
	--spectrum-modal-confirm-exit-animation-duration: var(--spectrum-animation-duration-100);
	--spectrum-modal-confirm-entry-animation-duration: var(--spectrum-animation-duration-500);
	--spectrum-modal-confirm-entry-animation-delay: var(--spectrum-animation-duration-200);
	--spectrum-modal-transition-animation-duration: var(--spectrum-animation-duration-100);
}

/* 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-modal-transition-animation-duration));

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

.spectrum-Modal {
	@extend %spectrum-overlay;

	/* Start offset by the animation distance */
	transform: translateY(var(--mod-modal-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, var(--spectrum-modal-max-height));
	max-inline-size: var(--mod-modal-max-width, var(--spectrum-modal-max-width));

	background: var(--mod-modal-background-color, var(--spectrum-modal-background-color));

	/* border-radius includes legacy token fallback, which can be deprecated once component is migrated */
	border-radius: var(--mod-modal-confirm-border-radius, var(--spectrum-modal-confirm-border-radius));
	overflow: hidden;
	outline: none; /* Firefox shows outline */
	pointer-events: auto;

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

.spectrum-Modal.is-open {
	@extend %spectrum-overlay--open;

	/* Entry animations */
	transition:
		transform var(--mod-modal-confirm-entry-animation-duration, var(--spectrum-modal-confirm-entry-animation-duration)) var(--spectrum-animation-ease-out) var(--mod-modal-confirm-entry-animation-delay, var(--spectrum-modal-confirm-entry-animation-delay)),
		opacity var(--mod-modal-confirm-entry-animation-duration, var(--spectrum-modal-confirm-entry-animation-duration)) var(--spectrum-animation-ease-out) var(--mod-modal-confirm-entry-animation-delay, 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(--mod-modal-fullscreen-margin, var(--spectrum-modal-fullscreen-margin));
	inset-block-start: var(--mod-modal-fullscreen-margin, var(--spectrum-modal-fullscreen-margin));
	inset-inline-end: var(--mod-modal-fullscreen-margin, var(--spectrum-modal-fullscreen-margin));
	inset-block-end: var(--mod-modal-fullscreen-margin, 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;
	}
}