/**
 * @file styles/components.less
 *
 * Copyright (c) 2021 Madi Nuralin
 * Distributed under the GNU GPL v3. For full terms see the file docs/COPYING.
 *
 * @brief Reusable components
 */

// Simple clearfix wrapper
.parallax {
	/* Set a specific height */
	min-height: 500px;

	/* Create the parallax scrolling effect */
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.row {
	.pkp_helpers_clear;
}

// Button
.cmp_button {
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	border-radius: 5px;
	padding: .8rem 1.5rem;
	font-size: .85rem;
	font-weight: 500;
	line-height: 180%;
	text-decoration: none;
	-webkit-transition: all 350ms ease;
	-o-transition: all 350ms ease;
	transition: all 350ms ease;
	-webkit-transition: all 350ms ease;
	-o-transition: all 350ms ease;
	transition: all 350ms ease;
	font-style: @font;
}

.nav-link {
	display: block;
    padding: 1rem .6rem;
    position: relative;
    font-size: 1.2rem;
    font-weight: 500;
    color: #212121;
    line-height: 1.5;
    border-radius: 5px;
    -webkit-transition: all 350ms ease;
    -o-transition: all 350ms ease;
    transition: all 350ms ease;
}

// Wire button
.cmp_button_wire {
	display: inline-block;
	padding: 0 1em;
	background: #fff;
	border: 1px solid @primary;
	border-radius: @radius;
	font-size: @font-sml;
	line-height: calc(~"@{triple} - 2px"); // account for border
	color: @primary;
	text-decoration: none;

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

// Add an icon to the button
.cmp_button_icon( @icon ) {
	position: relative;
	padding-right: @triple + (@triple / 2);
	border-right: none;

	&:after {
		.fa();
		content: @icon;
		position: absolute;
		top: -1px; // border;
		right: 0;
		width: @triple;
		height: @triple;
		border-top-right-radius: @radius;
		border-bottom-right-radius: @radius;
		line-height: @triple;
		text-align: center;
		background: @primary;
		box-shadow: inset 0 -1em 1em rgba(0, 0, 0, 0.2);
		color: #fff;
	}

	&:hover:after,
	&:focus:after {
		box-shadow: inset 0 1em 1em rgba(0, 0, 0, 0.2);
		background: @primary-lift;
	}
}

.cmp_button_icon_left( @icon ) {
	padding-right: 1em;
	padding-left: @triple + (@triple / 2);
	border-right: @form-border;
	border-left: none;

	&:after {
		right: auto;
		left: 0;
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
		border-top-left-radius: @radius;
		border-bottom-left-radius: @radius;
	}
}

// Text button with an icon
.cmp_button_text( @icon ) {
	display: inline-block;
	position: relative;
	padding-right: @triple;
	font-size: @font-sml;
	font-weight: @bold;
	line-height: @triple;
	color: @primary;
	text-decoration: none;

	&:after {
		.fa();
		content: @icon;
		position: absolute;
		top: 2px;
		right: 0;
		width: @triple;
		height: @triple;
		line-height: @triple;
		text-align: center;
	}

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

// List of articles
.cmp_article_list {
	&:extend(.pkp_unstyled_list);

	> li {
		.pkp_helpers_clear();
		margin-bottom: @triple;
	}
}

// Forms
// These don't yet follow the component pattern on the frontend, but should
// eventually once the login/registration templates are incorporated into the
// frontend template structure.
.cmp_form {

	fieldset {
		/*margin: 0 0 @double;
		padding: 0;
		border: none;*/
	}

	legend {
		/*margin-bottom: @base;
		font-size: @font-bump;
		font-weight: @bold;
		line-height: @double;*/
	}

	.fields {

		> div {
			/*position: relative;
			padding-bottom: @triple; // Contain errors*/

			// Nest so we don't grab .error class attached to li
			.error {
				position: absolute;
				left: 0.5em; // Sit off the rounded edge of input fields
				bottom: 11px; // Sit on the bottom line of the input field above
				padding: 0 0.5em; // Keep it tight so it doesn't bleed into next field
				background: @no;
				border-bottom-left-radius: @radius;
				border-bottom-right-radius: @radius;
				font-size: @font-sml;
				line-height: @double;
				font-weight: @bold;
				color: #fff;
			}
		}
	}

	label {
		font-size: 1rem;
		display: inline;
		text-overflow: ellipsis;
	}

	.label {
		.required {
			color: red;
		}
	}

	input[type="text"],
	input[type="email"],
	input[type="password"],
	input[type="url"],
	input[type="tel"],
	select,
	textarea {
		display: inline-block;
	    width: 100%;
	    padding: 0.375rem 0.75rem;
	    font-size: 1rem;
	    font-weight: 400;
	    line-height: 1.6;
	    color: #4f4f4f;
	    background-color: #fff;
	    background-clip: padding-box;
	    border: 1px solid #bdbdbd;
	    -webkit-appearance: none;
	    -moz-appearance: none;
	    appearance: none;
	    border-radius: 0.25rem;
	    -webkit-transition: all .2s linear;
	    transition: all .2s linear;
	    height: 48px;
	    min-height: auto;
	    padding-top: 4px;
	    padding-bottom: 3.28px;

		&:focus {
			-webkit-box-shadow:none;
			outline: none;
			box-shadow:none;
			border-color:#1266f1;
			-webkit-box-shadow:inset 0 0 0 1px #1266f1;
			box-shadow:inset 0 0 0 1px #1266f1
		}
	}

	textarea {
		width: 100%;
		height: 8em;
	}

	.pkp_form_error {
		margin-bottom: @base;
		border-radius: 5px;
		padding: 1em;
		font-size: 1.1em;
		background: @no;
		color: #f01e1e;
		border-bottom: 1px solid #f01e1e;
	}

	.pkp_form_error *{
		color: #f01e1e !important;
		font-size: 1.1em;
	}

	label > input[type="checkbox"],
	label > input[type="radio"] {
		/*margin-right: 0.25em;*/
	}

	.description {
		margin-top: 0;
		font-size: @font-tiny;
		line-height: 1.5em;
		color: @text-light;

	}

	@media(min-width: @screen-phone) {

		input[type="text"],
		input[type="email"],
		input[type="password"],
		input[type="url"],
		input[type="tel"],
		select {
			/*max-width: 20em;*/
		}
	}
}

// Pagination
.cmp_pagination {
	.pkp_helpers_clear;
	text-align: right;

	.prev {
		float: left;
		margin-right: 0.5em;
		text-decoration: none;

		&:before {
			.fa;
			content: @fa-var-long-arrow-left;
			margin-right: 0.5em;
		}
	}

	.next {
		margin-left: 0.5em;
		text-decoration: none;

		&:after {
			.fa;
			content: @fa-var-long-arrow-right;
			margin-left: 0.5em;
		}
	}
}

// Edit link to jump from frontend section to backend editing location
// It usually appears within a heading element <h*>
.cmp_edit_link {
	display: inline-block;
	margin-left: 1em;
	font-size: @font-sml;
	font-weight: @normal;
	line-height: 1; // Try not to disrupt parent line height
	vertical-align: middle;
	text-decoration: none;

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

// Search result filter
.cmp_search_filter {
	margin-bottom: @base;
	font-size: @font-sml;

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

	label {
		font-style: italic;
	}

	.delete {
		color: @no;
	}
}

// Notification
.cmp_notification {
	display: block;
	width: 100%;
	padding: @double;
	margin-bottom: @quadruple;
	background: @bg-shade;
	border-left: @half solid @primary;
	font-size: @font-base;
	line-height: @line-base;

	.success {
		border-color: @yes;
	}

	.no {
		border-color: @no;
	}
}

// Breadcrumbs
.cmp_breadcrumbs {
	display: inline-block;

	ol {
		&:extend(.pkp_unstyled_list);
		margin-bottom: @triple;
		padding: @half 0;
		line-height: @double;
		font-size: @font-sml;
	}

	li {
		display: inline-block;
	}

	a {
		display: inline-block;
		text-decoration: none;
		font-size: 15px;
	}

	.separator {
		color: @text-light;
		padding: 0 0.5em;
	}

	.current {
		color: @text-light;
		font-size: 15px;

		h1 {
			margin: 0;
			font-family: @font;
			font-size: 15px;
			font-weight: @normal;
		}
	}
}

// Backlink used on error.tpl and message.tpl
.cmp_back_link {
	margin-top: @double;
}

// Announcements
.cmp_announcements {
	&:extend(.pkp_unstyled_list);
	margin-left: 0px;
	margin-right: 0px;

	> li {
		padding: @triple 0px;
		border-bottom: @bg-border;

		&:last-child {
			border-bottom: none;
		}
	}

	@media(min-width: @screen-phone) {
		margin-left: 0px;
		margin-right: 0px;

		> li {
			padding-left: 0px;
			padding-right: 0px;
		}
	}

	@media(min-width: @screen-desktop) {
		margin-left: 0px;
		margin-right: 0px;

		> li {
			padding-left: 0px;
			padding-right: 0px;
		}

	}
}

// Skip-to navigation links
.cmp_skip_to_content a {
	&:extend(.pkp_screen_reader);
	display: block;
	padding: 1em;
	z-index: 99999;
	background: @bg;
	transform: translateX(-50%);

	&:focus {
		clip: auto;
		top: 0;
		left: 50%;
		color: @primary;
	}
}

// Tables
.cmp_table {
	width: 100%;
	border: @bg-border;
	border-bottom: none;
	border-collapse: collapse;

	th,
	td {
		padding: 0.5em;
		text-align: left;
		border-bottom: @bg-border;
	}

	th {
		font-weight: @bold;
	}
}