$submenu-bg: #F6F7F8;
$submenu-color: #343A40;

.xprez-module .xprez-submenu > * {
	//font-size: 13px;
}

.xprez-submenu {
	display: none;
	visibility: hidden;
	opacity: 0;
	border-radius: 2px;
	position: absolute;
	right: 0;
	z-index: 10;
	background: $submenu-bg;
	padding: 10px 0 !important;
	box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.2), 0px 0px 45px rgba(0, 0, 0, 0.1);
	width: min-content;
	flex-wrap: wrap;
	transition: all 0.3s;
	color: $submenu-color;
	@include sans($font-b);
	text-align: left;

	& > * {
		flex-grow: 1;
		box-sizing: border-box;
		display: flex;
		gap: 8px;
		text-align: left;
		padding: .5rem 1rem;
		margin: 0 !important;
		white-space: nowrap;
		align-items: center;
		cursor: pointer;
		font-size: 13px !important;

		&:hover {
			background: rgba(0,0,0,.05);
		}
	}

	.svg-icon {
		width: 18px;
		height: 18px;
		margin: -4px 0;
	}

	&__toggle {
		overflow: visible;
		position: relative;

		&.active .xprez-submenu {
			display: flex;
			visibility: visible;
			opacity: 1;
			z-index: 150;
		}
	}

	&--2-cols {
		min-width: 340px;

		& > * {
			flex-grow: 0;
			flex-basis: 50%;
		}
	}

	&__paste {
		background: $submenu-color;
		color: white;
		flex-basis: 100%;

		&:hover {
			background: #000;
			color: white;
		}
	}
}