.si-tooltip--border {
	padding: 6px 10px;
	color: hsl(var(--si-color));
	border: 2px solid hsl(var(--si-color));
	background: hsl(var(--si-background));
	&::before {
		position: absolute;
		z-index: -1;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		border-radius: inherit;
		background: inherit;
		content: '';
	}
	&::after {
		width: 12px;
		height: 12px;
		border: 2px solid hsl(var(--si-color));
	}
}

.si-tooltip--border-thick {
	color: hsl(var(--si-color));
	background: hsl(var(--si-background));
	box-shadow: 0 2px 10px 0 hsl(0, 0%, 0%, var(--si-shadow-opacity));
	&::before {
		position: absolute;
		z-index: -1;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		border-radius: inherit;
		background: inherit;
		content: '';
	}

	&.top {
		border-bottom: 4px solid hsl(var(--si-color));
		&::after {
			bottom: -7px;
			background: hsl(var(--si-color));
		}
	}
	&.left {
		border-right: 4px solid hsl(var(--si-color));
		&::after {
			right: -7px;
			background: hsl(var(--si-color));
		}
	}
	&.right {
		border-left: 4px solid hsl(var(--si-color));
		&::after {
			left: -7px;
			background: hsl(var(--si-color));
		}
	}
	&.bottom {
		border-top: 4px solid hsl(var(--si-color));
		&::after {
			top: -7px;
			background: hsl(var(--si-color));
		}
	}
}

.si-tooltip--shadow {
	color: hsl(var(--si-color));
	background: hsl(var(--si-background));
	box-shadow: 0 2px 10px 0 hsla(0, 0%, 0%, var(--si-shadow-opacity));
	&:before {
		position: absolute;
		z-index: -1;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		border-radius: inherit;
		background: inherit;
		content: '';
	}
	&:after {
		box-shadow: 0 2px 10px 0 hsla(0, 0%, 0%, var(--si-shadow-opacity));
	}
}