.rrui__tooltip
{
	display     : flex;
	align-items : center;

	padding-left  : var(--rrui-tooltip-side-padding);
	padding-right : var(--rrui-tooltip-side-padding);
	height        : var(--rrui-tooltip-height);

	color            : var(--rrui-tooltip-text-color);
	background-color : var(--rrui-tooltip-background-color);

	border-radius : var(--rrui-tooltip-border-radius);

	cursor: default;
	outline: none;
}

.rrui__tooltip
{
	opacity: 0;
}

.rrui__tooltip--after-show
{
	opacity: var(--rrui-tooltip-opacity);
}

/* `--before-hide` must be placed after `--after-show`. */
.rrui__tooltip--before-hide
{
	opacity: 0;
}

.rrui__tooltip--top
{
	transform: translateY(calc(-1 * var(--rrui-tooltip-hidden-distance)));
}

.rrui__tooltip--top.rrui__tooltip--after-show
{
	transform: translateY(calc(-1 * var(--rrui-tooltip-visible-distance)));
}

/* `--before-hide` must be placed after `--after-show`. */
.rrui__tooltip--top.rrui__tooltip--before-hide
{
	transform: translateY(calc(-1 * var(--rrui-tooltip-hidden-distance)));
}

.rrui__tooltip--left
{
	transform: translateX(calc(-1 * var(--rrui-tooltip-hidden-distance)));
}

.rrui__tooltip--left.rrui__tooltip--after-show
{
	transform: translateX(calc(-1 * var(--rrui-tooltip-visible-distance)));
}

/* `--before-hide` must be placed after `--after-show`. */
.rrui__tooltip--left.rrui__tooltip--before-hide
{
	transform: translateX(calc(-1 * var(--rrui-tooltip-hidden-distance)));
}

.rrui__tooltip--bottom
{
	transform: translateY(var(--rrui-tooltip-hidden-distance));
}

.rrui__tooltip--bottom.rrui__tooltip--after-show
{
	transform: translateY(var(--rrui-tooltip-visible-distance));
}

/* `--before-hide` must be placed after `--after-show`. */
.rrui__tooltip--bottom.rrui__tooltip--before-hide
{
	transform: translateY(var(--rrui-tooltip-hidden-distance));
}

.rrui__tooltip--right
{
	transform: translateX(var(--rrui-tooltip-hidden-distance));
}

.rrui__tooltip--right.rrui__tooltip--after-show
{
	transform: translateX(var(--rrui-tooltip-visible-distance));
}

/* `--before-hide` must be placed after `--after-show`. */
.rrui__tooltip--right.rrui__tooltip--before-hide
{
	transform: translateX(var(--rrui-tooltip-hidden-distance));
}

.rrui__tooltip--after-show,
.rrui__tooltip--before-hide
{
	transition : opacity var(--rrui-tooltip-animation-duration), transform var(--rrui-tooltip-animation-duration);
}

.rrui__tooltip__target
{
	/* Prevents entering text selection mode
	   on mobile devices when tapping down and holding */
	user-select: none;
	/* Resets `cursor: pointer` set by `interactive={true}`'s `.rrui__button-reset`. */
	cursor: inherit;
	/* Resets `white-space : nowrap` set by `interactive={true}`'s `.rrui__button-reset`. */
	white-space: initial;
}

.rrui__tooltip__target--inline {
	display: inline-block;
}