/**
 * @defgroup pkp_form
 */

/**
 * @file styles/form.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_form
 *
 * @brief Form Builder Vocabulary classes
 */

/**
 * FBV styles
 */
.pkp_form {
	font-size: @font-sml;
	line-height: @line-sml;

	fieldset:not(.pkpFilter__input--sliderMultirange):not(.pkpFormGroup):not(.pkpFormField--options) {
		margin: 0 0 2rem 0;
		padding: 0;
		border: none;
		// Chrome sets the fieldset min-width to min-content, which
		// prevents our grids from shrinking properly.
		// See: https://css-tricks.com/almanac/properties/w/width/#article-header-id-2
		min-width: auto;

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

	// At the moment we don't really differentiate in the way we use these
	// elements
	legend,
	label,
	.section > .label // Prevents it from effecting .label elements in grids
	{
		display: block;
		font-size: 1rem;
		font-weight: @bold;
	}

	// error
	label.error, span.error {
		margin-top: 4px;
		margin-bottom: 4px;
		padding-left: 0.5em;
		border-left: 0.5rem solid @no;
		font-size: @font-sml;
		line-height: @line-sml;
		color: @no;
	}

	.section {
		margin-bottom: 2rem;

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

		&:not(.inline) {
			.pkp_helpers_clear();
		}
	}

	// Inline sections
	.inline {
		float: left;
		padding-right: 1rem;

		&:last-child {
			padding-right: 0;
		}
	}

	label {
		cursor: pointer;
	}

	input[type="date"],
	input[type="email"],
	input[type="file"],
	input[type="month"],
	input[type="number"],
	input[type="password"],
	input[type="search"],
	input[type="tel"],
	input[type="text"],
	input[type="url"],
	input[type="week"],
	textarea,
	select {
		display: block;
		width: 100%;
		height: 2rem; // browser-compatibility for select fields
		background-color: @lift;
		padding: 0 0.25em;
		font-size: @font-sml;
		line-height: 2rem;
		border: @bg-border;
	}

	select[multiple] {
		height: unset;
	}

	textarea {
		height: 10em;
		line-height: @line-sml;
	}

	// Textarea size modifiers
	.short {
		height: 6em;
	}

	.medium {
		height: 12em;
	}

	.tall {
		height: 18em;
	}

	// Checkbox and radio lists
	.checkbox_and_radiobutton {
		margin: 0;
		padding: 0;
		list-style: none;

		input {
			display: inline-block;
			margin-right: 0.5em;
		}

		p {
			display: inline-block;
		}

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

	// Required fields
	.req {
		font-weight: @bold;
		color: @no;
		padding-left: 0.25em;
	}

	// display required asterisk next to last <p> element
	.section > label > p:last-of-type {
		display: inline-block;
	}

	// Disabled fields
	input[disabled],
	textarea[disabled],
	select[disabled] {
		background: @bg;
		color: @text-light;
		color: @text-light-rgba;
	}

	input[type="range"][disabled] {
		background: transparent;
	}

	// Field descriptions and labels beneath fields
	.description,
	.sub_label {
		font-size: @font-sml;
		line-height: @line-sml;
		font-weight: @normal;
		color: @text-light;
		color: @text-light-rgba;
	}

	.description {
		margin-bottom: 0.5rem;
	}

	.sub_label {
		font-style: italic;
	}

	// When a .description element is followed by another .description
	.description + .description,
	// When a .description element is attached to a fieldset and followed
	// by a section
	.description + .section {
		margin-top: 2rem;
	}

	// Localization popovers
	.localization_popover_container {
		position: relative;
		// fix collapsed div in firefox, which caused the translation icon to
		// appear in the wrong space
		display: block;

		// Localization globe icon within TinyMce
		&:after {
			.fa();
			content: @fa-var-globe;
			position: absolute;
			top: calc(~"0.5rem - 2px");
			right: 1rem;
			z-index: 2;
			width: 20px;
			height: 20px;
			font-size: 20px;
			text-align: center;
			color: @text-light;
		}
	}

	.localization_popover_container_focus,
	.localization_popover_container_focus_forced {
		display: block;
		padding: 0.5rem;
		background-color: @bg;

		&:after {
			top: 0.75rem;
			color: @text;
		}
	}

	.localizationIncomplete:after {
		color: @warn;
	}

	.localizationComplete:after {
		color: @yes;
	}

	.localization_popover {
		display: none;
		position: absolute;
		left: 0;
		z-index: 9;
		padding: 0.5rem;
		background-color: @bg;
	}

	.localization_popover_container_focus_forced .localization_popover {
		display: block;
		position: relative;
		margin-top: 0.5rem;
		padding: 0;
		z-index: 8;
	}

	// Position locale label off-screen but accessible to screen readers
	label.locale {
		&:extend(.pkp_screen_reader);

		&:focus {
			&:extend(.pkp_screen_reader:focus);
		}
	}

	label.locale_textarea {
		margin-top: 1rem;
		font-size: @font-sml;
	}

	// Loading indicator
	.pkp_spinner {
		opacity: 0;
		margin-right: 0.5em;
		.transition(opacity 0.3s ease-in-out);

		&.is_visible {
			opacity: 1;
		}
	}

	// Hide form elements when in wizard mode
	.is_wizard_mode {
		display: none;
	}

	// Star selection in radio buttons
	.pkp_star_selection {
		font-size: @font-sml;
		font-weight: @normal;

		.fa {
			color: @star-on;
		}
	}
}

// Row of buttons
[dir='ltr'] {
	.form_buttons {
		text-align: right;
	}
}

[dir='rtl'] {
	.form_buttons {
		text-align: left;
	}
}

.form_buttons {
	text-align: right;

	a {
		&:extend(.pkp_button all);

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

a[id^="publicIdentifiersForm-clearPubId-button"],
a[id^="publicIdentifiersForm-clearObjectsPubIds-button"] {
	&:extend(.pkp_button all);
	&:extend(.pkp_button_offset all);
}

// Required fields notice
.formRequired {
	display: inline-block;
	margin-top: 2rem;
	padding: 0.75rem 1em;
	background: @bg-light;
	border-left: 2px solid @primary;
	font-size: @font-sml;
	font-style: italic;
	line-height: @line-sml;
}

// Form file view
.pkp_form_file_view {
	.pkp_helpers_clear;
	margin-bottom: 1rem;
	padding: 2rem;
	background: @bg-light;

	.data {

		span {
			display: block;
			font-size: @font-sml;
			line-height: @line-sml;
		}

		.title {
			font-weight: @bold;
		}

		.value {
			margin-bottom: 1rem;
			color: @text-light;
			color: @text-light-rgba;

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

	input {
		color: @text;
		color: @text-rgba;
	}
}

// To be used alongside .pkp_form_file_view (both classes assigned)
.pkp_form_image_view {

	.img {
		text-align: center;

		img {
			max-width: 100%;
		}
	}

	// @todo use common breakpoints
	@media(min-width: 767px) {

		> div {
			width: 50%;
			float: right;
		}

		.data {
			float: left;
			padding-right: 2rem;
		}
	}
}

// Link action links that should have a warning color
[class*=pkp_linkaction_deleteFile] {
	color: @no;
}

// jQuery UI datepicker
.ui-datepicker {
	width: 25em;
	padding: 1rem;
	max-width: 100%;
	background: @bg;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);

	&:empty {
		display: none;
	}
}

.ui-datepicker-prev,
.ui-datepicker-next {
	display: block;
	position: absolute;
	top: 1rem;
	left: 1rem;
	width: 2rem;
	height: 2rem;
	text-align: center;
	cursor: pointer;

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


	> span {
		&:extend(.pkp_screen_reader);
	}
}

.ui-datepicker-next {
	left: auto;
	right: 1rem;

	&:before {
		content: @fa-var-arrow-right;
	}
}

.ui-datepicker-title {
	margin-bottom: 1rem;
	font-size: @font-sml;
	font-weight: @bold;
	text-align: center;
}

.ui-datepicker-calendar {
	width: 100%;
	text-align: center;

	thead {
		font-size: @font-sml;
	}

	tbody {
		background: @lift;

		tr {
			border-top: 1px solid @bg;

			&:first-child {
				border-top: none;
			}
		}
	}

	a {
		display: block;
		text-decoration: none;

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

// Autocomplete fields
// @todo the UI could probably be improved. When several results appear, you
//  can loop through them with up and down keys, but that's not really intuitive
//  with the UI pattern that's been implemented. Also, the suggestions panel
//  could be absolutely positioned. Right now it causes a lot of jankiness when
//  it comes in and out.
.pkp_form input.ui-autocomplete-input {
	display: inline-block; // Allow the label to sit on top
}

.ui-autocomplete {
	&:extend(.pkp_unstyled_list);
	width: 100%;
	max-width: 40em;
	border: @bg-border;
	border-top: none;
	background: @lift;
	font-size: @font-tiny;
	line-height: @line-tiny;
	box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
	z-index: 99999;
	max-height: 20rem;
	overflow: auto;

	> li {
		display: block;
		padding: 0.5rem;
		cursor: pointer;
		text-overflow: ellipsis;
		overflow-x: hidden;
		white-space: nowrap;
		cursor: pointer;

		&.ui-state-focus {
			background: @bg;
		}
	}
}

.ui-autocomplete-loading {
	background-image: url(data:image/gif;base64, );
	background-position: center right;
	background-size: 1rem;
	background-repeat: no-repeat;
}

// Tag-it component
.tagit {
	&:extend(.pkp_unstyled_list);
	&:extend(.pkp_form input[type="text"]);
	.pkp_helpers_clear();
	height: auto; // overwrite text field styles
	cursor: text;
	min-height: 2.5em;

	> li {
		display: inline-block;

		&.tagit-choice {
			margin-right: 0.5em;
			padding-left: 0.5em;
			background: @bg;
			border-radius: @radius;
			line-height: 1.5rem;
		}
	}

	input[type="text"] {
		display: inline-block;
		border: none;
		width: inherit;
		line-height: 30px;
		height: 30px;
		vertical-align: top;
		padding: 0 0.5em;
	}

	.tagit-new input:focus {
		outline: 0;
	}
}

.tagit-close {
	padding: 0 0.5em;
	color: @no;
	cursor: pointer;
}

// Fixes the positioning of tinymce tooltips
// skin.min.css (the tinymce we're loading) sets their position to absolute,
// but the tooltips seem to set position relative to the viewport, not the
// document. This causes problems for textareas in modals, where the scroll
// position of the modal differs from the scroll position of the document.
// "I'm almost definitely pretty sure that might be the explanation." ~NW
.mce-widget.mce-tooltip {
	position: fixed;
}

// Forms in modals
.pkp_modal .pkp_form {

	.form_buttons {
		&:extend(.pkp_modal_panel > .footer all);
		margin: 1rem -1rem -1rem;
	}

	// Override grid filter form buttons which appear in modals
	.pkp_form.filter .form_buttons {
		margin: 0;
		padding: 0;
		background: none;
	}
}

// Navigation Menu drag-and-drop
.pkp_nav_management {
	.pkp_helpers_clear;
	position: relative;
	border: @bg-border;
}

.pkp_nav_assigned,
.pkp_nav_unassigned {
	float: left;
	width: 50%;

	ul {
		.pkp_unstyled_list;

		ul {
			margin-left: 2rem;
		}
	}

	> ul {
		padding-bottom: 4rem;
	}
}

.pkp_nav_management .item {
	position: relative;
	margin: 1rem;
	border: @bg-border;
	padding: 0.5rem 1rem;
	cursor: pointer;

	.item_title {
		padding-left: 2rem;

		.fa {
			position: absolute;
			top: 0;
			left: 0;
			width: 2rem;
			height: 100%;
			border-right: @bg-border;
			line-height: 2.5rem;
			text-align: center;
		}
	}

	.item_buttons {
		position: absolute;
		top: 0;
		right: 0;
		height: 100%;
		line-height: 2.5rem;

		button {
			margin-right: 0.5em;
			padding: 0 0.5em;
			border: none;
			background: transparent;
			line-height: 2.5rem;
			color: @primary;
			cursor: pointer;
		}
	}
}

.pkp_nav_item_placeholder,
.pkp_nav_assigned .pkp_is_sorting .ui-sortable:empty {
	margin: 1rem;
	border: 1px dashed @bg-border-color-light;
	padding: 0.5rem 1rem 0.5rem 3rem;
	min-height: 2.5rem;
}

.pkp_nav_item_placeholder {
	border-color: @bg-border-color;
}

.pkp_nav_assigned .pkp_is_sorting .ui-sortable:empty {
	margin-left: 3rem;
	margin-right: 1rem;
}

// Hide slots nested two levels deep
.pkp_nav_assigned .pkp_is_sorting ul .ui-sortable {
	display: none;
}

.pkp_nav_assigned {

	&:before {
		content: '';
		position: absolute;
		top: 0;
		left: 50%;
		height: 100%;
		border-right: @bg-border;
	}
}

.pkp_nav_management_header {
	padding: 0.5rem 1rem;
	border-bottom: @bg-border;
	font-weight: @bold;
}

.pkp_nav_unassigned {

	.item {
		color: @text-light;
		border-color: @bg-border-color-light;

		.item_title {

			.fa {
				border-right-color: @bg-border-color-light;
			}
		}

		.item_buttons .fa {
			color: @text-light;
		}
	}
}

.pkp_form {

	// @todo all below
	span.pkp_form_success {
		color: #090;
		font-weight: bold;
		font-size: 100%;
	}

	.pkp_form_file_input_container {
		height: 30px;
		width: 350px;
		position:relative;
		float:left;

		.pkp_form_fakeFile {
			left:0;
			line-height:90%;
			margin:0;
			padding:0;
			position:absolute;
			top:0;
			width:350px;
			z-index:1;
		}

		.pkp_form_fakeInput {
			margin-bottom:5px;
			margin-left:0;
			height:15px;
			padding-left:3px;
			padding-top:1px;
			width:241px;
		}

		.pkp_form_fakeButton {
			line-height:90%;
		}

		.pkp_form_uploadFile {
			line-height: 90%;
			height: 29px;
		}
	}

	input.pkp_form_upload_field {
		padding: 3px;
		margin: 0;
		height: 30px;
		width: 350px;
		position: relative;
		z-index: 2;
		text-align:right;
		-moz-opacity:0;
		filter:alpha(opacity=0);
		opacity: 0;
	}

	.pkp_form_hidden {
		display:none !important;
	}
}

// When a new form (pkpForm) appears nested inside
// of an old one (pkp_form)
.pkp_form .pkpForm .pkpFormField--options__option {
	font-weight: @normal;
	font-size: @font-sml;
}
