@layer blocks {
	.modal {
		background-color: transparent;
		block-size: 100%;
		border: none;
		inline-size: 100%;
		max-block-size: 100%;
		max-inline-size: 100%;
		padding: 0;
		transition:
		opacity var(--transition-time) ease-in-out,
		display var(--transition-time) allow-discrete;
		
		@media (width >= 48em) {
			padding: 60px;
		}
		
		&[open] {
			--background-alpha: 20%;
			
			display: grid;
			opacity: 1;
			
			@media (width >= 48em) {
				place-items: center;
			}
			
			@starting-style {
				opacity: 0;
			}
		}
		
		&::backdrop {
			background-color: rgb(from var(--color-black) r g b / var(--background-alpha, 0%));
			transition: background-color var(--transition-time) ease-in-out;
		}

	}

	.modal-box {
		align-content: start;
		background-color: var(--color-white);
		display: grid;
		gap: 25px;
		padding: 30px 20px;
		position: relative;
		
		@media (width >= 48em) {
			border-radius: 8px;
			max-inline-size: 48.125rem;
			padding: 40px;
		}
	}

	.modal-close {
		background-color: rgb(from var(--color-gray-5) r g b / var(--close-alpha, 0));
		border-radius: 50%;
		block-size: 40px;
		inline-size: 40px;
		place-items: center;
		position: absolute;
		right: 10px;
		top: 10px;
		transition: background-color var(--transition-time) ease-in-out;

		&:hover {
			--close-alpha: 20%
		}

		&::before {
			content: '\e5cd';
			font-family: var(--material-icons);
			font-size: var(--size-24);
		}
	}
}