.tippy-box {
	font-size: 14px;
	background: #000;
	color: #fff;
	border-radius: 5px;
	padding: 15px;
}

$namespace-prefix: "tippy";

.#{$namespace-prefix}-box {
	&[data-placement^='top'] > .#{$namespace-prefix}-svg-arrow {
		bottom: 0;

		&::after,
		> svg {
			top: 16px;
			transform: rotate(180deg);
		}
	}

	&[data-placement^='bottom'] > .#{$namespace-prefix}-svg-arrow {
		top: 0;

		> svg {
			bottom: 16px;
		}
	}

	&[data-placement^='left'] > .#{$namespace-prefix}-svg-arrow {
		right: 0;

		&::after,
		> svg {
			transform: rotate(90deg);
			top: calc(50% - 4px);
			left: 11px;
		}
	}

	&[data-placement^='right'] > .#{$namespace-prefix}-svg-arrow {
		left: 0;

		&::after,
		> svg {
			transform: rotate(-90deg);
			top: calc(50% - 4px);
			right: 11px;
		}
	}

	&[data-interactive] {
		> .#{$namespace-prefix}-svg-arrow path {
			pointer-events: auto;
		}
	}
}

.#{$namespace-prefix}-svg-arrow {
	position: absolute;
	width: 17px;
	height: 17px;
	fill: #333;
	pointer-events: none;

	> svg {
		position: absolute;
	}
}