$tooltip-arrow-size: 5px
$tooltip-arrow-margin: 2px

$tooltip-multiline-sizes: (small: 180px, medium: 240px,	large: 300px)

@mixin tooltip-arrow($direction, $color)
	@if ($direction == 'is-top')
		border-top: $tooltip-arrow-size solid $color
		border-right: $tooltip-arrow-size solid transparent
		border-left: $tooltip-arrow-size solid transparent
		bottom: calc(100% + #{$tooltip-arrow-margin})
	@else if ($direction == 'is-bottom')
		border-right: $tooltip-arrow-size solid transparent
		border-bottom: $tooltip-arrow-size solid $color
		border-left: $tooltip-arrow-size solid transparent
		top: calc(100% + #{$tooltip-arrow-margin})
	@else if ($direction == 'is-right')
		border-top: $tooltip-arrow-size solid transparent
		border-right: $tooltip-arrow-size solid $color
		border-bottom: $tooltip-arrow-size solid transparent
		left: calc(100% + #{$tooltip-arrow-margin})
	@else if ($direction == 'is-left')
		border-top: $tooltip-arrow-size solid transparent
		border-bottom: $tooltip-arrow-size solid transparent
		border-left: $tooltip-arrow-size solid $color
		right: calc(100% + #{$tooltip-arrow-margin})

@mixin tooltip($direction, $breakpoint: '')
	&.#{$direction}
		&:before,
		&:after
			@if ($direction == 'is-top')
				top: auto
				right: auto
				bottom: calc(100% + #{$tooltip-arrow-size} + #{$tooltip-arrow-margin})
				left: 50%
				transform: translateX(-50%)
			@else if ($direction == 'is-bottom')
				top: calc(100% + #{$tooltip-arrow-size} + #{$tooltip-arrow-margin})
				right: auto
				bottom: auto
				left: 50%
				transform: translateX(-50%)
			@else if ($direction == 'is-right')
				top: 50%
				right: auto
				bottom: auto
				left: calc(100% + #{$tooltip-arrow-size} + #{$tooltip-arrow-margin})
				transform: translateY(-50%)
			@else if ($direction == 'is-left')
				top: 50%
				right: calc(100% + #{$tooltip-arrow-size} + #{$tooltip-arrow-margin})
				bottom: auto
				left: auto
				transform: translateY(-50%)
		@each $name, $pair in $colors
			$color: nth($pair, 1)
			&.is-#{$name}:before
				@include tooltip-arrow($direction, $color)
		&.is-multiline
			@each $name, $size in $tooltip-multiline-sizes
				&.is-#{$name}:after
					width: $size

// Base
+supports-hover
	.b-tooltip
		@include tooltip('is-top')
		@include tooltip('is-right')
		@include tooltip('is-bottom')
		@include tooltip('is-left')
		position: relative
		display: inline-flex
		&:before,
		&:after
			position: absolute
			content: ''
			opacity: 0
			visibility: hidden
			pointer-events: none
		&:before
			z-index: 889
		&:after
			content: attr(data-label)
			width: auto
			padding: 0.35rem 0.75rem
			border-radius: $radius-large
			font-size: 0.85rem
			font-weight: $weight-normal
			box-shadow: 0 1px 2px 1px rgba(0, 1, 0, 0.2)
			z-index: 888
			white-space: nowrap
		&:not([data-label='']):hover:before,
		&:not([data-label='']):hover:after,
		&:not([data-label='']):focus:before,
		&:not([data-label='']):focus:after
			opacity: 1
			visibility: visible
		// Modifiers
		@each $name, $pair in $colors
			$color: nth($pair, 1)
			$color-invert: nth($pair, 2)
			&.is-#{$name}:after
				background: $color
				color: $color-invert
		&:not([data-label='']).is-always
			&:before,
			&:after
				opacity: 1
				visibility: visible
		&.is-multiline
			&:after
				display: flex
				text-align: center
				white-space: normal

		&.is-dashed
			border-bottom: 1px dashed $grey-light
			cursor: default
		&.is-square
			&:after
				border-radius: 0
		&.is-animated
			&:before,
			&:after
				transition: opacity $speed-slow $easing, visibility $speed-slow $easing
