@import '../../../client/css/defaults';

.repository--assessment-stats {
	background: $color-bg;
	height: 100%;
	border-radius: $dimension-rounded-radius;
	padding: 1em;
	box-sizing: border-box;
	display: flex;
	gap: 1em;

	hr {
		width: 100%;
		height: 1px;
		border: none;
		border-bottom: 1px solid $color-shadow;
		margin: 0;
	}

	.settings {
		display: flex;
		flex-direction: column;
		font-size: 0.8em;
		line-height: 1.7em;
	}

	.view-mode {
		display: flex;
		align-items: center;
		margin-bottom: 1em;

		> span {
			display: inline-block;
			width: 5.5em;
		}

		select {
			@include select-input();

			border: 1px solid $color-shadow;
			font-size: 0.8em;
		}
	}

	.controls {
		> span {
			display: inline-block;
			width: 6em;
		}
	}

	.repository--data-grid-assessments,
	.repository--data-grid-attempts {
		height: 100%;
		width: 100%;
		overflow: scroll;
	}

	.repository--data-grid-scores {
		display: flex;
		flex-direction: column;
		height: calc(100% - 2px);
		border: 1px solid $color-shadow;
		border-radius: $dimension-rounded-radius;
		position: relative;

		.repository--button {
			display: inline-block;
			margin: 1em;
			align-self: center;
		}

		.data-grid {
			width: calc(100% - 1px);
			height: calc(100% - 5em);
			flex-grow: 1;
			display: flex;
			flex-direction: column;

			// Tweaks to the react-data-table-component
			> div:first-child {
				flex-grow: 0;
			}

			> div:nth-child(2) {
				overflow-y: scroll;
				flex-grow: 1;
			}

			> div:last-child {
				border-bottom: 1px solid $color-shadow;
			}

			.rdt_TableHeader {
				background: transparent;
			}
		}
	}

	.repository--assessment-stats-filter-controls {
		display: inline-block;
		margin-top: 1em;
	}

	.data-table-header {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
}