/**
 * @file styles/controllers/grid/grid.less
 *
 * Copyright (c) 2014-2021 Simon Fraser University
 * Copyright (c) 2003-2021 John Willinsky
 * Distributed under the GNU GPL v3. For full terms see the file docs/COPYING.
 *
 * @ingroup pkp_controllers_grid
 *
 * @brief Classes for grid structure
 */

.pkp_controllers_grid {
	position: relative;
	font-size: @font-sml;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
	border-radius: @radius;
	background: @lift;

	.header,
	.footer {
		.pkp_helpers_clear;
	}

	// Header
	.header {
		position: relative;
		padding: 0 0.5rem 0 1rem;
		border-bottom: @grid-border;
		border-top-left-radius: @radius;
		border-top-right-radius: @radius;

		h4 {
			display: inline-block;
			font-size: @font-base;
			margin: 0;
			padding-top: 0.5rem;
			padding-bottom: 0.5rem;
			line-height: 2rem;
		}
	}

	// Footer
	.footer {
		border-top: @grid-border;
		padding: 0rem 0.5rem 0.5rem 1rem;
	}

	// Actions (header + footer )
	.actions {
		display: inline-block;
		float: right;
		margin: 0;
		padding: 7px 0;
		list-style: none;

		li {
			display: inline-block;
		}

		a {
			&:extend(.pkp_button);
		}
	}

	// Search filter
	.pkp_linkaction_search {
		padding: 0 1px; // 1px prevents aliased icon from getting clipped at the edge

		&:before {
			.fa();
			content: @fa-var-search;
			margin-right: 0.5em;
		}

		&.is_open {
			background: @lift;
			border-color: @primary;

			&:before {
				content: @fa-var-caret-up;
			}
		}
	}

	// Search filter
	.filter {
		padding: 1rem;
		font-size: @font-sml;

		label {
			font-size: @font-sml;
			font-weight: @normal;
			font-style: italic;
		}

		.section {
			margin-bottom: 0.5rem;

			&:last-child {
				margin-bottom: 0;
			}
		}

		.pkp_controllers_extrasOnDemand {

			> a {
				line-height: 2rem;
				padding-left: 3rem;
			}

			> a .fa {
				line-height: 2rem;
				width: 2rem;
				height: 2rem;
			}
		}

		.pkp_spinner {
			float: right;
		}
	}

	// Grid rows
	table {
		width: 100%;
		border-collapse: collapse;
	}

	tr {
		position: static;

	}

	// Content rows only
	.gridRow:not(:first-child) {
		border-top: @grid-border;
	}

	th,
	td {
		padding-left: 1rem;
		padding-right: 1rem;
		vertical-align: top;
	}

	thead {
		font-size: @font-tiny;
		line-height: 16px;
		color: @text-light-rgba;

		th {
			box-shadow: inset 0 -1px 0 @grid-border-color;
			padding-top: 0.5rem;
			padding-bottom: 0.5rem;
			font-weight: @normal;
		}

		// Go ahead and remove header columns when there's only one column
		// per header
		th:first-child:last-child {
			&:extend(.pkp_screen_reader all);
		}
	}

	td {
		position: relative;
		padding-top: 0.5rem;
		padding-bottom: calc(~"0.5rem - 1px");
		line-height: @line-base;
	}

	// Empty row
	.empty td {
		padding: 0.5rem 0;
		font-size: @font-sml;
		font-style: italic;
		line-height: @line-base;
		color: @text-light;
		color: @text-light-rgba;
		text-align: center;
	}

	// Expand/collapse row actions
	.has_extras td:first-child,
	.row_controls td:first-child {
		padding-left: 2rem;
	}

	.show_extras,
	.hide_extras {
		position: absolute;
		top: 0.5rem; // matches td padding
		left: 0;
		width: 2rem;
		height: @line-base; // matches td line-height
		line-height: @line-base;
		text-align: center;
		cursor: pointer;
		text-decoration: none;
	}

	.show_extras:before {
		&:extend(.pkp_caret);
		&:extend(.pkp_caret_right);
		margin-top: -4px;
	}

	.hide_extras:before {
		&:extend(.pkp_caret);
		&:extend(.pkp_caret_down);
	}

	// Ordering items
	.pkp_linkaction_moveItem {
		.fa();

		&:before {
			content: @fa-var-sort;
		}
	}

	.ordering {

		&.gridRow {
			border-top: 1px dashed #ddd;
		}

		&:hover {
			background: @grid-border-color;
		}

		.show_extras,
		.hide_extras {
			display: none;
		}

		.row_actions {
			right: auto;
			left: 0;
		}
	}

	.order_finish_controls {
		padding: 0.5rem;
		text-align: right;

		.saveButton {
			&:extend(.pkp_button all);
		}

		.cancelFormButton {
			&:extend(.pkp_button_offset all);
		}
	}

	.order_message {
		position: absolute;
		background-color: lightGrey;
		padding: 0.5em 0.5em;
		display: inline-table;
		top: 2em;
		width: 15em;
		z-index: 2;
	}

	// Labels within a grid cell which appear before a link action in the cell
	// This is designed for submission and file IDs.
	[id^="component-grid-submissions"] .first_column .label,
	[id^="component-grid-pubids"] .first_column + .pkp_helpers_text_left .label,
	.gridCellContainer .label.before_actions {
		display: inline-block;
		margin-right: 0.5em;
		padding: 0 0.5em;
		border: @bg-border-light;
		border-radius: @radius;
		font-size: @font-tiny; // extra small
	}

	// Additional handling of file ID labels to display file type icons
	.gridCellContainer > .label .file_extension {
		position: relative;
		display: block;
		margin: 0 -0.5em;
		padding: 0 0.5em 0 2rem;
		line-height: @line-sml;

		&:before {
			.fa();
			content: @fa-var-file-o;
			display: block;
			position: absolute;
			left: 0;
			width: @line-sml;
			height: @line-sml;
			border-right: @bg-border-light;
			line-height: @line-sml;
			text-align: center;
			color: @text-light;
		}

		&.doc:before,
		&.docm:before,
		&.docx:before,
		&.dot:before,
		&.dotm:before,
		&.dotx:before {
			content: @fa-var-file-word-o;
		}

		&.rtf:before,
		&.txt:before,
		&.odt:before {
			content: @fa-var-file-text-o;
		}

		&.gif:before,
		&.jpg:before,
		&.jpeg:before,
		&.png:before {
			content: @fa-var-file-image-o;
		}

		&.xml:before,
		&.htm:before,
		&.html:before,
		&.shtml:before {
			content: @fa-var-file-code-o;
		}

		&.pdf:before {
			content: @fa-var-file-pdf-o;
		}

		&.avi:before,
		&.mov:before,
		&.mkv:before {
			content: @fa-var-file-video-o;
		}

		&.odp:before,
		&.pot:before,
		&.potm:before,
		&.potx:before,
		&.ppa:before,
		&.ppam:before,
		&.pps:before,
		&.ppsm:before,
		&.ppsmx:before,
		&.ppt:before,
		&.pptm:before,
		&.pptx:before {
			content: @fa-var-file-powerpoint-o;
		}

		&.mp3:before,
		&.mp4:before,
		&.ogg:before,
		&.wma:before {
			content: @fa-var-file-audio-o;
		}

		&.csv:before,
		&.xls:before,
		&.ods:before,
		&.xlsb:before,
		&.xlsm:before,
		&.xlsx:before,
		&.xlt:before,
		&.xltm:before,
		&.xltx:before {
			content: @fa-var-file-excel-o;
		}

		&.zip:before {
			content: @fa-var-file-archive-o;
		}
	}

	// Infinite scroll
	.scrollable {
		position: relative;
		max-height: 150px;
		overflow: auto;
	}

	// Actions inline with the row
	.row_actions {
		position: absolute;
		top: 0.5rem;
		right: 0;

		> a {
			.fa();
			width: 24px;
			height: 24px;
			line-height: 24px;
			text-align: center;
			text-decoration: none;
		}
	}

	// Secondary row of actions
	.row_controls {
		display: none;

		td {
			line-height: @line-base;
			padding-top: 3px;
			padding-bottom: 3px;
		}

		a {
			display: inline-block;
			margin-right: 1em;
			padding-left: 0.5em;
			padding-right: 0.5em;
			font-size: @font-tiny;
			font-weight: @bold;
			text-decoration: none;
		}
	}

	.pkp_linkaction_disable,
	.pkp_linkaction_delete,
	.pkp_linkaction_remove_item ,
	.pkp_linkaction_deleteFile,
	.pkp_linkaction_remove,
	.pkp_linkaction_deleteSection,
	.pkp_linkaction_deleteGenre,
	.pkp_linkaction_deleteSubmissionChecklist,
	.pkp_linkaction_resetAll,
	.pkp_linkaction_resetEmail,
	.pkp_linkaction_removeUserGroup,
	.pkp_linkaction_deleteAuthor,
	.pkp_linkaction_deleteQuery,
	.pkp_linkaction_deleteNote,
	.pkp_linkaction_deleteGalley {
		color: @no;
	}

	// Icons
	.checked,
	.notChecked {
		.fa();
	}

	.checked:after {
		content: @fa-var-check-square-o;
		color: @yes;
	}

	.notChecked:after {
		content: @fa-var-ban;
		color: @no;
	}

	// Pagination
	.gridPaging {
		.pkp_helpers_clear;
		padding: 0.5rem 1rem;
		color: @text-light-rgba;
		border-top: @grid-border;

		.gridItemsPerPage {
			float: left;

			select {
				display: inline-block;
				width: auto;
				height: @line-sml;
				margin-left: 0.5em;
			}
		}

		.gridPages {
			float: right;

			a {
				&:extend(.pkp_button all);
			}
		}
	}

	// Items shown for infinite scrolling
	.gridPagingScrolling {
		position: relative;
		color: @text-light-rgba;
		text-align: center;
		height: 3rem;
		line-height: 3rem;
		background: @grid-border-color;
		border-bottom-right-radius: @radius;
		border-bottom-left-radius: @radius;

		.item_count {
			position: absolute;
			right: 1rem;
		}

		.pkp_linkaction_icon_more_items {
			&:extend(.pkp_button_link all);

			&:before {
				&:extend(.pkp_caret);
				&:extend(.pkp_caret_down);
				position: absolute;
				bottom: 6px;
				left: 50%;
				margin-left: -2px;
				border-top-width: 4px;
			}
		}

		.pkp_loading {
			visibility: hidden;
			position: absolute;
			top: 0;
			width: 100%;
			background: @grid-border-color;
			line-height: 3rem;
			opacity: 0;
			transition: 0.3s opacity, 0.3s visibility;
		}
	}

	&.loading {

		.gridPagingScrolling {

			.pkp_loading {
				visibility: visible;
				opacity: 1;
			}
		}
	}
}

// Categorized grids
.pkp_grid_category {

	.gridRow:not(:first-child) {
		border-top: none;
	}

	.gridRow.category,
	.category_controls {

		.label {
			font-weight: @bold;
		}
	}
}

// Listbuilder grids
.pkp_controllers_listbuilder {

	.gridRow {

		.pkp_linkaction_delete {

			&:before {
				.fa();
				content: @fa-var-times;
			}
		}
	}
}

// File grids
[id^="component-grid-files"] {

	// Headers aren't needed in file grids
	thead {
		&:extend(.pkp_screen_reader all);
	}

	.pkp_linkaction_downloadFile {
		text-decoration: none;
	}

	[id^="component-grid-files"] td:not(.first_column),
	[id^="component-grid-files"] th:not(.first_column) {
		color: @text-light-rgba;
		width: 50px;
	}
}

// Grids without titles
.pkp_grid_no_title {
	box-shadow: none;
	border-bottom: @grid-border;

	.header {
		background: transparent;
	}

	thead {
		background: transparent;
	}
}

// Make emails wrap rather than overflow table column in the users grid
[id^="component-grid-settings-user-usergrid-"] .gridRow td:last-child .label {
	word-break: break-word;
}

/* Fix strange grid float issue when placed inside subtabs */
.pkpTabs--side .pkpTab .pkp_controllers_grid .header {
	max-height: 3rem;
}

// TODO check if these styles can be removed
.pkp_controllers_grid {

	// See TODO at lib/pkp/templates/controllers/grid.tpl:54
	.options {
		float: right;
		line-height: 24px;
		height: 24px;
		vertical-align: middle;
	}

	.options a {
		font-size: 90%;
	}

	.options a:before {
		margin-left: 20px;
	}

	// See TODO at /var/www/html/ojs/lib/pkp/templates/controllers/grid/common/cell/statusCell.tpl
	a.task {
		width: 100%;
		text-indent: -1500px;
		overflow: hidden;
		display: block;
		background-position: 50% 50%;
		background-repeat: no-repeat;
		margin: 0;
		height: 24px;
	}
}

// Space between two grids
div:not(:last-child) > .pkp_controllers_grid {
	margin-bottom: 1rem;
}