/* THIS STYLE SHEET MANAGES STYLE FOR OUR MODAL, i.e. DIALOG BOX */

span {
	font-weight: bold;
	font-style: italic;
}

.modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--black);
	color: var(--swatch-text);
	cursor: pointer;
	visibility: hidden;
	opacity: 0;
	transition: all 0.35s ease-in;
	font-family: var(--font-primary);

	&.is-visible {
		visibility: visible;
		opacity: 1;
	}

	& p + p {
		margin-top: 1rem;
	}
}

.modal-root {
	position: relative;
	max-width: 1200vw;
	max-height: 600vh;
	overflow: visible;
	display: flex;
	flex-direction: column;
	background: var(--swatch-complement);
	cursor: default;
	border-width: 2px;
	border-color: black;
	border-style: solid;
	box-shadow: 5px 10px #888888;

	& > * {
		padding: 1rem;
	}
}

.modal-north {
	font-size: 32pt;
	font-weight: bold;
	background-color: #669966;
	color: white;
}

.modal-center {
	display: grid;
	grid-template-columns: 30% 65%;
	grid-template-rows: 20% 20% 20% 20%;
	gap: 10px 20px;
	font-size: 48pt;
}

.modal-south {
	display: flex;
	flex-direction: row;
	background-color: lightgray;
	align-items: center;
	justify-content: center;
}

.modal-center-content {
	grid-column: 1 / 3;
	grid-row: 1 / 4;
}

.modal-prompt {
	font-size: 28pt;
	font-weight: bold;
}

.modal-textfield {
	font-size: 24pt;
}

.modal-button {
	font-size: 20pt;
	margin: 5px;
}

#title-prompt {
	grid-column: 1 / 2;
	grid-row: 1 / 2;
}

#edit-song-modal-title-textfield {
	grid-column: 2 / 3;
	grid-row: 1 / 2;
}

#artist-prompt {
	grid-column: 1 / 2;
	grid-row: 2 / 3;
}

#edit-song-modal-artist-textfield {
	grid-column: 2 / 3;
	grid-row: 2 / 3;
}

#you-tube-id-prompt {
	grid-column: 1 / 2;
	grid-row: 3 / 4;
}

#edit-song-modal-youTubeId-textfield {
	grid-column: 2 / 3;
	grid-row: 3 / 4;
}

#year-prompt {
	grid-column: 1 / 2;
	grid-row: 4 / 5;
}

#edit-song-modal-year-textfield {
	grid-column: 2 / 3;
	grid-row: 4 / 5;
}

/* .confirm-cancel-box {
	grid-column: 1 / 3;
	grid-row: 5 / 6;
	display: flex;
	align-items: center;
	justify-content: center;
} */

/* ANIMATIONS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
[data-animation] .modal-root {
	opacity: 0;
	transition: all 0.5s var(--bounceEasing);
}

[data-animation].is-visible .modal-root {
	opacity: 1;
	transition-delay: 0.2s;
}

[data-animation="slideInOutDown"] .modal-root {
	transform: translateY(100%);
}

[data-animation="slideInOutTop"] .modal-root {
	transform: translateY(-100%);
}

[data-animation="slideInOutLeft"] .modal-root {
	transform: translateX(-100%);
}

[data-animation="slideInOutRight"] .modal-root {
	transform: translateX(100%);
}

[data-animation="zoomInOut"] .modal-root {
	transform: scale(0.2);
}

[data-animation="rotateInOutDown"] .modal-root {
	transform-origin: top left;
	transform: rotate(-1turn);
}

[data-animation="mixInAnimations"].is-visible .modal-root {
	animation: mixInAnimations 2s 0.2s linear forwards;
}

[data-animation="slideInOutDown"].is-visible .modal-root,
[data-animation="slideInOutTop"].is-visible .modal-root,
[data-animation="slideInOutLeft"].is-visible .modal-root,
[data-animation="slideInOutRight"].is-visible .modal-root,
[data-animation="zoomInOut"].is-visible .modal-root,
[data-animation="rotateInOutDown"].is-visible .modal-root {
	transform: none;
}

@keyframes mixInAnimations {
	0% {
		transform: translateX(-100%);
	}

	10% {
		transform: translateX(0);
	}

	20% {
		transform: rotate(20deg);
	}

	30% {
		transform: rotate(-20deg);
	}

	40% {
		transform: rotate(15deg);
	}

	50% {
		transform: rotate(-15deg);
	}

	60% {
		transform: rotate(10deg);
	}

	70% {
		transform: rotate(-10deg);
	}

	80% {
		transform: rotate(5deg);
	}

	90% {
		transform: rotate(-5deg);
	}

	100% {
		transform: rotate(0deg);
	}
}