@import "../mixins/sticky_submission_scroll";

.assessment-panel {
	& > .card-header {
		position: sticky;
		top: 0;
		z-index: 10;
		.assessment-bar {
			display: flex;
			// Assessment bar element spacing
			& > * {
				&:not(:last-child) {
					margin-right: 10px;
				}
				&.assessment-bar-fill {
					flex-grow: 1;
				}
				&:not(.assessment-bar-fill) {
					flex-shrink: 0;
				}
			}
			.assessment-bar-text {
				align-self: center;
			}
			.form-group {
				margin-bottom: 0;
			}
			textarea {
				min-height: 80px;
				resize: vertical;
			}
		}
	}

	& > .card-body {
		& > .row > * {
			// Minimum width for resizable columns
			min-width: 200px;
			display: flex;
			flex-direction: column;
			padding-top: 15px;
		}
		padding-top: 0;
		padding-bottom: 0;
	}

	.submission-container {
		--sticky-top: 0;
		flex-grow: 1;
		margin-top: 6px;
		.submitted-file-data > div > button {
			margin-bottom: 10px;
		}
		.submitted-file.sticky > div {
			@include sticky-submission-scroll;
		}
	}

	.grader-container {
		--sticky-top: 0;
		flex-grow: 1;
		margin-bottom: 1rem;
		.grader-tab > div > button {
			margin-bottom: 10px;
		}
		.grader-tab.sticky {
			@include sticky-submission-scroll;
			.grader-html-output {
				overflow: auto;
				margin-bottom: 12px;
			}
		}
	}

	.nav-pills {
		// Make the nav pills the same size as the dropdown menu in the left
		// column, so the columns line up nicely.
		margin-bottom: $form-group-margin-bottom;
		& > li > a {
			/*height: $input-height-base;*/
			padding: $padding-base-vertical $padding-base-horizontal;
		}
	}
}
