$easeOutBounce: cubic-bezier(0.6, 0.6, 0.7, 1.4);
$expandDuration: 0.2s;

.table {
	.context-menu {
		@include type-style-body-sm;

		.context-menu__item-btn {
			color: $c-text;
		}
	}
	.context-menu__button {
		height: rem(36);
	}
}

.table-search__wrapper {
	padding: spacing('base');
	border-bottom: 1px solid $c-border;
}

.table-filters__wrapper {
	display: flex;
	flex-flow: row nowrap;
	padding: spacing('tight') spacing('base');
	overflow-x: auto;

	.tag {
		flex: 1 0 auto;
	}
}

.table__inner {
	overflow: auto;
}

.table__inner__loader {
	margin-top: 100px;
}

.table-row,
.table-header-row {
	display: flex;
	border-bottom: 1px solid $c-border-light;
}

.table-expander-cell {
	cursor: pointer;
}

.table-expander-row {
	transition: transform $expandDuration $easeOutBounce;
}

.table-row-group {
	background-color: $c-white;
	border-left-color: transparent;
	transition: background-color $expandDuration ease-out,
		border-left-width 0.1s ease-out,
		border-left-color $expandDuration $easeOutBounce 0.1s;
}

.table-row-group.table-row-group--is-dirty {
	border-left: 2px solid rgba($c-primary, 0.5);
}

.table-row-group.table-row-group--expanded {
	background-color: rgba($c-primary-light, 0.05);

	> .table-row {
		border-bottom: none;
	}

	> .table-row > .table-cell > .table-expander-row {
		transform: rotate(90deg);
	}

	> .table-subcomponent-enter-done > .card {
		opacity: 1;
		transform: translate(0, 0);
	}

	+ .table-row-group:not(.table-row-group--expanded) {
		> .table-row {
			border-top: 1px solid $c-border-light;
		}
	}
}

.table-subcomponent {
	padding: 0 spacing('loose') spacing('loose');

	.card {
		opacity: 0;
		transform: translate(0, 0.5rem);
		transition: opacity $expandDuration ease-out 0.05s,
			transform $expandDuration $easeOutBounce;
	}
}

.table-cell,
.table-header-cell {
	display: flex;
	width: 100%;

	&:first-child {
		padding-left: spacing('base');
	}

	&.table-checkbox-cell {
		width: rem(36);
	}
}

.table-header-row {
	background-color: $c-grey-00;

	&.table-header-row--has-selections {
		display: flex;

		.table-header-cell {
			white-space: nowrap;
		}
	}
}

.table-header-cell {
	@include type-style-label;
	display: inline-flex;
	align-items: center;
	padding-top: spacing('extra-tight');
	padding-left: spacing('tight');
	padding-bottom: spacing('extra-tight');
	height: rem(44);

	&.table-checkbox-cell {
		display: inline-flex;
		align-items: center;
	}

	&.table-header-cell--is-sortable {
		cursor: pointer;

		// NOTE: Code smells due to restrictions of vendor library: https://github.com/react-tools/react-table
		> * {
			display: inline-block;
		}
	}

	.table-header-row--has-selections & {
		letter-spacing: 0;
		text-transform: none;
	}
}

.table-header-cell__icon {
	flex: 0 0 auto;
	opacity: 0;
	visibility: hidden;
	fill: $c-text-icon;

	&.table-header-cell__icon--is-visible {
		opacity: 1;
		visibility: visible;
	}
}

.table-header-cell__icon--is-reversed {
	transform: rotate(180deg);
}

.table-cell {
	padding-top: rem(12);
	padding-left: spacing('tight');
	padding-bottom: rem(12);

	&:last-child {
		padding-right: spacing('tight');
	}
}

.table-selected-text {
	@include type-style-body-sm;
	display: inline-block;
	margin-right: rem(8);
}

.table-pagination__wrapper {
	padding: spacing('base');
}

.table-loader,
.table-loader--is-visible {
	display: none;
}

.table__no-results-message {
	@include type-style-body-sm;
	padding: spacing('base');
}