// 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) {}

/* ==========================================================================
   List
   ========================================================================== */

ul {
	margin: 0;
	padding: 0;
}

li p {
	margin: 0;
}

#content {
	
	ul:not(.select2-selection__rendered) {
		padding-left: 2rem;
	}
	
	.jstTabs ul {
		padding-left: 0;
		width: 100% !important; // redmine CMS fix
	}
	
	ul.pages {
		padding: 0;
	}
	
	.wiki ul {
		margin: 1rem 0;
	}
	
	.last_notes .wiki ul {
		margin: 0;
	}
}

.spent_time ul {
	padding: 0 0 1rem 1rem;
}

.tabs:not(#main-menu):not(#main-menu2):not(.jstTabs) {
	position: relative;
	overflow: hidden;
	min-height: 38px;
	margin-bottom: 0.5rem;
	
	ul {
		padding: 0 0 0.25rem 0!important;	
		position: absolute;
    	bottom: 0;
    	min-width: 2000px;
    	width: 100%;
		white-space: nowrap;
	}
		
	.tabs-buttons {
		@include translate-vertical;
	    position: absolute;
	    right: -3px;
	    width: 70px;
	    height: 34px;
	    top: 50%;
		
		button { //because input can't have a pseudo element
			@include rounded;
			border: 0 !important;
			appearance: none;
			background-image: url('../images/icon-chevron-right.svg');
			background-size: 6px;
			background-position: center;
			background-repeat: no-repeat;
			background-color: $border-color-light;
			width: 32px;
			height: 32px;
			
			&:focus {
				outline: none;
			}
			
			&:hover {
				background-color: darken($border-color-light, 10%);
				
				&:before {
					color: $white;
				}
			}
		}
		
		button:first-child {
			@include flipH;
		}
	}
}

.tabs:not(#main-menu):not(#main-menu2) {
	
	li {
		list-style: none;
		display: inline-block;
	}
	
	li a {
		@include rounded;
		display: block;
		padding: 0.25rem 1rem;
		margin-right: 0.25rem;
	}
}

.jstBlock {
	
	.tabs:not(#main-menu):not(#main-menu2) {
		margin-top: 0;
	}
}

/* ==========================================================================
   Select2
   ========================================================================== */
   
fieldset:not(.notes_with-send) .selection {
	
	.select2-selection__rendered {
		padding: 0.25rem 0.25rem 0 0.25rem !important;
		
		li.select2-selection__choice {
			border: none !important;
			padding: 0 0.75rem 0 0 !important;
			margin: 4px 0 0 4px !important;
			font-size: 90% !important;
		}
		
		li.select2-search.select2-search--inline {
			line-height: 1;
			margin-left: 0.5rem;
			font-size: 90% !important;
		}
	}
}

.theme-Redminex {
	
	.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
		border-right: 1px solid $border-color-light;
	}
	
	.select2-selection__choice__remove>span,
	.select2-selection__choice__remove {	
		font-family: serif;
		vertical-align: top;
		margin-right: 5px;
	}
	
	.select2-dropdown {
		@include box-shadow-container;
		border: none !important;	
	}
	
	.select2-container--default .select2-search--dropdown .select2-search__field {
		border-color: $border-color-light !important;
	}
	
	.select2-container .select2-selection--multiple {
		min-height: 36px;
	}

}

#wrapper {
	
	.select2-container--default .select2-selection--single .select2-selection__rendered {
		height: auto !important;
	}
	
	.select2-container {
		width: 100% !important;
		
		@include media-breakpoint-up(sm) {
			max-width: $input-max-width-lg !important;
		}
	}
	
	.values .select2-container {
		min-width: 160px;
	}
	
	.select2-selection--single {
		height: $input-height;
		border: 1px solid $border-color-light !important;
		border-radius: $border-radius !important;
		overflow: hidden;
		
		.select2-selection__rendered {
			font-size: $font-size-sm2;
			line-height: 25px;
			color: $text-color;
			padding: 0.25rem 2rem 0.25rem 0.5rem !important;
		}
		
		.select2-selection__arrow {
			height: 100%;
		}
		
		.select2-selection__clear {
			@include translate-vertical;
			position: absolute;
			top: 50%;
			right: 1px;
			height: calc(100% - 2px);
			background: $white;
			width: 40px;
			padding: 0 1rem 0 0;
			margin: 0;
			border-radius: 0 $border-radius $border-radius 0;
			line-height: $input-height;
		}
		
		.select2-selection__arrow {
			width: 27px !important;
		}
		
		&:before,
		.select2-selection__rendered {
			float: left;
		}
		
		&.icon {
			
			.select2-selection__rendered {
				padding: 0 !important;
				width: calc(100% - 32px);
			}
			
			.select2-selection__rendered,
			&:before {
				position: relative;
			}
			
			&:before {
				padding-left: 0.5rem;
			}
			
			&:before,
			.select2-selection__rendered {
				@include translate-vertical;
				top: 50%;
			}
		}
	}
	
	.select2-selection--multiple {
		
		.select2-selection__rendered {
			padding: 0;
		}
	}
	
	.select2-container--default .select2-selection--multiple {
		background: $white !important;
		border: 1px solid $border-color-light !important;
	}
}