.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: 800px;
		height: auto;
		min-height: 200px;
		max-height: 800px;

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

		background: $color-black;
		border: 2px solid $color-text-light;
		opacity: 0;

		transition-duration: .25s;
		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;
			}
		}

		.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;
		}
	}
}