@import (reference) '../../../styles/variables';
@import (reference) '../../../styles/mixins';

:root {
	--popup-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
}

.jodit-popup {
	.jodit-box();

	position: fixed;
	z-index: var(--z-index-popup);
	display: inline-block;
	transform: translate3d(0, 0, 0);
	overflow: visible;

	&__content {
		.font();

		padding: 0;
		border: 1px solid #e0e0e0;
		border-radius: var(--border-radius-default);
		box-shadow: var(--popup-box-shadow);
		background: var(--color-background-default);

		overflow-scrolling: touch;
		overflow: hidden;

		.grid {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-gap: 4px;

			.grid-item {
				width: 100%;
				height: 80px;
				overflow: hidden;
			}
		}

		// Todo
		//input {
		//	width: 100%;
		//	font-size: 14px;
		//	line-height: 20px;
		//	padding: 12px 10px 12px 16px;
		//	border-radius: var(--border-radius-default);
		//	background-color: #f8f8f8;
		//}
		//
		//input:focus, input:focus-visible {
		//	outline: none;
		//}

		&__custom {
			border-radius: 20px;
		}

		.masonry {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			column-gap: 4px;
			&-item {
				display: flex;
			}
		}
	}

	&_max-height_false &__content {
		max-height: fit-content;
	}
}

.jodit-popup_strategy_centertop {
	transform: translate(0, -8px);

	// &:after {
	// 	background-color: #fff;
	// 	box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
	// 	content: '';
	// 	width: 6px;
	// 	height: 6px;
	// 	bottom: -3px;
	// 	left: 50%;
	// 	position: absolute;
	// 	transform: translate(-50%, 0) rotate(45deg);
	// }

	&:after {
		background-color: #fff;
		box-shadow: 2px 2px 2px rgba(128, 128, 128, 0.1);
		content: '';
		width: 6px;
		height: 6px;
		bottom: -2px;
		left: 50%;
		position: absolute;
		transform: translate(-50%, 0) rotate(45deg);
	}
}

.jodit-popup_strategy_centerbottom {
	transform: translate(0, 8px);

	&:after {
		background-color: #fff;
		box-shadow: -1px -1px 1px rgba(128, 128, 128, 0.1);
		content: '';
		width: 6px;
		height: 6px;
		top: -2px;
		left: 50%;
		position: absolute;
		transform: translate(-50%, 0) rotate(45deg);
	}
}