.tbl-wrap {
	.tbl {
		&.data {
			th,
			td {
				padding: var(--#{$prefix}spacer-1) var(--#{$prefix}spacer-4);
				border-bottom: 1px solid;
				line-height: $line-height-base;
				vertical-align: middle;
			}
			thead {
				th {
					height: var(--#{$prefix}spacer-10);
					background-color: var(--#{$prefix}secondary-5);
					border-bottom: 1px solid var(--#{$prefix}secondary-30);
					font-size: var(--#{$prefix}fz-body-sm);
					color: var(--#{$prefix}gray-90);
					font-weight: map-get($fws, bold);
					text-align: left;
				}
			}
			tbody {
				th,
				td {
					height: var(--#{$prefix}spacer-14);
					padding-top: 1.3rem;
					padding-bottom: 1.4rem;
					background-color: var(--#{$prefix}white);
					border-bottom: 1px solid var(--#{$prefix}gray-30);
					font-size: var(--#{$prefix}fz-body-md);
					color: var(--#{$prefix}gray-90);
					font-weight: map-get($fws, normal);
					text-align: left;

					& .data-none{
						text-align: center;
					}
				}
			}
			&.cursor{
				cursor: pointer;
			}
		}
		&.row {
			border-top: 1px solid var(--#{$prefix}secondary-30);
		}
	}
	&.scroll {
		overflow-x: auto;
		overflow-y: hidden;
		.tbl {
			th,
			td {
				white-space: nowrap;
			}
		}
	}
	.def-list {
		$bdc: var(--#{$prefix}gray-50);
		@include flex-layout();
		flex-wrap: wrap;
		border-top: 1px solid $bdc;
		border-bottom: 1px solid $bdc;
		padding: var(--#{$prefix}spacer-2) 0;
		> dt,
		> dd {
			min-height: var(--#{$prefix}spacer-12);
			padding-top: .9rem;
			padding-bottom: 1rem;
			color: var(--#{$prefix}gray-90);
			line-height: $line-height-base;
			text-align: left;
			vertical-align: top;
		}
		> dt {
			width: 12.8rem;
			font-weight: map-get($fws, bold);
		}
		> dd {
			width: calc(100% - 12.8rem);
		}
	}
}

@include mobile {
	.tbl-wrap {
		&.mob-scroll {
			width: 100%;
			th,
			td {
				white-space: nowrap;
			}
		}
	}
}