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

/* ==========================================================================
   Mixins
   ========================================================================== */
 
@mixin box-sizing {
  -webkit-box-sizing: border-box;
  	 -moz-box-sizing: border-box;
  	 	  box-sizing: border-box;
}

@mixin transition0 {
  -webkit-transition: none !important;
  	 -moz-transition: none !important;
  	  -ms-transition: none !important;
  	   -o-transition: none !important;
  	   	  transition: none !important;  
}

@mixin transition {
  -webkit-transition: all 100ms ease-in-out;
  	 -moz-transition: all 100ms ease-in-out;
  	  -ms-transition: all 100ms ease-in-out;
  	   -o-transition: all 100ms ease-in-out;
  	   	  transition: all 100ms ease-in-out;  
}

@mixin transition500 {
  -webkit-transition: all 500ms ease-in-out;
  	 -moz-transition: all 500ms ease-in-out;
  	  -ms-transition: all 500ms ease-in-out;
  	   -o-transition: all 500ms ease-in-out;
  	   	  transition: all 500ms ease-in-out;  
}

@mixin transition1000 {
  -webkit-transition: all 1000ms ease-in-out;
  	 -moz-transition: all 1000ms ease-in-out;
  	  -ms-transition: all 1000ms ease-in-out;
  	   -o-transition: all 1000ms ease-in-out;
  	   	  transition: all 1000ms ease-in-out;  
}

@mixin translate {
    -moz-transform: translateX(-50%) translateY(-50%);
    		  -webkit-transform: translate(-50%,-50%);
    		  	  -ms-transform: translate(-50%,-50%);
    		  	  	  transform: translate(-50%,-50%);
}

@mixin translate-horizontal {
    -moz-transform: translateX(-50%) translateY(0%);
    		  -webkit-transform: translate(-50%, 0%);
    		  	  -ms-transform: translate(-50%, 0%);
    		  	  	  transform: translate(-50%, 0%);
}

@mixin translate-horizontal-reverse {
    -moz-transform: translateX(50%) translateY(0%);
    		  -webkit-transform: translate(50%, 0%);
    		  	  -ms-transform: translate(50%, 0%);
    		  	  	  transform: translate(50%, 0%);
}

@mixin translate-vertical {
    -moz-transform: translateX(0%) translateY(-50%);
    		  -webkit-transform: translate(0%, -50%);
    		  	  -ms-transform: translate(0%, -50%);
    		  	  	  transform: translate(0%, -50%);
}


@mixin translate-none {
    -moz-transform: translateX(0%) translateY(0%);
    		  -webkit-transform: translate(0%, 0%);
    		  	  -ms-transform: translate(0%, 0%);
    		  	  	  transform: translate(0%, 0%);
}

@mixin scale {
  -webkit-transform: scale(1.1); /* Safari and Chrome */
  	 -moz-transform: scale(1.1); /* Firefox */
  	  -ms-transform: scale(1.1); /* IE 9 */
  	   -o-transform: scale(1.1); /* Opera */
  	   	  transform: scale(1.1);
}

@mixin rotate {
  -webkit-transform: rotate(-90deg); /* Safari and Chrome */
  	 -moz-transform: rotate(-90deg); /* Firefox */
  	  -ms-transform: rotate(-90deg); /* IE 9 */
  	   -o-transform: rotate(-90deg); /* Opera */
  	   	  transform: rotate(-90deg);
}

@mixin rotate0 {
  -webkit-transform: rotate(0); /* Safari and Chrome */
  	 -moz-transform: rotate(0); /* Firefox */
  	  -ms-transform: rotate(0); /* IE 9 */
  	   -o-transform: rotate(0); /* Opera */
  	   	  transform: rotate(0);
}

@mixin rotate45 {
  -webkit-transform: rotate(45deg); /* Safari and Chrome */
  	 -moz-transform: rotate(45deg); /* Firefox */
  	  -ms-transform: rotate(45deg); /* IE 9 */
  	   -o-transform: rotate(45deg); /* Opera */
  	   	  transform: rotate(45deg);
}

@mixin flipH {
	-webkit-transform: scaleX(-1);
	   -moz-transform: scaleX(-1);
	     -o-transform: scaleX(-1);
	        transform: scaleX(-1);
	            -ms-filter: fliph;
	            	filter: fliph;
}

@mixin flipV {
	transform: rotateX(180deg);
}

@mixin rounded {
  -webkit-border-radius:  $border-radius;
  	 -moz-border-radius:  $border-radius;
  	 	   border-radius: $border-radius;

}

@mixin rounded360 {
  -webkit-border-radius: 160px;
  	 -moz-border-radius: 160px;
  	 	  border-radius: 160px;

}

@mixin rounded-top {  
  -webkit-border-top-right-radius: $border-radius;
   -webkit-border-top-left-radius: $border-radius;
  	  -moz-border-radius-topright: $border-radius;
  	   -moz-border-radius-topleft: $border-radius;
  	   	  border-top-right-radius: $border-radius;
  	   	   border-top-left-radius: $border-radius;
}

@mixin rounded-bottom {
  -webkit-border-bottom-right-radius: $border-radius;
   -webkit-border-bottom-left-radius: $border-radius;
   	  -moz-border-radius-bottomright: $border-radius;
   	   -moz-border-radius-bottomleft: $border-radius;
   	   	  border-bottom-right-radius: $border-radius;
   	   	   border-bottom-left-radius: $border-radius;
}

@mixin rounded-left {
  -webkit-border-bottom-left-radius: $border-radius;
   -webkit-border-top-left-radius: $border-radius;
   	  -moz-border-radius-bottomleft: $border-radius;
   	   -moz-border-radius-topleft: $border-radius;
   	   	  border-bottom-left-radius: $border-radius;
   	   	   border-top-left-radius: $border-radius;
}

@mixin rounded-right {
  -webkit-border-bottom-right-radius: $border-radius;
   -webkit-border-top-right-radius: $border-radius;
   	  -moz-border-radius-bottomright: $border-radius;
   	   -moz-border-radius-topright: $border-radius;
   	   	  border-bottom-right-radius: $border-radius;
   	   	   border-top-right-radius-radius: $border-radius;
}

// Disable input zoom on focus
@mixin no-zoom {
    font-size: 16px !important;
}

@mixin respond-to($grid-breakpoints) { 
	@if map-has-key($grid-breakpoints, $grid-breakpoints) {
		@media (min-width: #{map-get($grid-breakpoints, $grid-breakpoints)}) {
			@content;
		}
	}
}

@mixin btn {
	display: inline-block;
    height: $input-height-base;
	font-weight: 500;
	line-height: 1.5;
	font-size: $font-size-sm2;
	text-transform: uppercase;
	vertical-align: middle;
	cursor: pointer;
	background-color: transparent;
	border: 1px solid transparent;
	padding: .375rem 0.5rem;
	border-radius: $border-radius;
	
	&:active {
		transform: translate(0, 1px);
	}
}

/* Primary by color, otherwise secondary in function*/
@mixin btn-primary {
    background-color: $link-color;
	color: $white;
	border-color: transparent;
	padding: .375rem 1.5rem;
	
	&:hover {
		color: $white !important;
		background: darken($primary, 10%);
		
		&:before {
			color: $white !important;
		}
	}
	
	&:focus,
	&:active {
		border-color: transparent;
		outline: none;
	}
}

/* Secondary by color, otherwise primary in function*/
@mixin btn-secondary {
    background-color: $secondary;
	color: $white !important;
	border-color: $secondary;
	padding: .375rem 1.5rem;
	
	&:hover {
		color: $white !important;
		background: darken($secondary, 10%);
	}
	
	&:focus,
	&:active {
		border-color: $secondary;
		outline: none;
	}
}

@mixin btn-tetriary {
    background-color: transparent;
	color: $button-text-color !important;
	border-color: transparent !important;
	
	&:hover,
	&:hover:before {
		color: darken($link-color, 10%) !important;
	}
	
	&:focus,
	&:active {
		border-color: transparent;
		outline: none;
	}
}

@mixin btn-default {
	background-color: $tetriary;
	color: $text-color;
	border-color: transparent;
	
	&:hover {
		color: $text-color !important;
		background: darken($tetriary, 10%);
	}
	
	&:focus,
	&:active {
		border-color: transparent;
		outline: none;
	}
}

@mixin btn-danger {
    background-color: $brand-danger;
	color: $white;
	border-color: $brand-danger;
	
	&:hover {
		color: $white !important;
		background: darken($brand-danger, 10%);
	}
	
	&:focus,
	&:active {
		border-color: $brand-danger;
		outline: none;
	}
}

@mixin btn-sm {
	height: auto;
	padding-top: 0.125rem !important;
	padding-bottom: 0.125rem !important;
}

@mixin dropdown {
	box-shadow: 0 .125rem .25rem 0 rgba(0,0,0,.15);
	border-radius: $border-radius;
}

@mixin dropdown-dark {
	box-shadow: 7px 32px 95px -25px rgba(0,0,0,.95), 12px 17px 45px -27px rgba(0,0,0,.85);
	border-radius: $border-radius;
}

@mixin box-shadow-container {
	box-shadow: 0 .125rem .25rem 0 rgba(0,0,0,.10);
}

@mixin box-shadow-container-hover {
	box-shadow: 0 .125rem .25rem 0 rgba(0,0,0,.20);
}

@mixin icon {
	@extend %fa-icon;
	@extend .fal;
	font-family: "Font Awesome 5 Pro";
}