//------------------------------------------------------------------------------
// @base: Tables
//------------------------------------------------------------------------------
// @author: hanakin -- midaym
// @version: 1.1.0
// @description:
//
//------------------------------------------------------------------------------

@use 'sass:math';

//
// #settings

// Layout Variables
$table-row-height: $sp6;
$table-last-row-height: $default-height;
$table-header-height: $table-last-row-height;
$table-header-padding-bottom: $sp1;
$table-column-spacing: $sp4;
$table-column-padding: math.div($table-column-spacing, 2);
$table-card-header-height: $sp8;
$table-card-title-top: 20px;
$table-card-padding: $sp2;
$table-button-padding-right: $table-card-padding;
$table-cell-top: math.div($table-card-padding, 2);

//Theme Variables
$table-bg-color: $default-page-color;
$table-header-color: $default-action-bg;
$table-border-color: $default-border-color;
$table-hover-color: $default-action-bg;
$table-selection-color: $default-action-bg;


//
// #scss

table {
	@include type(body1);
	white-space: nowrap;
	background-color: $table-bg-color;
	border: $default-border-size solid $table-border-color;
	display: block;
	overflow-x: auto;
	width: 100%;

	thead {
		padding-bottom: math.div($table-header-padding-bottom, 2);
	}

	tbody {
		tr {
			position: relative;
			height: $table-row-height;
			transition: background-color 0.28s $default-animation-curve;

			&:hover {
				background-color: $table-hover-color;
			}
		}
	}

	td,
	th {
		text-align: center;
		vertical-align: middle;
		border-top: $default-border-size solid $table-border-color;
		border-bottom: $default-border-size solid $table-border-color;
		box-sizing: border-box;
		height: $table-row-height;
		padding: 0 $table-column-padding;

		&:first-of-type {
			padding-left: $table-card-padding;
		}

		&:last-of-type {
			padding-right: $table-card-padding;
		}
	}

	th {
		@include type(body1);
		text-align: left;
		text-overflow: ellipsis;
		vertical-align: bottom;
		background-color: $table-header-color;
		border-left: $default-border-size solid $table-border-color;
		padding-bottom: $table-header-padding-bottom;
	}

	@media (min-width: $md) {
		display: table;
		width: auto;
	}
}