@mixin border-radius($radius: $border-radius-default) {
	-webkit-border-radius: $radius;
	-moz-border-radius: $radius;
	border-radius: $radius;
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
}

@mixin set-font(
	$font-family: $font-family-default,
	$font-size: $font-size-base,
	$line-height: $line-height-default,
	$color: color(font-color-default),
	$weight: $font-weight-default
) {
	@if $font-family {
		font-family: $font-family-default;
	}
	@if $font-size {
		font-size: $font-size;
	}
	@if $color {
		color: $color;
	}
	@if $weight {
		font-weight: $weight;
	}
	@if $line-height {
		line-height: $line-height;
	}
}

// @mixin set-font-2($font-type: null) {
// 	@if $font-type {
// 		font-family: $font-family-#{$font-type};
// 		font-size: $font-size-#{$font-type};
// 		color: $font-color-#{$font-type};
// 		font-weight: $font-weight-#{$font-type};
// 		line-height: $line-height-#{$font-type};
// 	} @else {
// 		font-family: $font-family-default;
// 		font-size: $font-size-base;
// 		color: $font-color-default;
// 		font-weight: $font-weight-default;
// 		line-height: $line-height-default;
// 	}
// }

@mixin pseudo($display: block, $pos: absolute, $content: "") {
	content: $content;
	display: $display;
	position: $pos;
}

@mixin no-user-select {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}

@mixin popup-menu {
	background-color: $popup-menu-background-color;// !important;
	background: $popup-menu-background;// !important;
    border: 2px solid $popup-menu-border-color;// !important;
    border-radius: $border-radius-default;// !important;
	-webkit-box-shadow: $popup-menu-box-shadow;
	-moz-box-shadow: $popup-menu-box-shadow;
	box-shadow: $popup-menu-box-shadow;
}

@mixin dropdown-menu { 
	@include popup-menu;
	color: $navbar-dropdown-menu-text-color;
	padding: 6px;
	max-height: 500px;
	overflow-y: auto;
	width: min-content;
	z-index: 1100; // z-index is set in order to ensure the dropdown is visible. There was an issue where date pickers would fall behind a modal dialog.
	@include scrollbar;

	li {
		&:last-of-type {
			margin: 0;
		}
	}

	li a,
	.dropdown-item {
		float: left;
		color: color(text-color-default);// !important;
		font-size: $font-size-small;
		font-weight: 500;
		line-height: 24px;
		text-decoration: none;
		width: max-content;
		svg {
			margin-right: 6px;
			width: $svg-icon-size;//20px;
			height: $svg-icon-size;//20px;
			padding: 2px;
			fill: color(text-color-default);// !important;
		}
	}

	li,
	.dropdown-item {
		float: left;
		width: 100%;
		cursor: pointer;
		border-radius: 7px;
		white-space: nowrap;
		background: none;
		margin: 0 0 3px 0;
		padding: 5px 7px;
		&:hover,
		&:active,
		&.active {
			color: #fff;// !important;
			background: color(primary);// !important;
			a {
				color: #fff;// !important;
			}
			svg { 
				fill: #fff;// !important;
			}
		}
	}
	li a {
		padding: 0;
	}
}

@mixin scrollbar($background-color:$sidebar-scrollbar-color, $border-radius:$sidebar-scrollbar-border-radius, $thumb-color:$sidebar-scrollbar-thumb-color, $thumb-hover-color:$sidebar-scrollbar-thumb-color-hover, $width:$sidebar-scrollbar-width, $sidebar:false) {
	&::-webkit-scrollbar-track {
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
	}
	
	&::-webkit-scrollbar-corner,
	&::-webkit-scrollbar-corner {
		background-color: color(background-color);
	}

	& {
		scrollbar-face-color:  $thumb-hover-color;
		scrollbar-track-color: $thumb-color;
	  }
	
	  &::-webkit-scrollbar,
	  &::-webkit-scrollbar-corner,
	  &::-webkit-scrollbar-track,
	  &::-webkit-scrollbar-thumb {
		border-radius: $border-radius;
	}

	&::-webkit-scrollbar,
	&::-webkit-scrollbar-track {
		width: $width;
		height: $width;
		border-radius: $border-radius;
		//background-color: $background-color !important;
		//background: $background-color !important;
		background-color: transparent !important;
		background: transparent !important;
	}


	&::-webkit-scrollbar-thumb {
		border-radius: $sidebar-scrollbar-thumb-border-radius;
		transition: all 0.4s;
		background: $thumb-color !important;
		background-color: $thumb-color !important;
		border: none !important;

		&:hover {
			background-color: $thumb-hover-color !important;
		}
	}
}

@mixin custom-scrollbar($background-color: true, $size: 'normal') {

	// Default values
	$width: 18px;
	$border-width-track: 5px;
	$border-width-thumb: 4px;

	// Override for the size
	@if ($size == 'small') {
		$width: 8px;
		$border-width-track: 0px;
		$border-width-thumb: 1px;
	}

	/* width */
	&::-webkit-scrollbar {
		width: $width;
		height: $width;
		@if ($background-color) {
			background-color: color(gray-7);
		}
	}
	
	/* Track */
	&::-webkit-scrollbar-track {
		border: $border-width-track solid;
		border-radius: 10px;
		@if ($background-color) {
			border-color: color(gray-7);
			background-color: color(gray-6);
		} @else {
            border-color: transparent;
        }
	}
	
	/* Handle */
	&::-webkit-scrollbar-thumb {
		border-radius: 10px;
		border: $border-width-thumb solid transparent;
		background-color: color(gray-8);
		outline: 1px solid color(gray-6);
		outline-offset: -$border-width-thumb;
		-webkit-background-clip: padding-box;
		background-clip: padding-box;

		&:hover {
			background-color: color(gray-7);
		}
	}

	&::-webkit-scrollbar-corner {
		@if ($background-color) {
			background: color(gray-7);
		} @else {
            background: transparent;
        }
	  }
}

@mixin shadow($h-offset: 0px, $v-offset: 0px, $spread: 15px) {
	box-shadow: $h-offset $v-offset $spread rgba(0, 0, 0, 0.10);
}

@mixin loading-indicator-inline {
	display: flex;
    justify-content: flex-start;
    align-items: center;
    font-weight: 600;
    color: $text-color-default;

    .inline-loading-indicator,
	.dbq-inline-loading-indicator {
        margin-right: 5px;
    }
}

@mixin badge {
	// display: flex; // Don't use display: flex here since there are a lot of cases where the default display must be 'none'.
	align-items: center;
	justify-content: center;
	height: 20px;
	min-width: 18px;
	font-size: 12px;
	background-color: $color-subtle;
	color: $color-primary;
	border-radius: 5px;
	border: none;
	padding: 2px 6px;
	@include shadow;
}

@mixin alert-badge {
	@include badge;

	&.dbq-badge-information {
		background-color: color(background-color-info);
		color: color(text-color-info);
	}
	
	&.dbq-badge-warning {
		background-color: color(background-color-warning);
		color: color(text-color-warning);
	}

	&.dbq-badge-error {
		background-color: color(background-color-error);
		color: color(text-color-error);
	}

	&.dbq-badge-notification {
		background-color: $color-notification;
		color: $color-white;
	}
}

@mixin list-collapse-button {
	background: $dbqft-list-collapse-button-background-color;
	color: transparent;
	border: none;
	padding: 0;
	cursor: pointer;
	width: 30px;
	height: 30px;
	outline: 0;
	border-radius: 50%;
	transition: all 0.5s ease;
	box-shadow: 0px 0px 5px 0px rgba(127, 127, 127, 0.4);

	svg {
		fill: $text-color-default;
		vertical-align: middle;
	}

	&:hover {
		background: $text-color-inverse;
	}
}

@mixin search-field {
	font-family: $font-family-default;
	font-weight: 500;
	font-size: $font-size-small;
	line-height: 20px;
	height: 30px;
	border-radius: $border-radius-default !important;
	border: 2px solid $modal-border-color;
	background-color: $modal-input-background !important;
	color: color(text-color-default);
	padding: 2px 10px;
}

@mixin button(
	$background-color: color(button-background-color),
	$text-color: color(button-text-color),
	$background-color-hover: color(button-hover-background-color),
	$text-color-hover: color(button-hover-text-color),
	$border-color: color(button-border-color),
	$border-hover-color: color(button-hover-border-color)
) {
	background: $background-color;
	border: $border-default;
	border-color: $border-color;
	color: $text-color;
	font-size: $font-size-base;
	-webkit-border-radius: $border-radius-button-default;
	-moz-border-radius: $border-radius-button-default;
	border-radius: $border-radius-button-default;
	-moz-background-clip: border-box;
	-webkit-background-clip: border-box;
	background-clip: border-box;

	svg {
		fill: $text-color;
	}

	&:hover {
		background: $background-color-hover;
		border-color: $border-hover-color;
		color: $text-color-hover;
		transition: all 0.3s ease;

		svg {
			fill: $text-color-hover;
		}
	}

	&:not(:disabled):not(.disabled):active, // To override bootstrap
	&:active {
		background: $button-active-background-color;
		border-color: $border-hover-color;
		color: $text-color-hover;
	}
}

@mixin button-rounded-with-icon {
	background: none;
	border: none;
	outline: none;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	padding: 0;

	svg {
		fill: $text-color-default;
		width: 16px;
		height: 16px;
	}

	&:hover {
		background: $color-white;
		color: $color-white;
		box-shadow: 0 0 5px $color-white;
		text-shadow: 0 0 5px $color-white;

		svg {
			fill: $color-primary !important;
			transform: scale(1.1);
		}
	}
}

@mixin button-link {
	background: none;
	border: none;
	outline: none;
	padding: 0;
	color: $color-primary;
	font-size: $font-size-small;
	font-weight: $font-weight-bold;

	&:hover {
		color: $button-hover-background-color;
	}
}

@mixin tab-bar-item-rounded($has-close-button: false) {
	display: inline-flex;
	align-items: center;
	padding: 0 5px 0 12px;
	height: 30px;
	border-radius: 15px;
	font-size: $font-size-base;
	background: $background-item-color-default;
	color: $text-color-default;
	cursor: pointer;

	// Conditional padding
	@if $has-close-button {
		padding: 0 5px 0 12px;
	} @else {
		padding: 0 8px;
	}

	.dbq-tab-bar-item-close-button {
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(255,255,255,0.2);
		border-radius: 50%;
		margin-left: 5px;
		width: 20px;
		height: 20px;

		svg {
			fill: $color-white;
			width: 16px;
			height: 16px;
		}
	}

	.dbq-tab-bar-item-count {
		@include badge;
		margin-left: 5px;
	}

	svg {
		fill: $text-color-default;
	}

	&:hover {
		background: $background-color-translucent-default;
	}

	&.dbq-tab-bar-add-tab-button {
		width: 30px;
		padding: 0;
		justify-content: center;
	}

	&.dbq-tab-bar-item-active {
		background: $color-primary;
		color: #fff;
		font-weight: $font-weight-bold;
	}
}

@mixin input-placeholder {
	&.placeholder {
		@content;
	}
	&:-moz-placeholder {
		@content;
	}
	&::-moz-placeholder {
		@content;
	}
	&:-ms-input-placeholder {
		@content;
	}
	&::-webkit-input-placeholder {
		@content;
	}
}

@mixin hide-placeholder {
	&::-webkit-input-placeholder {
        /* WebKit browsers */
         opacity: 0;
    }
    &:-moz-placeholder {
        /* Mozilla Firefox 4 to 18 */
		opacity: 0;
    }
    &::-moz-placeholder {
        /* Mozilla Firefox 19+ */
		opacity: 0;
    }
    &:-ms-input-placeholder {
        /* Internet Explorer 10+ */
		opacity: 0;
    }
    &::placeholder {
		opacity: 0;
    }
}

// This mixin assumes that the hide-placeholder mixin was used to hide the placeholder before.
@mixin show-placeholder {
	&::-webkit-input-placeholder {
        /* WebKit browsers */
         opacity: 1;
    }
    &:-moz-placeholder {
        /* Mozilla Firefox 4 to 18 */
		opacity: 1;
    }
    &::-moz-placeholder {
        /* Mozilla Firefox 19+ */
		opacity: 1;
    }
    &:-ms-input-placeholder {
        /* Internet Explorer 10+ */
		opacity: 1;
    }
    &::placeholder {
		opacity: 1;
    }
}

// Mixin for multi-line ellipsis
@mixin ellipsis($lines: 1) {
	overflow: hidden;

	@if $lines == 1 {
		white-space: nowrap;
		text-overflow: ellipsis; 
	} 
	@else {
		display: -webkit-box;
		-webkit-line-clamp: $lines;
		-webkit-box-orient: vertical;
	}
}