:root {
	--balloon-color: rgba(16, 16, 16, 0.95);
	--balloon-font-size: 0.75rem;
	--balloon-move: 0.25rem;
}

button.balloon,
a.balloon {
	overflow: visible;
}

.balloon {
	position: relative;
	cursor: pointer;
}

.balloon::after {
	opacity: 0;
	pointer-events: none;
	transition: all .18s ease-out .18s;
	text-indent: 0;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	font-weight: normal;
	font-style: normal;
	text-shadow: none;
	font-size: var(--balloon-font-size);
	background: var(--balloon-color);
	border-radius: 2px;
	color: #fff;
	content: attr(aria-label);
	padding: .5em 1em;
	position: absolute;
	white-space: nowrap;
	z-index: 10;
}

.balloon::before {
	width: 0;
	height: 0;
	border: 0.3125rem solid transparent;
	border-top-color: var(--balloon-color);
	opacity: 0;
	pointer-events: none;
	transition: all .18s ease-out .18s;
	content: '';
	position: absolute;
	z-index: 10;
}

.balloon:hover::before,
.balloon:hover::after,
.balloon[data-balloon-visible]::before,
.balloon[data-balloon-visible]::after,
.balloon:not([data-balloon-nofocus]):focus::before,
.balloon:not([data-balloon-nofocus]):focus::after {
	opacity: 1;
	pointer-events: none;
}

.balloon:not([data-balloon-pos])::after {
	bottom: 100%;
	left: 50%;
	margin-bottom: 0.625rem;
	transform: translate(-50%, var(--balloon-move));
	transform-origin: top;
}

.balloon:not([data-balloon-pos])::before {
	bottom: 100%;
	left: 50%;
	transform: translate(-50%, var(--balloon-move));
	transform-origin: top;
}

.balloon:not([data-balloon-pos]):hover::after,
.balloon:not([data-balloon-pos])[data-balloon-visible]::after {
	transform: translate(-50%, 0);
}

.balloon:not([data-balloon-pos]):hover::before,
.balloon:not([data-balloon-pos])[data-balloon-visible]::before {
	transform: translate(-50%, 0);
}

.balloon.font-awesome::after {
	font-family: FontAwesome, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.balloon[data-balloon-break]::after {
	white-space: pre;
}

.balloon[data-balloon-break][data-balloon-length]::after {
	white-space: pre-line;
	word-break: break-word;
}

.balloon[data-balloon-blunt]::before,
.balloon[data-balloon-blunt]::after {
	transition: none;
}

.balloon[data-balloon-pos='up']::after {
	bottom: 100%;
	left: 50%;
	margin-bottom: 0.625rem;
	transform: translate(-50%, var(--balloon-move));
	transform-origin: top;
}

.balloon[data-balloon-pos='up']::before {
	bottom: 100%;
	left: 50%;
	transform: translate(-50%, var(--balloon-move));
	transform-origin: top;
}

.balloon[data-balloon-pos='up']:hover::after,
.balloon[data-balloon-pos='up'][data-balloon-visible]::after {
	transform: translate(-50%, 0);
}

.balloon[data-balloon-pos='up']:hover::before,
.balloon[data-balloon-pos='up'][data-balloon-visible]::before {
	transform: translate(-50%, 0);
}

.balloon[data-balloon-pos='up-left']::after {
	bottom: 100%;
	left: 0;
	margin-bottom: 0.625rem;
	transform: translate(0, var(--balloon-move));
	transform-origin: top;
}

.balloon[data-balloon-pos='up-left']::before {
	bottom: 100%;
	left: 0.3125rem;
	transform: translate(0, var(--balloon-move));
	transform-origin: top;
}

.balloon[data-balloon-pos='up-left']:hover::after,
.balloon[data-balloon-pos='up-left'][data-balloon-visible]::after {
	transform: translate(0, 0);
}

.balloon[data-balloon-pos='up-left']:hover::before,
.balloon[data-balloon-pos='up-left'][data-balloon-visible]::before {
	transform: translate(0, 0);
}

.balloon[data-balloon-pos='up-right']::after {
	bottom: 100%;
	right: 0;
	margin-bottom: 0.625rem;
	transform: translate(0, var(--balloon-move));
	transform-origin: top;
}

.balloon[data-balloon-pos='up-right']::before {
	bottom: 100%;
	right: 0.3125rem;
	transform: translate(0, var(--balloon-move));
	transform-origin: top;
}

.balloon[data-balloon-pos='up-right']:hover::after,
.balloon[data-balloon-pos='up-right'][data-balloon-visible]::after {
	transform: translate(0, 0);
}

.balloon[data-balloon-pos='up-right']:hover::before,
.balloon[data-balloon-pos='up-right'][data-balloon-visible]::before {
	transform: translate(0, 0);
}

.balloon[data-balloon-pos='down']::after {
	left: 50%;
	margin-top: 0.625rem;
	top: 100%;
	transform: translate(-50%, calc(var(--balloon-move) * -1));
}

.balloon[data-balloon-pos='down']::before {
	width: 0;
	height: 0;
	border: 0.3125rem solid transparent;
	border-bottom-color: var(--balloon-color);
	left: 50%;
	top: 100%;
	transform: translate(-50%, calc(var(--balloon-move) * -1));
}

.balloon[data-balloon-pos='down']:hover::after,
.balloon[data-balloon-pos='down'][data-balloon-visible]::after {
	transform: translate(-50%, 0);
}

.balloon[data-balloon-pos='down']:hover::before,
.balloon[data-balloon-pos='down'][data-balloon-visible]::before {
	transform: translate(-50%, 0);
}

.balloon[data-balloon-pos='down-left']::after {
	left: 0;
	margin-top: 0.625rem;
	top: 100%;
	transform: translate(0, calc(var(--balloon-move) * -1));
}

.balloon[data-balloon-pos='down-left']::before {
	width: 0;
	height: 0;
	border: 0.3125rem solid transparent;
	border-bottom-color: var(--balloon-color);
	left: 0.3125rem;
	top: 100%;
	transform: translate(0, calc(var(--balloon-move) * -1));
}

.balloon[data-balloon-pos='down-left']:hover::after,
.balloon[data-balloon-pos='down-left'][data-balloon-visible]::after {
	transform: translate(0, 0);
}

.balloon[data-balloon-pos='down-left']:hover::before,
.balloon[data-balloon-pos='down-left'][data-balloon-visible]::before {
	transform: translate(0, 0);
}

.balloon[data-balloon-pos='down-right']::after {
	right: 0;
	margin-top: 0.625rem;
	top: 100%;
	transform: translate(0, calc(var(--balloon-move) * -1));
}

.balloon[data-balloon-pos='down-right']::before {
	width: 0;
	height: 0;
	border: 0.3125rem solid transparent;
	border-bottom-color: var(--balloon-color);
	right: 0.3125rem;
	top: 100%;
	transform: translate(0, calc(var(--balloon-move) * -1));
}

.balloon[data-balloon-pos='down-right']:hover::after,
.balloon[data-balloon-pos='down-right'][data-balloon-visible]::after {
	transform: translate(0, 0);
}

.balloon[data-balloon-pos='down-right']:hover::before,
.balloon[data-balloon-pos='down-right'][data-balloon-visible]::before {
	transform: translate(0, 0);
}

.balloon[data-balloon-pos='left']::after {
	margin-right: 0.625rem;
	right: 100%;
	top: 50%;
	transform: translate(var(--balloon-move), -50%);
}

.balloon[data-balloon-pos='left']::before {
	width: 0;
	height: 0;
	border: 0.3125rem solid transparent;
	border-left-color: var(--balloon-color);
	right: 100%;
	top: 50%;
	transform: translate(var(--balloon-move), -50%);
}

.balloon[data-balloon-pos='left']:hover::after,
.balloon[data-balloon-pos='left'][data-balloon-visible]::after {
	transform: translate(0, -50%);
}

.balloon[data-balloon-pos='left']:hover::before,
.balloon[data-balloon-pos='left'][data-balloon-visible]::before {
	transform: translate(0, -50%);
}

.balloon[data-balloon-pos='right']::after {
	left: 100%;
	margin-left: 0.625rem;
	top: 50%;
	transform: translate(calc(var(--balloon-move) * -1), -50%);
}

.balloon[data-balloon-pos='right']::before {
	width: 0;
	height: 0;
	border: 0.3125rem solid transparent;
	border-right-color: var(--balloon-color);
	left: 100%;
	top: 50%;
	transform: translate(calc(var(--balloon-move) * -1), -50%);
}

.balloon[data-balloon-pos='right']:hover::after,
.balloon[data-balloon-pos='right'][data-balloon-visible]::after {
	transform: translate(0, -50%);
}

.balloon[data-balloon-pos='right']:hover::before,
.balloon[data-balloon-pos='right'][data-balloon-visible]::before {
	transform: translate(0, -50%);
}

.balloon[data-balloon-length='small']::after {
	white-space: normal;
	width: 5rem;
}

.balloon[data-balloon-length='medium']::after {
	white-space: normal;
	width: 9.375rem;
}

.balloon[data-balloon-length='large']::after {
	white-space: normal;
	width: 16.25rem;
}

.balloon[data-balloon-length='xlarge']::after {
	white-space: normal;
	width: 35rem;
}

@media screen and (max-width: 768px) {
	.balloon[data-balloon-length='xlarge']::after {
		white-space: normal;
		width: 90vw;
	}
}

.balloon[data-balloon-length='fit']::after {
	white-space: normal;
	width: 100%;
}