@import '../../../styles/_partials/index'

.TableList
	flex: 1
	width: 100%
	margin: 0
	padding: 0
	overflow-y: auto
	@include theme-color-gray-else-gray15
	font-weight: 300

	&.TableList__NoStripes
		.TableListRow
			background: none !important

	.TableListRowHeader
		font-weight: 700
		@include tracking(20)
		@include theme-background-gray15-else-graydark50

	&:last-of-type
		padding-bottom: 15px

	.TableListRow, > li
		$row-height: 48px

		display: table-row
		height: $row-height

		&:nth-child(even)
			@include theme-background-gray2-else-gray2row

		> strong
			display: table-cell
			width: 1%
			padding: 0 30px
			line-height: $row-height
			@include theme-color-graydark-else-white
			font-weight: 500
			white-space: nowrap

		> strong + div,
		> strong + p
			display: table-cell
			padding: 0 30px 0 0

			&.TableListRow__AlignMiddle
				vertical-align: middle

		> div,
		> p
			select,
			.FlySelect
				margin-right: 10px
				vertical-align: middle

			p
				margin: 14px 0

		> p
			display: block
			margin: 14px 0

		@at-root :global(.TableListRow__HasRightAlignedButton) // don't scope (keep for one-off use within app)
			> div
				display: flex

			button:last-of-type
				margin-left: auto

	&:not(.Form) .TableListRow
		input:not([type="checkbox"])
			width: 100%
			padding: 0
			cursor: text
			@include theme-color-gray-else-gray15
			font-weight: 300
			background: transparent
			border: 0
			outline: 0
			user-select: text

	&.Form .TableListRow
		input:not([type="checkbox"])
			@include flywheelInput
			width: 40%
			height: 32px
			padding: 0 10px
			transition: border .1s ease 0ms

			&:focus
				outline: none
				border-color: $gray25

ul.TableList
	> li
		@extend .TableListRow

.TableListRepeater.TableList.Form, .TableListMultiDisplay.TableList.Form
	display: table
	table-layout: fixed

	.TableList__Remove // don't scope
		svg
			fill: $red

	.TableListRow
		line-height: 50px

		input
			z-index: 1
			position: relative
			width: 100%
			height: 50px
			padding: 0 15px
			transition: box-shadow 0.1s
			background: transparent !important
			border: 0
			box-shadow: none !important

			&::placeholder
				color: $gray25

			&:focus
				outline: none
				box-shadow: 0 0 0 2px $green !important
				border-radius: 3px

		select, :global(.FlySelect)
			width: 100%

		> div
			position: relative
			padding: 0 15px

		> *
			display: table-cell
			width: auto
			vertical-align: middle

			&.TableListRow__Input,
			&:global(.TableListRow__Input)
				padding: 0 2px

			&.TableListRow__SeparatorRight,
			&:global(.TableListRow__SeparatorRight)
				@include theme-border-right

			&.TableList__SeparatorLeft,
			&:global(.TableList__SeparatorLeft)
				@include theme-border-left

		&:last-of-type > *
			@include theme-border-bottom

		.TableList__Remove
			width: 54px
			min-width: 54px
			padding: 0
			text-align: center

			span
				@include cursorPointer
				padding: 10px

			svg
				width: 10px
				vertical-align: middle

	.TableListRowHeader
		strong
			padding: 0 15px
			border-bottom: 0

			&.TableListRowHeader__SeparatorRight,
			&:global(.TableListRowHeader__SeparatorRight)
				@include if-theme-light()
					border-right: 1px solid $white

				@include if-theme-dark()
					border-right: 1px solid $gray

			&.TableListRowHeader__SeparatorLeft,
			&:global(.TableListRowHeader__SeparatorLeft)
				@include if-theme-light()
					border-left: 1px solid $white

				@include if-theme-dark()
					border-left: 1px solid $gray

			&.TableListRowHeader__RemoveHeading,
			&:global(.TableListRowHeader__RemoveHeading)
				width: 54px
				min-width: 54px

.TableListRepeaterAdd
	width: 100%
	margin: 0 0 15px
	padding-bottom: 15px
	text-align: center
	@include theme-border-bottom

	div
		width: 100% !important

.TableListRepeaterSubmit
	margin: 0 0 15px
	padding: 0 30px
	text-align: right

.TableListMultiDisplayBottomFloater
	height: 50px
	position: absolute
	bottom: 70px
	right: 0px