@charset "UTF-8";
@component sf-table{
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	background-color: var(--color-white);
	border: 1px solid var(--table-border-color);
	font-size: 14px;
	color: var(--table-text-color);

	&::before {
		content: '';
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 1px;
		background-color: var(--table-border-color);
		z-index: 1;
	}

	&::after {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		width: 1px;
		height: 100%;
		background-color: var(--table-border-color);
		z-index: 1;
	}

	@descendent empty-text {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		color: color(var(--color-primary) s(16%) l(44%));
	}

	& th {
		white-space: nowrap;
		overflow: hidden;
	}

	& th, td {
		height: 40px;
		min-width: 0;
		box-sizing: border-box;
		text-overflow: ellipsis;
		vertical-align: middle;
		position: relative;

		@when center {
			text-align: center;
		}

		@when left {
			text-align: left;
		}

		@when right {
			text-align: right;
		}
	}

	& th.is-leaf, td {
		border-bottom: 1px solid var(--table-border-color);
	}

	@modifier border {
		& th, td {
			border-right: 1px solid var(--table-border-color);
		}

		& th {
			border-bottom: 1px solid var(--table-border-color);
		}
	}

	& th {
		background-color: var(--table-header-background);
		text-align: left;
	}

	& th > div {
		display: inline-block;
		padding-left: 18px;
		padding-right: 18px;
		line-height: 40px;
		box-sizing: border-box;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	& td > div {
		box-sizing: border-box;
	}

	@descendent header-wrapper{
		width: 100%;
	}

	@descendent body-wrapper{
		width : 100%;
	}

	@descendent header {
		table-layout: fixed;
		width : 100%;
	}

	@descendent body{
		table-layout: fixed;
		width : 100%;
	}

	@descendent header-wrapper {
		overflow: hidden;

		& thead div {
			background-color: var(--table-header-background);
			color: var(--table-text-color);
		}
	}

	@descendent body-wrapper {
		overflow: auto;
		position: relative;
	}
}

@component sf-table{
	& th > .cell {
		position: relative;
		word-wrap: normal;
		text-overflow: ellipsis;
		display: inline-block;
		line-height: 20px;
		vertical-align: middle;
		width: 100%;
		box-sizing: border-box;

		&.highlight {
			color: var(--color-primary);
		}
	}

	& .cell {
		box-sizing: border-box;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: normal;
		word-break: break-all;
		line-height: 24px;
		padding-left: 18px;
		padding-right: 18px;
	}
}


@component sf-table{
	@modifier border {
		& th, td {
			border-right: 1px solid var(--table-border-color);
		}

		& th {
			border-bottom: 1px solid var(--table-border-color);
		}
	}

	@modifier striped {
		& .sf-table__body {
			& tr:nth-child(2n) {
				td {
					background: #FAFAFA;
				}

				&.current-row td {
					background: color(var(--color-primary) tint(92%));
				}
			}
		}
	}
}