/**
 * @file styles/helpers.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.
 *
 * @brief Helper classes
 *
 */

// Buttons
.pkp_button {
	display: inline-block;
	padding: 0 0.5em;
	background: #fff;
	border: @bg-border-light;
	border-radius: @radius;
	font-size: @font-sml;
	line-height: 2rem;
	font-weight: @bold;
	color: @primary;
	text-decoration: none;
	box-shadow: 0 1px 0 @bg-border-color-light;
	cursor: pointer;

	&:hover,
	&:focus {
		color: @primary;
		border-color: @primary;
		outline: 0;
	}

	&:active {
		box-shadow: 0 0 2px;
	}

	&:disabled {
		color: @text-disabled;

		&:hover {
			color: @text-disabled;
			border-color: @bg-border-color-light;
			cursor: not-allowed;
		}
	}
}

.pkp_button_primary {
	&:extend(.pkp_button all);
	color: #fff;
	background: @primary;
	border-color: @primary;
	box-shadow: 0 1px 0 @primary;

	&:hover,
	&:focus {
		background: @primary-lift;
		color: #fff;
	}

	&:disabled,
	&:disabled:hover {
		&:extend(.pkp_button[disabled] all);
		color: #fff;
		background: @bg-dark;
		border-color: @bg-dark;
		box-shadow: 0 1px 0 @shade;
		cursor: not-allowed;
	}
}

.pkp_button_offset {
	&:extend(.pkp_button all);
	color: @no;

	&:hover,
	&:focus {
		border-color: @no;
		color: @no;
	}

	&:disabled,
	&:disabled:hover {
		&:extend(.pkp_button[disabled] all);
		color: #fff;
		background: @bg-dark;
		border-color: @bg-dark;
		box-shadow: 0 1px 0 @shade;
		cursor: not-allowed;
	}
}

.pkp_button_link {
	&:extend(.pkp_button all);
	box-shadow: none;
	border-color: transparent;

	&:disabled:hover {
		border-color: transparent;
	}
}

// Spinner
.pkp_spinner {

	&:after {
		display: inline-block;
		position: relative;
		width: 1.25rem;
		height: 1.25rem;
		vertical-align: middle;
		.animation( pkp_spin .6s linear infinite );
		border-radius: 100%;
		border-top: 1px solid @shade;
		border-bottom: 1px solid transparent;
		border-left: 1px solid @shade;
		border-right: 1px solid transparent;
		border-top-color: rgba(0,0,0,0.5);
		border-left-color: rgba(0,0,0,0.5);
		content: '';
		opacity: 1;
	}
}

// Loading component
.pkp_loading {
	font-size: @font-sml;
	line-height: @line-sml;

	.pkp_spinner {
		margin-right: 0.25em;
	}
}

// An unstyled list with default margins, padding and list-style remove
.pkp_unstyled_list {
	margin: 0;
	padding: 0;
	list-style: none;
}

// CSS triangle
// To use, extend .pkp_caret and a direction, like .pkp_caret_down
.pkp_caret {
	content: ' ';
	display: inline-block;
	width: 0;
	height: 0;
	border: 0.25rem solid transparent;
	vertical-align: middle;
}

.pkp_caret_down {
	border-top: 0.375rem solid;
}

.pkp_caret_right {
	border-left: 0.375rem solid;
}

// Screen-reader text
.pkp_screen_reader {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	left: -2000px;

	&:focus {
		background-color: #fff;
		border-radius: 3px;
		box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
		-webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
		clip: auto !important;
		color: #000;
		display: block;
		font-size: @font-base;
		height: auto;
		line-height: normal;
		padding: 1rem;
		position: absolute;
		left: 0.5rem;
		top: 0.5rem;
		text-decoration: none;
		width: auto;
		z-index: 100000;
	}
}

// @todo Set this to .pkp_helpers_clear() with parentheses once the class is no
// longer used anywhere in the markup, so it doesn't print into the rendered
// stylesheet.
.pkp_helpers_clear {
	&:before,
	&:after {
		content: " ";
		display: table;
	}
	&:after {
		clear: both;
	}
}

// A help link
.pkp_help_link {
	display: inline-block;
	padding: 0.25rem 0;
	font-size: @font-tiny;
	line-height: @line-tiny;
	font-weight: @bold;
	text-decoration: none;
	border: none;
	box-shadow: none;
	color: @primary;
	z-index: 3;

	&:hover,
	&:focus {
		color: @primary-lift;
	}

	&:focus {
		outline: 0;
		box-shadow: 0 0 0 @radius @primary;
		border-radius: @radius;
	}
}

// A small help link that attaches to a tab
.pkp_help_tab {
	position: absolute;
	top: -2rem;
	right: 2rem;
	padding: 0.5rem 1em;
	background: @lift;
	border-top-left-radius: @radius;
	border-top-right-radius: @radius;
}

.pkp_help_modal {
	&:extend(.pkp_help_tab);
	top: 0.5rem;
	padding: 0.5rem;
	right: 3rem;
	border: none;
}

// Summary of an uploaded file
.pkp_uploadedFile_summary {
	font-size: @font-sml;
	line-height: @line-sml;

	.filename {
		&:extend(.pkp_form .section > .label);

		.display {
			line-height: 2rem;
		}

		.edit {
			line-height: @line-sml;
		}
	}

	.details {
		margin-top: 0.5rem;
		color: @text-light;

		> span {
			margin-left: 2rem;

			&:first-child {
				margin-left: 0;
			}

			&:before {
				.fa();
				padding-right: 0.25em;
				color: #aaa;
			}
		}
	}

	.pixels:before {
		content: @fa-var-desktop;
	}

	.print {
		margin-left: 2rem;

		&:before {
			.fa();
			padding-right: 0.25em;
			color: #aaa;
			content: @fa-var-print;
		}
	}

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

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

	.type.doc:before,
	.type.docx:before {
		content: @fa-var-file-word-o;
	}

	.type.xls:before,
	.type.xlsx:before {
		content: @fa-var-file-excel-o;
	}

	.file_size:before {
		content: @fa-var-hdd-o;
	}
}

// @todo from here on down needs to be evaluated and removed if not useful
.pkp_helpers_invisible {
	visibility: hidden;
}

.pkp_helpers_display_none {
	display: none !important;
}

.pkp_helpers_align_left {
	float: left;
}

.pkp_helpers_align_right {
	float: right;
}

.pkp_helpers_text_left {
	text-align: left;
}

.pkp_helpers_text_right {
	text-align: right;
}

.pkp_helpers_text_center {
	text-align: center;
}

.pkp_helpers_text_justify {
	text-align: justify;
}

.pkp_helpers_title_padding {
	padding: 5px !important;
}

.pkp_helpers_image_left {
	float: left;
	margin: 4px 10px 4px 0;
}

.pkp_helpers_image_right {
	float: right;
	margin: 4px 0 4px 10px;
}

.pkp_helpers_container_center {
	margin: 0 auto;
}

.pkp_helpers_debug, .pkp_helpers_debug div {
	border: 1px dashed red;
	padding: 2px;
}

.pkp_helpers_flatlist {
	margin: 0;
	padding: 0;

	li {
		float: left;
		position: relative;
	}
}

.pkp_helpers_bulletlist {
	li {
		list-style: disc;
	}
}

.pkp_helpers_icon_link_valign {
	line-height:24px;
}

.pkp_helpers_moveicon {
	cursor: move;
}

.pkp_helpers_full {
	width: 100%;
}

.pkp_helpers_half {
	width: 50%;
}

.pkp_helpers_third {
	width: 33%;
}

.pkp_helpers_quarter {
	width: 25%;
}

.pkp_helpers_fifth {
	width: 20%;
}

.pkp_helpers_threeQuarter {
	width: 75%;
}

.pkp_helpers_underline:after {
	border-bottom: 2px solid white;
	content: " ";
	display: block;
}

.pkp_helpers_dotted_underline {
	border-bottom: 1px dotted #999;
}

.pkp_helpers_black_bg {
	background-color: black;
}

.pkp_helpers_text_warn    { color: @warn; }
.pkp_helpers_text_primary { color: black; }

.NMI_TYPE_CUSTOM_EDIT {
	display: none;
}