@import "variables";

.backdrop-container {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 50;
	background-color: rgba($color-purple-900, 0.4);

	> .backdrop {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		display: flex;
		justify-content: center;
		align-items: center;

		> .modal {
			background-color: $color-purple-50;
			opacity: 0.2;
			min-width: 400px;
			max-width: 1200px;
			max-height: 100%;
			border-radius: 10px;
			position: relative;
			overflow: hidden;

			> .close {
				position: absolute;
				right: 12px;
				top: 5px;
				padding: 5px 10px;
				font-size: 18px;
				transition: color 100ms linear;
				color: $color-white;

				&:hover {
					cursor: pointer;
					color: $color-purple-A400;
				}
			}

			> .head {
				padding: 10px 40px 10px 20px;
				background-color: $color-purple-900;
				color: $color-purple-50;
				font-weight: 700;
			}

			> .body {
				padding: 20px;
			}
		}

		&:last-child {
			> .modal {
				opacity: 1;
				box-shadow: 0 0 15px rgba($color-purple-900, 0.2);
				border: 1px solid $color-purple-900;
			}
		}
	}

	input,
	button {
		appearance: none;
		border-radius: $border-radius;
		border-color: $color-purple-500;
		outline: none;
		box-shadow: none;
		color: $color-purple-900;

		&::placeholder {
			color: rgba($color-black, 0.3);
		}

		&:focus,
		&:active {
			border-color: $color-purple-A400;
			box-shadow: 0 0 2px $color-purple-A400;
		}
	}
}

@media screen AND (max-width: 559px) {
	.backdrop-container {
		top: $mobile-hamburger-height;

		> .backdrop {
			> .modal {
				min-width: 100%;
				max-width: 100%;
				overflow-y: auto;
				border-radius: 0;

				> .body {
					padding: 5px;
				}
			}
		}
	}
	.content-editor {
		min-width: 100% !important;
		max-width: 100%;
	}
}