@use "../kit-deps" as *;
@use "typography" as *;

.modal {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1000;

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

	.modal-backdrop {
		position: fixed;
		z-index: 1010;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;

		background: $color-black;
		opacity: 0;

		transition-duration: .25s;
		transition-property: opacity;
	}

	.modal-panel {
		position: relative;
		z-index: 1020;

		width: 100%;
		max-width: 960px;
		margin: $space-5;
		height: auto;
		min-height: 200px;
		max-height: calc(100vh - #{$space-10});

		padding: 0;
		display: flex;
		flex-direction: column;
		gap: $space-4;
		margin-top: 200px;

		background: $surface-page;
		border: $border-width-base solid $color-text-light;
		border-left-width: $border-width-accent;
		opacity: 0;

		transition-duration: $motion-slow;
		transition-timing-function: $motion-ease;
		transition-property: opacity, margin-top;

		.modal-header {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding-right: $space-4;

			.modal-title {
				padding: $space-3 $space-4;
				background: $color-text-light;
				color: $color-black;
				text-transform: uppercase;
				letter-spacing: $letter-spacing-wide;
			}
		}

		.modal-body {
			max-height: 700px;
			overflow-y: auto;
			padding: $space-5;
		}

		.modal-footer {
			padding: $space-5;

			.actions {
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
				gap: $space-4;
				width: 100%;
			}
		}
	}

	&.a-show {
		.modal-backdrop {
			opacity: 1;
		}

		.modal-panel {
			opacity: 1;
			margin-top: 0;
		}
	}

	&.a-hide {
		.modal-backdrop {
			opacity: 0;
		}

		.modal-panel {
			opacity: 0;
			margin-top: -200px;
		}
	}
}