react-elegant-ui/components/Popup/Tail/Popup-Tail.css

Elegant UI components, made by BEM best practices for react

.Popup-Tail {
	z-index: -1;
	pointer-events: none;
	width: 16px;
	height: 16px;
}

.Popup-Tail::after {
	display: block;
	content: '';
	width: 100%;
	height: 100%;
	border-radius: 0 0 3px 0;
	transform: translateY(-50%) rotate(45deg);
}

.Popup[data-popper-placement^='top'] .Popup-Tail {
	top: 100%;
	transform: rotate(0deg);
}

.Popup[data-popper-placement^='right'] .Popup-Tail {
	right: 100%;
	transform: rotate(90deg);
}

.Popup[data-popper-placement^='bottom'] .Popup-Tail {
	bottom: 100%;
	transform: rotate(180deg);
}

.Popup[data-popper-placement^='left'] .Popup-Tail {
	left: 100%;
	transform: rotate(270deg);
}