@import '../../sass/helpers/functions'

$table-cell-border: 1px solid $grey-lighter !default
$table-cell-border-width: 0 0 1px !default
$table-cell-padding: 0.5em 0.75em !default
$table-cell-padding-small: 0.25em 0.5em !default
$table-cell-heading-color: $text-strong !default

$table-head-cell-border-width: 0 0 2px !default
$table-head-cell-color: $text-strong !default
$table-foot-cell-border-width: 2px 0 0 !default
$table-foot-cell-color: $text-strong !default

$table-head-background-color: $white !default
$table-body-background-color: $white !default
$table-foot-background-color: $white !default

$table-row-hover-background-color: $white-ter !default

$table-row-active-background-color: $primary !default
$table-row-active-color: $primary-invert !default

$table-striped-row-even-background-color: $white-bis !default
$table-striped-row-even-hover-background-color: $white-ter !default

$table-row-is-undroppable-background-color: $danger-light !default
$table-row-is-undroppable-color: findColorInvert($table-row-is-undroppable-background-color) !default

$table-row-is-droppable-background-color: $success !default
$table-row-is-droppable-color: findColorInvert($table-row-is-droppable-background-color) !default

$table-row-is-drop-target-background-color: $link-dark !default
$table-row-is-drop-target-color: findColorInvert($table-row-is-drop-target-background-color) !default

$table-color: $grey-darker !default
$table-background-color: $white !default

$all-colors: mergeColorMaps($colors, $shades)

.table
	@extend %block
	position: relative
	color: $table-color
	border-collapse: separate
	tr,
	th
		background-color: $table-background-color
	// Modifiers
	&.is-bordered
		td,
		th
			border-width: 1px
		tr
			&:last-child
				td,
				th
					border-bottom-width: 1px
	td,
	th
		border: $table-cell-border
		border-width: $table-cell-border-width
		padding: $table-cell-padding
		vertical-align: middle
		&.is-narrow
			white-space: nowrap
			width: 1%
		&.is-selected
			background-color: $table-row-active-background-color
			color: $table-row-active-color
			cursor: pointer
			a,
			strong
				color: currentColor
		&.is-sticky-left
			z-index: 1
			background: inherit
			position: sticky
	th
		color: $table-cell-heading-color
		text-align: left
		font-weight: $weight-semibold
		.th-wrap
			display: flex
			min-width: 3.5rem
			align-items: center
			.icon
				margin-left: 0.5rem
				margin-right: 0
				font-size: 1rem
			&.is-right
				flex-direction: row-reverse
				text-align: right
				.icon
					margin-left: 0
					margin-right: 0.5rem
			&.is-centered
				justify-content: center
				text-align: center
		&.is-current-sort
			border-color: $grey
			font-weight: $weight-bold
		&.is-sortable:hover
			border-color: $grey-dark
		&.is-sortable,
		&.is-sortable .th-wrap
			cursor: pointer
		&.is-sticky-left
			position: sticky
			background: inherit
			z-index: 1
	thead
		background-color: $table-head-background-color
		td,
		th
			border-width: $table-head-cell-border-width
			color: $table-head-cell-color
	tfoot
		background-color: $table-foot-background-color
		td,
		th
			border-width: $table-foot-cell-border-width
			color: $table-foot-cell-color
	tbody
		background-color: $table-body-background-color
	// Modifiers
	&.is-bordered
		td,
		th
			border-width: 1px
		tr
			&:last-child
				td,
				th
					border-bottom-width: 1px
	&.is-fullwidth
		width: 100%
	&.is-hoverable
		tbody
			tr:not(.is-selected):not(.is-undroppable):not(.is-droppable):not(.is-drop-target)
				&:hover
					background-color: $table-row-hover-background-color
		&.is-striped
			tbody
				tr:not(.is-selected):not(.is-undroppable):not(.is-droppable):not(.is-drop-target)
					&:hover
						background-color: $table-row-hover-background-color
						&:nth-child(even)
							background-color: $table-striped-row-even-hover-background-color
	&.is-narrow
		td,
		th
			padding: 0.25em 0.5em
	&.is-striped
		tbody
			tr:not(.is-selected):not(.is-undroppable):not(.is-droppable):not(.is-drop-target)
				&:nth-child(even)
					background-color: $table-striped-row-even-background-color
	&.is-small
		font-size: $size-small
	&.is-medium
		font-size: $size-medium
	&.is-large
		font-size: $size-large
	+mobile
		font-size: $size-small
		td, th
			padding: $table-cell-padding-small
	tr
		&.is-draggable
			cursor: move
		&.is-undroppable
			cursor: no-drop
			background-color: $table-row-is-undroppable-background-color
			td,
			th,
			a
				color: $table-row-is-undroppable-color !important
		&.is-droppable
			background-color: $table-row-is-droppable-background-color
			cursor: pointer
			td,
			th,
			a
				color: $table-row-is-droppable-color !important
			&:hover
				background-color: findDarkColor($table-row-is-droppable-background-color)
		&.is-drop-target
			background-color: $table-row-is-drop-target-background-color
			td,
			th,
			a
				color: $table-row-is-drop-target-color !important
		&.is-selected
			cursor: pointer
			background-color: $table-row-active-background-color
			color: $table-row-active-color !important
			strong
				color: currentColor
			td,
			th
				border-color: $table-row-active-color
				color: currentColor
			.checkbox input
				&:checked + .check
					background: $table-row-active-color url(checkmark($table-row-active-background-color)) no-repeat center center
				+ .check
					border-color: $table-row-active-color
			&.is-drop-target
				background-color: $table-row-active-background-color
			&:hover
				background-color: bulmaDarken($table-row-active-background-color, 2.5%)
		&.is-empty:hover
			background-color: transparent
	@each $name, $pair in $all-colors
		$color: nth($pair, 1)
		$color-invert: nth($pair, 2)
		&.is-#{$name}
			background-color: $color
			color: $color-invert
			tr:not(.is-selected):not(.is-undroppable):not(.is-droppable):not(.is-drop-target)
				background-color: $color
			th
				background-color: $color
			th
				border-color: $color-invert,
			thead
				background-color: $color
				td,
				th
					border-width: $table-head-cell-border-width
					color: $color-invert
			tfoot
				background-color: $color
				td,
				th
					border-width: $table-foot-cell-border-width
					color: $color-invert
			tbody
				background-color: $color
				td,
				th
					color: $color-invert
			&.is-hoverable
				tbody
					tr:not(.is-selected):not(.is-undroppable):not(.is-droppable):not(.is-drop-target)
						&:hover
							background-color: bulmaDarken($color, 10%)
				&.is-striped
					tbody
						tr:not(.is-selected):not(.is-undroppable):not(.is-droppable):not(.is-drop-target)
							&:hover
								background-color: bulmaDarken($color, 10%)
								&:nth-child(even)
									background-color: bulmaDarken($color, 10%)
			&.is-striped
				tbody
					tr:not(.is-selected):not(.is-undroppable):not(.is-droppable):not(.is-drop-target)
						&:nth-child(even)
							background-color: bulmaDarken($color, 2.5%)
							th
								background-color: bulmaDarken($color, 2.5%)
						&:nth-child(odd)
							background-color: $color
							th
								background-color: $color
	.chevron-cell
		vertical-align: middle
	.checkbox-cell
		width: 40px
		.checkbox
			vertical-align: middle
			.check
				transition: none
	tr.detail
		box-shadow: inset 0 1px 3px $grey-lighter
		background: $white-bis
		.detail-container
			padding: 1rem
	&:focus
		border-color: $link
		box-shadow: 0 0 0 0.125em rgba($link, 0.25)

	// Modifiers
	&.is-bordered
		th.is-current-sort,
		th.is-sortable:hover
			border-color: $grey-lighter
			background: $background
	&.has-mobile-cards
		@include mobile
			thead
				display: none
			tfoot
				th
					border: 0 // Disable is-bordered
					display: inherit

			tr
				// Card style — Cannot extend inside media query
				box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
				max-width: 100%
				position: relative
				display: block
				td
					border: 0 // Disable is-bordered
					display: inherit
					&:last-child
						border-bottom: 0

				&:not(:last-child)
					margin-bottom: 1rem
				// Disables is-*
				&:not([class*='is-'])
					background: inherit
					&:hover
						background-color: inherit
				&.detail
					margin-top: -1rem
			tr:not(.detail):not(.is-empty):not(.table-footer)
				td
					display: flex
					width: auto
					justify-content: space-between
					align-items: center
					text-align: right
					border-bottom: 1px solid $background
					&:before
						content: attr(data-label)
						font-weight: $weight-semibold
						padding-right: 0.5em
						text-align: left

.b-table
	transition: opacity $speed $easing
	.table
		width: 100%
		border: 1px solid transparent
		border-radius: $radius
		border-collapse: separate
	.table-mobile-sort
		@include tablet
			display: none

	.level
		padding-bottom: 1.5rem

	&.is-loading
		position: relative
		pointer-events: none
		opacity: 0.5
		&:after
			@include loader
			position: absolute
			top: 4em
			left: calc(50% - 1em)
			width: 2em
			height: 2em
			border-width: 0.25em
			z-index: 1

.b-column-delete
	margin-left: 0.5rem

.table-container
	@extend %block
	+overflow-touch
	overflow: auto
	overflow-y: hidden
	max-width: 100%

.table-wrapper
	.table
		margin-bottom: 0
		padding-bottom: 0.75rem
	&:not(:last-child)
		margin-bottom: 1.5rem

.b-scroll
	.table-wrapper
		padding-bottom: 0.5rem
		margin-bottom: 0
		.table
			padding-bottom: 0
