// RedmineX Theme
// Copyright 2020 RedmineX
// For license, see https://www.redmine-x.com
// Created by Michael Staněk
// Created without vendor prefixes, "AutoPrefixed" by PrePros v5 (https://prepros.io)
 
// Media Queries to Copy / Paste:
 
// 380px
// @include media-breakpoint-up(xxs) {}

// 480px
// @include media-breakpoint-up(xs) {}

// 576px
// @include media-breakpoint-up(sm) {}

// 768px
// @include media-breakpoint-up(md) {}

// 899px
// @include media-breakpoint-up(redmine-mobile) {}

// 992px
// @include media-breakpoint-up(lg) {}

// 1200px
// @include media-breakpoint-up(xl) {}

// 1500px
// @include media-breakpoint-up(hd) {}

// 1900px
// @include media-breakpoint-up(2k) {}

 
/* ==========================================================================
   Form
   ========================================================================== */

form {
	
	input[type="submit"]+a,
	&>a:only-child  {
		@include btn;
		@include btn-tetriary;
	}
	
	&#query-form fieldset {
		border-radius: 0;
		border-top: 1px solid $query-form-border;
		border-right: none;
		border-bottom: none;
		border-left: none;
	}
	
	fieldset {
		
		legend {
			@include rounded;
			font-weight: 600;
			background: $query-form-border;
			padding: 0 1rem;
			color: $headings-color;
		}
		
		&.collapsed {
			padding-bottom: 0;
			background: none;
		}
	}
	
	&#query-form fieldset{
		margin: 0 -1.5rem 1rem -1.5rem;
	}
	
	.box>.tabular {
		margin-bottom: 0;
	}
}

fieldset {
	@include rounded;
	background: $query-form-bg;
	border: none;
}

fieldset+fieldset {
	margin-top: 1rem !important;
}

#query_form_with_buttons,
#query_form_content,
#search-form,
#workflow_form,
.filters #query_form {
	
	.collapsible {
		margin: 0 !important;
		
		legend {
			background: none !important;
		}
		
		legend+div {
			padding: 0 1rem;
			margin-bottom: 1rem;
		}
	}
	
	select:not([multiple]) {
		min-width: 146px;
	}
}

#workflow_form select {
	max-width: 95% !important;
}

input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="button"]):not(.filename):not(.attachments_fields .description):not(.attachments input),
select {
	
	@include media-breakpoint-up(sm) {
		max-width: $input-max-width-lg !important;
	}
}

input:disabled,
.disabled {
	opacity: 0.25;
	color: $text-color-disabled;
	cursor: not-allowed !important;
	
	&:hover {
		cursor: not-allowed !important;
	}
}

input:disabled {
	pointer-events: none;
}

input[type="file"] {
	display: block;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    width: auto;
}

.tabular {
	
	input[type=checkbox],
	input[type=radio] {
		width: auto !important;
	}
}

textarea {
	width: 80%;
	padding: 1rem;
	
	&:focus {
		outline: none;
	}
}

button:hover {
	cursor: pointer;
}

.jstBlock,
.jstEditor,
.jstBlock textarea {
	width: 100% !important;
}

.new_issue {
		
	.jstBlock,
	.jstEditor,
	.jstBlock textarea {
		max-width: 1013px;
	}
}



/*
 * Inputs + select
 */
 
*:not(input):focus {
	outline: none;
}

input[type="text"],
input[type="date"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="range"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
input[type="week"]{
	@include transition;
	@include rounded;
	color: $text-color;
	display: inline-block;
	width: 100%;
	padding: $input-padding;
	font-weight: 400;
	font-size: $font-size-sm2;
	line-height: 1.5;
	vertical-align: middle;
}

select {	
	@include transition;
	@include rounded;
	appearance: none;
	color: $text-color;
	display: inline-block;
	width: 100%;
	font-weight: 400;
	font-size: $font-size-sm2;
	line-height: 1.5;
	vertical-align: middle;
}

select:not([multiple]) {
	@include rounded;
	height: $input-height-base;
	background: $select-background-white;
	padding: 0.25rem 2rem 0.25rem 0.5rem;
}

.box {
	
	select:not([multiple]) {
		background: $select-background;
	}
}

input[type="text"],
input[type="date"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="range"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
input[type="week"] {	
	height: $input-height-base;
	
	&:focus {		
		color: $text-color;
		background-color: $white;
		border-color: #80bdff;
		outline: 0;
		box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
	}
}

input[type="checkbox"],
input[type="radio"] {
	@include rounded;
	margin: 0 0.25rem;
	position: relative;
	top: -1px;
	vertical-align: middle;
}

#add_filter_select {
	width: 146px;
}

input[type="submit"],
input[type="reset"] {
	@include btn;
	@include btn-primary;
}

input[type="submit"]+input[type="submit"] {
	@include btn-tetriary;
}

.hidden-for-sighted {
	display: none;
}

#search-form {
	
	input[type="checkbox"],
	input[type="radio"] {
		margin-left: 0.5rem;
	}
	
	div.box {
		border: none;
		box-shadow: none;
		background: none;
		margin: 0 !important;
		padding: 0 !important;
	}
	
	#search-types {
		margin: 0 !important;
		
		label {
			display: inline-block;
			margin-bottom: 0.5rem;
		}
	}
	
	#search-input, 
	#scope {
		width: 49%;
		display: inline-block;
		margin-bottom: 0.5rem;
		max-width: none !important;
		
		@include media-breakpoint-up(redmine-mobile) {
			width: auto;
			max-width: inherit !important;
		}
	}
	
	#scope+label {
		display: block;
	}
}

#project_is_public+em.info {
	display: inline-block !important; 
}