/*!
 * @copyright   Copyright (C) 2010-2021 Combodo SARL
 * @license     http://opensource.org/licenses/AGPL-3.0
 */

$ibo-vendors-jqueryui--ui-dialog--padding-x: 30px !default;
$ibo-vendors-jqueryui--ui-dialog--border-radius: $ibo-border-radius-500 !default;
$ibo-vendors-jqueryui--ui-dialog--background-color: $ibo-color-white-100 !default;

$ibo-vendors-jqueryui--ui-dialog-titlebar--height: 50px !default;
$ibo-vendors-jqueryui--ui-dialog-titlebar--background-color: $ibo-vendors-jqueryui--ui-dialog--background-color !default;
$ibo-vendors-jqueryui--ui-dialog-titlebar--border-bottom: solid 1px $ibo-color-grey-200 !default;

$ibo-vendors-jqueryui--ui-dialog-buttonpane--height: $ibo-vendors-jqueryui--ui-dialog-titlebar--height !default;
$ibo-vendors-jqueryui--ui-dialog-buttonpane--background-color: $ibo-vendors-jqueryui--ui-dialog--background-color !default;
$ibo-vendors-jqueryui--ui-dialog-buttonpane--border-top: $ibo-vendors-jqueryui--ui-dialog-titlebar--border-bottom !default;

$ibo-vendors-jqueryui--ui-dialog--border: $ibo-vendors-jqueryui--ui-dialog--background-color !default;

$ibo-vendors-jqueryui--ui-widget-overlay--background-color: $ibo-color-blue-grey-800 !default;

$ibo-vendors-jqueryui--ui-datepicker--padding-top: 34px !default;
$ibo-vendors-jqueryui--ui-datepicker--background-color: $ibo-color-white-100 !default;
$ibo-vendors-jqueryui--ui-datepicker--border-color: $ibo-color-grey-400 !default;
$ibo-vendors-jqueryui--ui-datepicker--border-radius: $ibo-border-radius-500 !default;

$ibo-vendors-jqueryui--ui-datepicker-header--padding: $ibo-border-radius-500 $ibo-border-radius-500 0 0 !default;
$ibo-vendors-jqueryui--ui-datepicker-header--border-radius: 4px !default;

$ibo-vendors-jqueryui--ui-slider--background-color: $ibo-color-grey-100 !default;
$ibo-vendors-jqueryui--ui-slider--border-color: $ibo-color-grey-600 !default;
$ibo-vendors-jqueryui--ui-slider--border-radius: $ibo-border-radius-300 !default;

$ibo-vendors-jqueryui--ui-slider--ui-slider-handle--background-color: $ibo-color-white-100 !default;
$ibo-vendors-jqueryui--ui-slider--ui-slider-handle--border-color: $ibo-vendors-jqueryui--ui-slider--border-color !default;
$ibo-vendors-jqueryui--ui-slider--ui-slider-handle--border-radius: $ibo-vendors-jqueryui--ui-slider--border-radius !default;
$ibo-vendors-jqueryui--ui-slider--ui-slider-handle--diameter: 1.4em !default;
$ibo-vendors-jqueryui--ui-slider--ui-slider-handle--hover--border-color: $ibo-color-orange-700 !default;

// Tabs

.ui-dialog{
	display: flex;
	flex-direction: column;
	position: absolute;
	top: 0;
	left: 0;
	background-color: $ibo-vendors-jqueryui--ui-dialog--background-color;
	border-radius: $ibo-vendors-jqueryui--ui-dialog--border-radius;
	overflow: hidden;
	outline: 0;
	z-index: 21;
	.ui-dialog-titlebar {
		padding: .4em $ibo-vendors-jqueryui--ui-dialog--padding-x;
		position: relative;
		background-color: $ibo-vendors-jqueryui--ui-dialog-titlebar--background-color;
		height: $ibo-vendors-jqueryui--ui-dialog-titlebar--height;
		border-bottom: $ibo-vendors-jqueryui--ui-dialog-titlebar--border-bottom;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.ui-dialog-title {
		float: left;
		margin: .1em 0;
		white-space: nowrap;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.ui-dialog-titlebar-close {
		position: absolute;
		right: $ibo-vendors-jqueryui--ui-dialog--padding-x;
		top: 50%;
		width: 20px;
		margin: -10px 0 0 0;
		padding: 1px;
		height: 20px;
	}
	.ui-dialog-content {
		position: relative;
		padding: 16px $ibo-vendors-jqueryui--ui-dialog--padding-x;
    overflow: auto;
	}
	.ui-dialog-buttonpane {
		margin-top: auto;
		text-align: left;
		border-width: 1px 0 0 0;
		background-image: none;
		padding: .4em $ibo-vendors-jqueryui--ui-dialog--padding-x;
		position: relative;
		background-color: $ibo-vendors-jqueryui--ui-dialog-buttonpane--background-color;
		border-top: $ibo-vendors-jqueryui--ui-dialog-buttonpane--border-top;
		height: $ibo-vendors-jqueryui--ui-dialog-buttonpane--height;
		.ui-dialog-buttonset {
			float: right;
		}
		button {
			margin: .5em .4em .5em 0;
			cursor: pointer;
		}
	}
	.ui-resizable-n {
		height: 2px;
		top: 0;
	}
	.ui-resizable-e {
		width: 2px;
		right: 0;
	}
	.ui-resizable-s {
		height: 2px;
		bottom: 0;
	}
	.ui-resizable-w {
		width: 2px;
		left: 0;
	}
	.ui-resizable-se {
		width: 7px;
		height: 7px;
		right: 0;
		bottom: 0;
	}
	.ui-resizable-sw {
		width: 7px;
		height: 7px;
		left: 0;
		bottom: 0;
	}
	.ui-resizable-ne {
		width: 7px;
		height: 7px;
		right: 0;
		top: 0;
	}
	.ui-resizable-nw {
		width: 7px;
		height: 7px;
		left: 0;
		top: 0;
	}
	.ui-button {
		@extend .ibo-button;
		@extend .ibo-is-regular;
		@extend .ibo-is-secondary;
		> .ui-icon {
			background-image: none;
			float: unset;
			margin: auto;
			&.ui-icon-closethick::after{
				content: '\f00d';
				font-family: 'Font Awesome 5 Free';
				font-weight: 600;
				text-indent: 0;
				position: absolute;
				left: 0px;
				width: 100%;
				top: 4px;
			}
		}
		&.ui-dialog-titlebar-close{
			@extend .ibo-is-alternative;
			@extend .ibo-is-grey;
			
		}
	}
}
.ui-button-icon-only {
	text-indent: -9999px;
	white-space: nowrap;
}
.ui-dialog-title{
	@extend %ibo-font-ral-nor-250;
}
.ui-widget-overlay.ui-front{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: .6;
	filter: Alpha(Opacity=60);
	background-color: $ibo-vendors-jqueryui--ui-widget-overlay--background-color;
}
// Resiable


.ui-resizable {
	position: relative;
}
.ui-resizable-handle {
	position: absolute;
	font-size: 0.1px;
	display: block;
	-ms-touch-action: none;
	touch-action: none;
}
.ui-resizable-disabled {
	.ui-resizable-handle {
		display: none;
	}
}
.ui-resizable-autohide {
	.ui-resizable-handle {
		display: none;
	}
}
.ui-resizable-n {
	cursor: n-resize;
	height: 7px;
	width: 100%;
	top: -5px;
	left: 0;
}
.ui-resizable-s {
	cursor: s-resize;
	height: 7px;
	width: 100%;
	bottom: -5px;
	left: 0;
}
.ui-resizable-e {
	cursor: e-resize;
	width: 7px;
	right: -5px;
	top: 0;
	height: 100%;
}
.ui-resizable-w {
	cursor: w-resize;
	width: 7px;
	left: -5px;
	top: 0;
	height: 100%;
}
.ui-resizable-se {
	cursor: se-resize;
	width: 12px;
	height: 12px;
	right: 1px;
	bottom: 1px;
}
.ui-resizable-sw {
	cursor: sw-resize;
	width: 9px;
	height: 9px;
	left: -5px;
	bottom: -5px;
}
.ui-resizable-nw {
	cursor: nw-resize;
	width: 9px;
	height: 9px;
	left: -5px;
	top: -5px;
}
.ui-resizable-ne {
	cursor: ne-resize;
	width: 9px;
	height: 9px;
	right: -5px;
	top: -5px;
}

// Layout

.ui-layout-pane {
	overflow: auto;
}

// Date picker

.ui-datepicker{
	padding-top: 15px;
	background-color: $ibo-vendors-jqueryui--ui-datepicker--background-color;
	border: solid 1px $ibo-vendors-jqueryui--ui-datepicker--border-color;
	border-radius: $ibo-vendors-jqueryui--ui-datepicker--border-radius;
	.ui-datepicker-header{
		height: unset;
		padding: $ibo-vendors-jqueryui--ui-datepicker-header--border-radius;
		border-radius: $ibo-vendors-jqueryui--ui-datepicker-header--border-radius;
		&::before{
			position: absolute;
			top: 0;
			left: 0;
			display: block;
			background-color: #2c5382;
			content: "";
			width: 100%;
			height: 8px;
			padding-bottom: 8px;
		}
	}
	.ui-datepicker-prev {
		position: absolute;
		top: 2px;
		width: 1.8em;
		height: 1.8em;
		left: 2px;
		span {
			display: block;
			position: absolute;
			left: 50%;
			margin-left: -8px;
			top: 50%;
			margin-top: -8px;
		}
	}
	.ui-datepicker-next {
		position: absolute;
		top: 2px;
		width: 1.8em;
		height: 1.8em;
		right: 2px;
		span {
			display: block;
			position: absolute;
			left: 50%;
			margin-left: -8px;
			top: 50%;
			margin-top: -8px;
		}
	}
	.ui-datepicker-prev-hover {
		top: 1px;
		left: 1px;
	}
	.ui-datepicker-next-hover {
		top: 1px;
		right: 1px;
	}
	.ui-datepicker-title {
		margin: 0 2.3em;
		line-height: 1.8em;
		text-align: center;
		select {
			font-size: 1em;
			margin: 1px 0;
		}
	}
	select.ui-datepicker-month {
		width: 45%;
	}
	select.ui-datepicker-year {
		width: 45%;
	}
	table {
		width: 100%;
		font-size: .9em;
		border-collapse: collapse;
		margin: 0 0 .4em;
	}
	th {
		padding: .7em .3em;
		text-align: center;
		font-weight: bold;
		// // border: 0;
	}
	td {
		// // border: 0;
		padding: 1px;
		span {
			display: block;
			padding: .2em;
			text-align: right;
			text-decoration: none;
		}
		a {
			display: block;
			padding: .2em;
			text-align: right;
			text-decoration: none;
		}
	}
	.ui-datepicker-buttonpane {
		background-image: none;
		margin: .7em 0 0 0;
		padding: 0 .2em;
		border-left: 0;
		border-right: 0;
		border-bottom: 0;
		button {
			float: right;
			margin: .5em .2em .4em;
			cursor: pointer;
			padding: .2em .6em .3em .6em;
			width: auto;
			overflow: visible;
		}
		button.ui-datepicker-current {
			float: left;
		}
	}
	.ui-icon {
		display: block;
		text-indent: -99999px;
		overflow: hidden;
		background-repeat: no-repeat;
		left: .5em;
		top: .3em;
	}
}
.ui-datepicker.ui-datepicker-multi {
	width: auto;
}
.ui-datepicker-multi {
	.ui-datepicker-group {
		float: left;
		table {
			width: 95%;
			margin: 0 auto .4em;
		}
	}
	.ui-datepicker-group-last {
		.ui-datepicker-header {
			border-left-width: 0;
		}
	}
	.ui-datepicker-group-middle {
		.ui-datepicker-header {
			border-left-width: 0;
		}
	}
	.ui-datepicker-buttonpane {
		clear: left;
	}
}
.ui-datepicker-multi-2 {
	.ui-datepicker-group {
		width: 50%;
	}
}
.ui-datepicker-multi-3 {
	.ui-datepicker-group {
		width: 33.3%;
	}
}
.ui-datepicker-multi-4 {
	.ui-datepicker-group {
		width: 25%;
	}
}
.ui-datepicker-row-break {
	clear: both;
	width: 100%;
	font-size: 0;
}
.ui-datepicker-rtl {
	direction: rtl;
	.ui-datepicker-prev {
		right: 2px;
		left: auto;
		&:hover {
			right: 1px;
			left: auto;
		}
	}
	.ui-datepicker-next {
		left: 2px;
		right: auto;
		&:hover {
			left: 1px;
			right: auto;
		}
	}
	.ui-datepicker-buttonpane {
		clear: right;
		button {
			float: left;
		}
		button.ui-datepicker-current {
			float: right;
		}
	}
	.ui-datepicker-group {
		float: right;
	}
	.ui-datepicker-group-last {
		.ui-datepicker-header {
			border-right-width: 0;
			border-left-width: 1px;
		}
	}
	.ui-datepicker-group-middle {
		.ui-datepicker-header {
			border-right-width: 0;
			border-left-width: 1px;
		}
	}
}

// Sliders 

.ui-slider {
  position: relative;
  text-align: left;
  background-color: $ibo-vendors-jqueryui--ui-slider--background-color;
  border: solid 1px $ibo-vendors-jqueryui--ui-slider--border-color;
  border-radius: $ibo-vendors-jqueryui--ui-slider--border-radius;
  .ui-slider-handle {
    background-color: $ibo-vendors-jqueryui--ui-slider--ui-slider-handle--background-color;
    border: solid 1px $ibo-vendors-jqueryui--ui-slider--ui-slider-handle--border-color;
    border-radius: $ibo-vendors-jqueryui--ui-slider--ui-slider-handle--border-radius;
    position: absolute;
    z-index: 2;
    width: $ibo-vendors-jqueryui--ui-slider--ui-slider-handle--diameter;
    height: $ibo-vendors-jqueryui--ui-slider--ui-slider-handle--diameter;
    -ms-touch-action: none;
    touch-action: none;
    cursor: pointer;
    &:hover, &:active{
      border: solid 1px $ibo-color-orange-700;
    }
  }
  .ui-slider-range {
    position: absolute;
    z-index: 1;
    font-size: .7em;
    display: block;
    // border: 0;
    background-position: 0 0;
  }
}
.ui-slider.ui-state-disabled {
  .ui-slider-handle {
    filter: inherit;
  }
  .ui-slider-range {
    filter: inherit;
  }
}
.ui-slider-horizontal {
  height: .8em;
  .ui-slider-handle {
    top: -.2em;
    margin-left: -.6em;
  }
  .ui-slider-range {
    top: 0;
    height: 100%;
  }
  .ui-slider-range-min {
    left: 0;
  }
  .ui-slider-range-max {
    right: 0;
  }
}
.ui-slider-vertical {
  width: .8em;
  height: 100px;
  .ui-slider-handle {
    left: -.3em;
    margin-left: 0;
    margin-bottom: -.6em;
  }
  .ui-slider-range {
    left: 0;
    width: 100%;
  }
  .ui-slider-range-min {
    bottom: 0;
  }
  .ui-slider-range-max {
    top: 0;
  }
}