@use '../../shared-styles/spacing' as *;
@use '../../shared-styles/radii' as *;

.tableWrapper {
	background: #ffffff;
	border: 1px solid var(--theme-border-color);
	border-top: none;
	border-radius: 0 0 $mod-radius-10 $mod-radius-10;
	overflow: hidden;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;

	&:hover {
		border-color: var(--theme-border-color);
	}
}

.extensionTable {
	width: 100%;
	border-collapse: collapse;

	thead {
		background: var(--theme-palette-color-7);
		border-bottom: 1px solid var(--theme-border-color);

		th {
			padding: $mod-space-12 $mod-space-16;
			font-weight: 400;
			font-size: 13px;
			color: var(--theme-text-color);
			text-transform: uppercase;
			letter-spacing: 0.5px;
			border-right: 1px solid var(--theme-border-color);

			&:last-child {
				border-right: none;
			}
		}
	}

	tbody {
		tr {
			border-bottom: 1px solid var(--theme-border-color);
			transition: background-color 0.2s ease;

			&:last-child {
				border-bottom: none;
			}

			&:hover {
				background: var(--theme-palette-color-7);
			}
		}
	}
}

.checkboxColumn {
	width: 5%;
	padding: $mod-space-12 $mod-space-16 !important;
	text-align: center;

	input[type='checkbox'] {
		margin: 0;
		cursor: pointer;
	}
}

.extensionColumn {
	width: 25%;
	text-align: left;
}

.descriptionColumn {
	width: 60%;
	text-align: left;
}

.statusColumn {
	width: 10%;
	text-align: right;
}