.semantic-table {
	border: 0;
	width: 100%;
	margin: 0;
	padding: 0;
	border-collapse: collapse;
	border-spacing: 0;

	border-radius: 10px 10px 0 0;
	overflow: hidden;

	@include bp-down(lg) {
		border: 0;
	}

	thead {
		background: var(--secondary-color);
		min-height: 60px;
		color: #FFF;
		text-transform: uppercase;

		@include bp-down(lg) {
			display: none;
		}

		tr {
			th:first-child {
				padding-left: 45px;
			}

			th {
				text-transform: uppercase;
				line-height: 60px;
				text-align: left;
				@extend .font-12;
				@extend .semi-bold;
				padding-block: 0;
				padding-inline: 10px;
			}
		}
	}

	tbody {
		background: #fff;

		@include bp-down(lg) {
			border-radius: 10px;
			overflow: hidden;
			display: block;
			border-right: 1px solid;
			border-left: 1px solid;
			border-bottom: 1px solid;
			border-color: var(--primary-color);
		}

		tr {
			border-bottom: 1px solid var(--primary-color);
			border-inline: 1px solid var(--primary-color);
			height: 60px;

			@include bp-down(lg) {
				border: none;
				border-top: 3px solid var(--primary-color);
				display: grid;
				height: auto;
			}


			td {
				height: 60px;
				line-height: 60px;
				text-align: left;
				padding: 0 10px;
				font-size: 14px;

				@include bp-down(lg) {
					display: flex;
					gap: 1rem;
					justify-content: space-between;
					align-items: baseline;
					min-height: 60px;
					height: auto;
					line-height: 1.5;
					font-size: 14px;
					padding: 1rem;
					text-align: right;
					border-top: 1px solid var(--primary-color);
				}

				&:first-child {
					padding-left: 45px;

					@include bp-down(lg) {
						padding-left: 10px;
					}
				}

				&:before {
					@include bp-down(lg) {
						content: attr(data-label);
						font-size: 10px;
						text-transform: uppercase;
						font-weight: bold;
						text-align: left;
					}
				}

				i {
					margin-right: 8px;
				}

				a {
					color: var(--primary-color);
					text-decoration: underline;
					@extend .semi-bold;

					&:hover {
						opacity: .6;
					}
				}
			}
		}
	}

	&--striped {
		tbody {
			tr:nth-child(odd) {
				background-color: rgba(#CFE3F7, .4);
			}
		}
	}
}