.context-menu {
	border: 0;
	font-size: 14px;
	border-radius: 6px;
	left: var(--left, 0);
	top: var(--top, 0);
	display: none;
	opacity: 0;
	position: fixed;
	z-index: 1;
	margin: 0;
	padding: 0;
	font-family: "8columns",anuphan,poppins;

	&.ux-show {
		display: block !important;
		animation-name: context-menu-fade-in;
		animation-duration: 0.3s;
		animation-fill-mode: both;
		z-index: 4;
	}

	&.ux-show[open] {
		opacity: 1;
	}

	&.popup-left {
		ul {
			li {
				ul {
					display: none;
					position: absolute;
					left: auto;
					right: calc(100% - 3px);
					top: 0;					
				}
			}
		}
	}

	ul {
		background-color: var(--context-menu-bg-color);
		list-style: none outside none;
		outline: 1px solid var(--context-menu-outline-color);
		border-radius: 8px;
		margin: 0;
		padding: 0;
		overflow: hidden;

		li {
			display: flex;	
			align-items: center;	
			width: fit-content;
			min-width: var(--menu-width);
			position: relative;
			align-items: center;
			font-size: 12px;

			&:hover {
				background-color: var(--context-menu-hover-color);
			}

			&[data-role="seperator"] {
				height: 1px;
				border-bottom: 1px solid var(--context-menu-divider-color);
				margin: 0;

				&:first-child {
					display: none;
				}

				&:last-child {
					display: none;
				}
			}

			&.ux-disabled {
				opacity: 0.35;
				pointer-events: none;
			}

			&.ux-hidden {
				display: none;
			}

			span {
				flex-basis: 32px;
				display: grid;
				place-content: center;
				transform-origin: center;

				&.ux-hidden {
					visibility: hidden;
				}

				svg {
					width: 16px;
					position: relative;
					color: var(--text-color);
					transform: scale(var(--scale, 1), var(--scale,1));
					top: var(--top, 0);
				}
			}

			a {
				position: relative;
				text-decoration: none;
				padding: 0 1.65em 0 0;	
				flex: 1;
				color: var(--text-color);
				line-height: 28px;
				border: 0;

				&:hover {
					color: var(--text-color);
				}

				&:focus-visible {
					outline: 0;
				}
			}
		}
	}
}

@keyframes context-menu-fade-in {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

[data-theme="dark"] {
	.context-menu {
		ul {
			background-color: var(--neutral-100);

			li {
				&:hover {
					background-color: var(--neutral-200);
				}
			}
		}
	}
}