@import 'data_uris';

$form-accent-color: null !default;
$error-color: red !default;
$button-background: #37a7da !default;
$button-color: text-color($button-background) !default;
$button-border: 1px solid transparent !default;
$button-hover-background: $button-background !default;
$button-hover-color: $button-color !default;
$button-border-radius: $border-radius !default;

$widget-background: white !default;
$widget-color: $font-color !default;
$widget-border: 1px solid #AAA !default;
$widget-border-radius: 0 !default;
$widget-focus-background: $widget-background !default;
$widget-focus-border: $widget-border !default;
$widget-focus-color: $widget-color !default;
$widget-focus-outline: none !default;
$widget-focus-outline-offset: 0 !default;
$widget-box-shadow: null !default;
$widget-padding: 0.625rem 1rem !default;
$widget-focus-box-shadow: none !default;

$button-focus-outline: $widget-focus-outline !default;
$button-focus-outline-offset: $widget-focus-outline-offset !default;
$cancel-button-style: "%button" !default; // "%button" || "%inverted-button" || .custom-selector

$widget-custom-radio-checkbox: false !default;
$widget-custom-radio-checkbox-color: $button-background !default;
$widget-custom-radio-checkbox-border-color: $widget-custom-radio-checkbox-color !default;
$widget-custom-radio-checkbox-marker-color: $widget-custom-radio-checkbox-color !default;
$widget-unique-checkbox-position: bottom !default;  // also possible: left

// $form-style: global style of form elements; possible values are:
//  classic: nothing special.
//  light: light bottom border, no other border.
$form-style: classic !default;

// buttons orders and alignment
// work only for wcs forms
// order :
//	3 buttons : submit (form validation or next page), cancel, previous;
// 	put button in the desired order (ex: previous, submit, cancel);
// 	optionnal (grow) option to move next button to right (ex: cancel (grow), previous, submit);
$buttons-order: null !default;
$buttons-alignment: null !default; // any flexbox justify-content value;


%custom-radio-checkbox-widget {
	label {
		position: relative;
	}
	input {
		position: absolute;
		opacity: 0;
		+ span {
			padding-left: 1.2rem;
			&::before {
				box-sizing: content-box;
				display: block;
				content: '';
				position: absolute;
				margin: auto;
				height: 0.66rem;
				width: 0.66rem;
				background: transparent;
				top: 0.33rem;
				left: 0;
				border: 1px solid $widget-custom-radio-checkbox-border-color;
			}
			&::after {
				box-sizing: content-box;
				display: block;
				content: '';
				position: absolute;
				margin: auto;
				height: calc(0.66rem - 2px);
				width: calc(0.66rem - 2px);
				background: transparent;
				transition: background 0.2s linear;
				top: calc(0.33rem + 2px);
				left: 2px;
			}
		}
		&:checked + span::after {
			background: $widget-custom-radio-checkbox-marker-color;
		}
		&[disabled]:checked + span::after {
			background: grayscale($widget-custom-radio-checkbox-marker-color);
		}

		&:focus + span {
			&::before {
				box-shadow: $widget-focus-box-shadow;
			}
			@if $widget-focus-outline == none {
				outline: $widget-border;
				@if extract-color($widget-border) == transparent {
					outline-color: #444;
				}
				outline-style: dotted;
			} @else {
				outline: $widget-focus-outline;
				outline-offset: $widget-focus-outline-offset;
			}
		}
		&:active + span {
			&::before {
				top: calc(0.33rem - 4px);
				left: -4px;
				border: 5px solid $widget-custom-radio-checkbox-border-color;
				opacity: 0.5;
			}
		}
	}
}

%custom-radio-widget {
	input + span {
		&::before {
			border-radius: 100%;
		}
		&::after {
			border-radius: 100%;
		}
	}
}

form {
	accent-color: $form-accent-color;
}

input, select, button, textarea {
	font-size: 100%;
	font-family: $font-family;
	vertical-align: baseline;
}

input, select {
	text-overflow: ellipsis;
	overflow: hidden;
}

label {
	margin-bottom: 0;
}

form div.widget {
	margin-bottom: 1.5em;
}

div.error {
	color: black;
	font-weight: bold;
	background: transparent url(/static/dialog-warning.png) top left no-repeat;
	padding-left: 22px;
	margin-left: 5px;
	p {
		margin: 0;
	}
}


span.required {
	margin-left: 0.3em;
	position: relative;
	top: -0.1em;
}

div.widget div.title {
	margin-bottom: 0;
}

div.buttons {
	margin-top: 2em;
}

div.buttons div {
	display: inline-block;

	& input[name="submit"] {
		font-weight: bold;
	}
}

%button {
	background: $button-background;
	text-align: center;
	color: $button-color;
	padding: $widget-padding;
	cursor: pointer;
	border: $button-border;
	border-radius: $button-border-radius;
	transition: background 0.5s ease, color 0.5s ease, border 0.5s ease;
	margin-right: 1.5em;
	vertical-align: middle;
	box-shadow: 1px 0px 5px rgba(0, 0, 0, 0.21);

	&:hover {
		box-shadow: 0px 0px 5px #777;
		background: $button-hover-background;
		color: $button-hover-color;
		text-decoration: none;
	}

	&:disabled {
		box-shadow: none;
		cursor: not-allowed;
		background: grayscale($button-background);
		color: grayscale($button-color);
		border-color: grayscale(extract-color($button-border));
	}

	&:focus {
		@if $button-focus-outline == none {
			outline: 1px dotted $button-background;
		} @else {
			outline: $button-focus-outline;
			outline-offset: $button-focus-outline-offset;
		}
	}
}

%inverted-button {
	@extend %button;
	background-color: $button-color;
	color: $button-background;
	@if (extract-color($button-border) == transparent) 
		and (lightness($button-color) > 90%) {
		border: 1px solid $button-background;
	} @else {
		border: $button-border;
	}
	&:hover {
		background: $button-hover-color;
		color: $button-hover-background;
	}
}

%cancel-button {
	@extend #{$cancel-button-style};
}

.fargo-pick-popup button,
button.ui-button,
a#a2-continue,
.gru-content button,
input[type=submit],
div.buttons input {
	@extend %button;
}

.gru-content button.cancel-button,
div.buttons .cancel-button button {
	@extend %cancel-button;
}

.gru-content form.disabled-during-submit {
	// this class is added to forms in w.c.s. when a button is clicked.
	div.buttons {
		cursor: wait;
		button {
			pointer-events: none;
			box-shadow: none;
			opacity: 0.7;
		}
	}
}

input, input[type="search"], textarea, select {
	background: $widget-background;
	color: $widget-color;
	border: $widget-border;
	border-radius: $widget-border-radius;
	margin: 0.2em 0px;
	padding: $widget-padding;
	max-width: 100%;
	transition: background 0.5s ease, color 0.5s ease, border 0.5s ease;
	box-shadow: $widget-box-shadow;
	&:focus:not([readonly]) {
		background-color: $widget-focus-background;
		border: $widget-focus-border;
		color: $widget-focus-color;
		box-shadow: $widget-focus-box-shadow;
	}
	&:focus {
		outline: $widget-focus-outline;
		outline-offset: $widget-focus-outline-offset;
	}
}

select option {
	background: none;
	color: black;
}

input[readonly], select[readonly], textarea[readonly] {
	border-left-color: transparent;
	border-right-color: transparent;
	border-top-color: transparent;
	border-radius: 0;
}

select[readonly] {
	background-image: none;
}

select {
	@include vendor-prefix('appearance', 'none');
	padding-right: 4em;
	background-image: url($data_uri_arrow-down);
	background-position: right 1.3rem center;
	background-repeat: no-repeat;
	background-size: 1rem auto;
	&::-ms-expand {
		// remove the arrow of select element in IE
		display: none;
	}
}

input[type="checkbox"],
input[type="radio"] {
	margin-right: 0.7em;
	margin-bottom: 0.7em;
	&:focus {
		@if $widget-focus-outline == none {
			outline: $widget-border;
			outline-style: dotted;
			@if extract-color($widget-border) == transparent {
				outline-color: #444;
			}
		} @else {
			outline: $widget-focus-outline;
			outline-offset: $widget-focus-outline-offset;
		}
	}
}

.CheckboxesWidget,
.RadiobuttonsWidget {
	.content label {
		display: block;
	}
	&.widget-inline-radio .content label {
		display: inline-block;
	}
}

div.content label {
	margin-right: 1em;
}

div.widget div.content ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

span.helptext,
div.hint {
	display: block;
	font-size: 80%;
	p {
		margin: 0;
	}
}

form p label {
	display: block;
	font-weight: bold;
}

div.a2-block form input,
div.a2-block form select {
	width: 100%;
}

div.a2-block form input[type=checkbox],
div.a2-block form input[type=radio] {
	width: auto;
}

div.a2-block form button,
div.a2-block form input[type=submit] {
	width: auto;
	min-width: 12em;
	@media screen and (max-width: $very-small-limit) {
		min-width: 8em;
	}
}

div.a2-block div#title + div.content {
	margin-left: 0;
	padding-left: 1em;
	span {
		margin-right: 2em;
	}
}

div.a2-block #id_do_not_ask_again + span {
	font-weight: normal;
}

form ul.errorlist {
	padding: 0;
	margin: 2em 0 0 0;
	list-style: none;

	& li::before {
		content: "\f06a";
		font-family: FontAwesome;
		padding-right: 0.7em;
	}
}

body .ui-front {
	z-index: 1000;
}

// select2
div.select2-container,
span.select2-container {
	min-width: 20em;
	margin: 0.2em 0px;
	padding-bottom: 1px;
	a.select2-choice {
		padding: 0.1em 0.7em;
	}
	span.select2-selection--single,
	span.select2-selection--multiple,
	a.select2-choice,
	a.select2-choice div {
		box-sizing: border-box;
		padding: $widget-padding;
		background: $widget-background;
		color: $widget-color;
		border-radius: $widget-border-radius;
		border: $widget-border;
		height: auto;
		.select2-selection__choice {
			margin: 0 0.5rem 0 0;
			border: none;
		}
	}
	span.select2-selection--multiple {
		min-height: 0;
		.select2-selection__rendered {
			display: block;
		}
	}
	.select2-search--inline .select2-search__field {
		margin-top: 0;
		margin-bottom: 0;
		border: none;
	}
	&.select2-container--focus,
	&.select2-container--open {
		span.select2-selection--single,
		span.select2-selection--multiple,
		a.select2-choice,
		a.select2-choice div {
			background: $widget-focus-background;
			border: $widget-focus-border;
			color: $widget-focus-color;
			span {
				color: $widget-focus-color;
			}
		}
	}
	&.select2-container--focus span.select2-selection--single,
	&.select2-container--focus span.select2-selection--multiple {
		outline: $widget-focus-outline;
		outline-offset: $widget-focus-outline-offset;
	}
	.select2-choices,
	.select2-choice {
		box-shadow: none;
	}
	.select2-search--dropdown input,
	.select2-search--dropdown input:active,
	.select2-search--dropdown input:focus {
		background: white;
		color: #333;
		border: 1px solid #ccc;
	}
	.select2-selection--single .select2-selection__rendered {
		padding-right: 0px;
		min-height: 1.2em;
		line-height: inherit;
	}
	.select2-selection--single .select2-selection__arrow {
		background-image: url($data_uri_arrow-down);
		background-position: right 1.3rem center;
		background-repeat: no-repeat;
		background-size: 1rem auto;
		width: 50px;
		right: 0;
		top: 0;
		height: 100%;
		b {
			display: none;
		}
	}
	.select2-selection--single .select2-selection__clear {
	}
	.select2-dropdown {
		border: $widget-border;
		&.select2-dropdown--below {
			position: relative;
			top: -6px;
		}
	}
	.select2-results {
		.loading-results {
			position: absolute;
			display: inline-block;
			right: 0;
			color: black;
			@media screen and (max-width: $mobile-limit) {
				display: none;
			}
		}
		.loading-results:last-child {
			position: static;
			display: block;
			color: inherit;
		}
	}
}

div.select2-container.select2-drop-above .select2-choice {
	background: white;
	border-radius: 0;
}

div.select2-drop {
	box-shadow: none;
	border-radius: 0;
}

div.select2-search {
	margin-top: 4px;
}

.BlockWidget .list-add {
	clear: both;
}

@if $widget-custom-radio-checkbox == true {
	.django-checkbox-input,
	.django-radio-select,
	.CheckboxWidget,
	.CheckboxesWidget,
	.RadiobuttonsWidget {
		@extend %custom-radio-checkbox-widget;
	}

	.CheckboxWidget {
		div.content {
			position: relative;
		}
	}
	.django-radio-select,
	.RadiobuttonsWidget {
		@extend %custom-radio-widget;
	}
}

@if $widget-unique-checkbox-position == left {
	div.django-checkbox-input,
	div.CheckboxWidget {
		position: relative;
		div.title {
			margin-left: 1.5rem;
		}
		div.content {
			@if $widget-custom-radio-checkbox == true {
				position: static;
			}
			label {
				margin-right: 0;
				position: absolute;
				top: 0;
			}
			.hint, .error {
				margin-left: 1.5rem;
			}
		}
	}
}

@if $form-style == light {
	form p label,
	label {
		font-weight: normal;
		color: lighten($font-color, 20%);
	}
	input, input[type="text"], input[type="email"], input[type="password"],
	input[type="url"], input[type="tel"], input[type="number"],
	input[type="search"], input[type="file"], input[type="date"],
	input[type="datetime-local"], input[type="month"], input[type="time"],
	input[type="week"], textarea, select {
		border-width: 0 0 1px 0;
		&:focus:not([readonly]) {
			border-width: 0 0 1px 0;
			border-bottom-color: $button-background;
		}
	}
	div.widget-with-error {
		input, input[type="text"], input[type="email"],
		input[type="password"], input[type="url"], input[type="tel"],
		input[type="number"], input[type="search"], input[type="file"],
		input[type="date"], input[type="datetime-local"],
		input[type="month"], input[type="time"], input[type="week"],
		textarea, select {
			border-bottom-color: $error-color;
		}
	}
	div.error {
		color: $error-color;
		font-weight: normal;
		padding-left: 0;
		margin-left: 0;
		background: none;
	}
	form div.widget {
		// increase bottom margin as the single border pushes away the
		// widget from the label and we have to compensate.
		margin-bottom: 1.8em;
	}
	div.select2-container,
	span.select2-container {
		span.select2-selection--single,
		a.select2-choice,
		a.select2-choice div {
			border-width: 0 0 1px 0;
		}
		&.select2-container--focus,
		&.select2-container--open {
			span.select2-selection--single,
			a.select2-choice,
			a.select2-choice div {
				background: $widget-focus-background;
				border: $widget-focus-border;
				border-width: 0 0 1px 0;
			}
		}
	}
}

// Buttons order & alignment configuration
@if $buttons-order or $buttons-alignment {
	.quixote:not(#wf-actions) div.buttons {
		display: flex;
		flex-wrap: wrap;
		justify-content: $buttons-alignment;

		@each $btn, $grow in $buttons-order {
			$i: index($buttons-order, $btn);
			@if $grow {
				$i: index($buttons-order, $btn $grow);
			}

			.#{$btn}-button {
				order: $i;
				@if ($grow == 'grow') {
					flex-grow: 1;
				}
	 		}
		}
		// always hidden, exclude to flex-child
		.savedraft-button {
			display: none;
		}
	}
}

/* force alignment for blocks defining grid elements within grids */
.BlockSubWidget.widget {
	margin-bottom: 0;
}

/* mark forms optional fields and hide the required ones */
.widget-optional span.optional {
	display: none;
}

.pk-mark-optional-fields {
	.widget-required {
		span.required {
			@include sr-only();
		}
	}
	.widget-optional:not(.django-checkbox-input) span.optional {
		display: inline;
		font-style: italic;
	}
}

/* godo rich text editor */

.godo--editor {
	@extend textarea;
}

.godo {
	.menuicon {
		margin: 0;
		padding: .16em .33em;
	}
}
