@use '@coreui/coreui/scss/coreui'; // not strictly necessary, but it allows us to clarify the origin of mixins

// Scrollable container with sticky header styles
.scrollable-container {
	// Scrollable area styles
	flex-grow: 1;
	overflow: auto;
	min-height: 0; // This is important for flex containers to allow proper scrolling

	// General sticky header style
	.sticky-header {
		position: sticky;
		top: 0;
		z-index: 10;
		background-color: #f0f0f0; // Ensure the background is opaque
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); // Add subtle shadow to separate header
	}

	// Specific styles for collections nesting table
	.collections-nesting-table {
		.collections-nesting-table-header {
			@extend .sticky-header;
		}
	}

	// Styles for standard tables
	table {
		thead,
		th {
			position: sticky;
			top: 0;
			z-index: 10;
			background-color: #f0f0f0;
			box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
		}
	}
}

// For pages using a flex column layout
.flex-column-layout {
	display: flex;
	flex-direction: column;
	height: 100%;

	// Header content that stays fixed
	.fixed-header {
		flex-shrink: 0;
	}

	// Scrollable content
	.scrollable-content {
		@extend .scrollable-container;
	}
}

@include coreui.media-breakpoint-down('xl') {
	.flex-column-layout.collapse-under-xl {
		height: unset;
	}
}
