opal-components/src/components/opal-popover/index.css

[Rionite](https://github.com/Riim/Rionite) component set.

@component OpalPopover {
	position: absolute;
	z-index: 600;
	display: none;
	box-sizing: border-box;
	padding: 15px;
	border: 1px solid hsl(0,0%,80%);
	border-radius: 6px;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0,0,0,.2);
	line-height: 1.5;
	cursor: default;

	@el arrow {
		position: absolute;
		width: 0;
		height: 0;

		&::before,
		&::after {
			position: absolute;
			width: 0;
			height: 0;
			border: 10px solid transparent;
			content: '';
		}

		&::after {
			border: 8px solid transparent;
		}
	}

	@el content-slot {
		position: relative;
		display: block;
	}

	@mod position=top,
		position=top-left,
		position=top-right
	{
		bottom: 100%;
		margin-bottom: 15px;

		@el arrow {
			top: 100%;

			&::before,
			&::after {
				border-top-color: hsl(0,0%,80%);
				border-bottom-width: 0;
				transform: translateX(-50%);
			}

			&::after {
				border-top-color: #fff;
			}
		}
	}

	@mod position=top {
		left: 50%;
		transform: translateX(-50%);

		@el arrow {
			left: 50%;
		}
	}

	@mod position=top-left {
		left: 0;

		@el arrow {
			transform: translateX(-1px);
		}
	}

	@mod position=top-right {
		right: 0;

		@el arrow {
			transform: translateX(1px);
		}
	}

	@mod position=right,
		position=right-top,
		position=right-bottom
	{
		left: 100%;
		margin-left: 15px;

		@el arrow {
			right: 100%;

			&::before,
			&::after {
				right: 0;
				border-right-color: hsl(0,0%,80%);
				border-left-width: 0;
				transform: translateY(-50%);
			}

			&::after {
				border-right-color: #fff;
			}
		}
	}

	@mod position=right {
		top: 50%;
		transform: translateY(-50%);

		@el arrow {
			top: 50%;
		}
	}

	@mod position=right-top {
		top: 0;

		@el arrow {
			transform: translateY(-1px);
		}
	}

	@mod position=right-bottom {
		bottom: 0;

		@el arrow {
			transform: translateY(1px);
		}
	}

	@mod position=bottom,
		position=bottom-left,
		position=bottom-right
	{
		top: 100%;
		margin-top: 15px;

		@el arrow {
			bottom: 100%;

			&::before,
			&::after {
				bottom: 0;
				border-top-width: 0;
				border-bottom-color: hsl(0,0%,80%);
				transform: translateX(-50%);
			}

			&::after {
				border-bottom-color: #fff;
			}
		}
	}

	@mod position=bottom {
		left: 50%;
		transform: translateX(-50%);

		@el arrow {
			left: 50%;
		}
	}

	@mod position=bottom-left {
		left: 0;

		@el arrow {
			transform: translateX(-1px);
		}
	}

	@mod position=bottom-right {
		right: 0;

		@el arrow {
			transform: translateX(1px);
		}
	}

	@mod position=left,
		position=left-top,
		position=left-bottom
	{
		right: 100%;
		margin-right: 15px;

		@el arrow {
			left: 100%;

			&::before,
			&::after {
				left: 0;
				border-right-width: 0;
				border-left-color: hsl(0,0%,80%);
				transform: translateY(-50%);
			}

			&::after {
				border-left-color: #fff;
			}
		}
	}

	@mod position=left {
		top: 50%;
		transform: translateY(-50%);

		@el arrow {
			top: 50%;
		}
	}

	@mod position=left-top {
		top: 0;

		@el arrow {
			transform: translateY(-1px);
		}
	}

	@mod position=left-bottom {
		bottom: 0;

		@el arrow {
			transform: translateY(1px);
		}
	}

	@mod opened {
		display: block;
		animation: OpalPopover__fade-in-animation .1s linear;
	}
}

@keyframes OpalPopover__fade-in-animation {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}