@import '../base/__common.scss';
@import '../base/__colors.scss';
@import './UpsellTheme.scss';

@keyframes blur-anim {
	100% {
		backdrop-filter: blur(5px);
	}
}

.ub-upsells-modal-wrapper {
	@extend %flex-center-all;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(0, 0, 0, 0.6);
	animation: blur-anim 0.2s ease-out forwards;
	z-index: 11;

	&, & * {
		box-sizing: border-box;
	}

	.ub-upsells-modal-navigation {
		@extend %appear-anim;
		@extend %flex-center-all;
		@extend %pointer;
		@include size(50);
		margin: 30px;
		color: $white;

		&[data-ub-nav-disabled=true] {
			pointer-events: none;

			svg {
				display: none
			}
		}

		&:active {
			@extend %basic-click;
		}

		svg {
			@extend %size-full;
		}
	}

	.ub-upsells-modal-main-window {
		@extend %appear-anim;
		@extend %gutenberg-sidebar-default-borders;
		@extend %default-border-radius;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: minmax(min-content, max-content) auto minmax(min-content, max-content);
		grid-gap: 10px;
		background-color: $white;
		width: 440px;
		max-width: 440px;
		overflow: hidden;
		font-size: 14px;

		.ub-upsells-modal-header {
			@extend %flex-center-all;
			@extend %text-no-select;
			background-color: $soft_red;
			padding: 9px;
			font-size: 15px;
			color: $text_red;
			text-transform: capitalize;

			& > div {
				padding: 0 5px;
			}
		}

		.ub-upsells-modal-content {
			display: grid;
			grid-template-columns: 1fr;
			grid-template-rows: auto 1fr;
			grid-gap: 20px;
			padding: 15px 35px;
			justify-content: center;
			align-items: center;

			.ub-upsells-modal-content-image {
				@extend %default-border-radius;
				@extend %gutenberg-sidebar-default-borders;
				@extend %flex-center-all;
				width: 100%;
				height: 160px;
				background-color: $gray-200;
				padding: 5px;

				img {
					width: 100%;
					height: 100%;
					object-fit: scale-down;
				}
			}

			.ub-upsells-modal-content-description {
				@extend %flex-center-all;
				text-align: center;
			}
		}

		.ub-upsells-modal-footer {
			padding: 0 10px 10px 10px;
			@extend %flex-center-all;
			justify-content: space-evenly !important;
			flex-direction: row;
		}
	}
}

//moved from UpsellEditor.scss to make UpsellModal more modular
.ub-upsell-modal-button {
	@extend %gutenberg-sidebar-default-borders;
	@extend %flex-center-all;
	@extend %default-border-radius;
	@extend %pointer;
	@extend %shadow-md;
	padding: 5px 10px;
	margin: 5px 10px;
	background-color: $white;

	&[data-ub-upsell-button-type=prio] {
		background-color: $blue-500 !important;
		color: $white !important;
	}
}

//moved from UpsellEditor.scss to make UpsellModal more modular
.ub-upsell-vitalize-text {
	font-weight: bold !important;
}

//moved from UpsellEditor.scss to make UpsellModal more modular
.ub-active-block-icon {
	@extend %flex-center-all;

	.ub-active-block-icon-from-string {
		@extend %flex-center-all;

		svg {
			width: 20px !important;
			height: 20px !important;
		}
	}
}