//colors
// $color_green_leaf_approx: #4c7607;
// $color_silver_chalice_approx: #aaa;
// $white: #fff;
// $color_black_haze_approx: #f6f6f6;
// $color_celeste_approx: #ccc;
// $color_suva_gray_approx: #888;
// $black: #000;

//urls
// $url_pju_1: url(../../../../images/gem/skin/flat/ui-icons_888888_256x240.png);
// $url_pju_2: url(../../../../images/gem/skin/flat/ui-icons_454545_256x240.png);

//@extend-elements
//original selectors
//.ui-accordion .ui-state-active, .ui-accordion .ui-widget-content .ui-state-active, .ui-accordion .ui-widget-header .ui-state-active, .ui-accordion .ui-widget-content .ui-state-active.ui-state-hover, .ui-accordion .ui-widget-header .ui-state-active.ui-state-hover
%extend_pju_1 {
	border: 1px solid $color_green_leaf_approx;
	color: $black;
	background-color: $color_black_haze_approx;
}


.ui-datepicker-trigger {
	display: inline-block;
	vertical-align: middle;
	margin-left: 10px;
}
.ui-widget-header {
	background: $color_green_leaf_approx;
	border: none;
	.ui-state-hover {
		border: none;
		background-color: $color_black_haze_approx;
	}
	.ui-state-focus {
		border: none;
		background-color: $color_black_haze_approx;
	}
}
.dp-weekday-label {
	margin-left: 5px;
	vertical-align: middle;
}

.ui-corner-all {
	//Instead of the line below you could use @include border-bottom-right-radius($radius)
	border-bottom-right-radius: 0;
	//Instead of the line below you could use @include border-bottom-left-radius($radius)
	border-bottom-left-radius: 0;
	//Instead of the line below you could use @include border-top-right-radius($radius)
	border-top-right-radius: 0;
	//Instead of the line below you could use @include border-top-left-radius($radius)
	border-top-left-radius: 0;
}
.ui-corner-bottom {
	//Instead of the line below you could use @include border-bottom-right-radius($radius)
	border-bottom-right-radius: 0;
	//Instead of the line below you could use @include border-bottom-left-radius($radius)
	border-bottom-left-radius: 0;
}
.ui-corner-right {
	//Instead of the line below you could use @include border-bottom-right-radius($radius)
	border-bottom-right-radius: 0;
	//Instead of the line below you could use @include border-top-right-radius($radius)
	border-top-right-radius: 0;
}
.ui-corner-br {
	//Instead of the line below you could use @include border-bottom-right-radius($radius)
	border-bottom-right-radius: 0;
}
.ui-corner-left {
	//Instead of the line below you could use @include border-bottom-left-radius($radius)
	border-bottom-left-radius: 0;
	//Instead of the line below you could use @include border-top-left-radius($radius)
	border-top-left-radius: 0;
}
.ui-corner-bl {
	//Instead of the line below you could use @include border-bottom-left-radius($radius)
	border-bottom-left-radius: 0;
}
.ui-corner-top {
	//Instead of the line below you could use @include border-top-right-radius($radius)
	border-top-right-radius: 0;
	//Instead of the line below you could use @include border-top-left-radius($radius)
	border-top-left-radius: 0;
}
.ui-corner-tr {
	//Instead of the line below you could use @include border-top-right-radius($radius)
	border-top-right-radius: 0;
}
.ui-corner-tl {
	//Instead of the line below you could use @include border-top-left-radius($radius)
	border-top-left-radius: 0;
}
.ui-state-hover {
	border: none;
	background-color: $color_black_haze_approx;
	.ui-icon {
		background-image: $url_pju_2;
	}
}
.ui-state-focus {
	border: none;
	background-color: $color_black_haze_approx;
	.ui-icon {
		background-image: $url_pju_2;
	}
}
.ui-widget-content {
	.ui-state-hover {
		border: none;
		background-color: $color_black_haze_approx;
	}
	.ui-state-focus {
		border: none;
		background-color: $color_black_haze_approx;
	}
}
.ui-accordion {
	.ui-accordion-header {
		//Instead of the line below you could use @include box-sizing($bs)
		box-sizing: border-box;
	}
	.ui-state-default {
		border: 1px solid $color_celeste_approx;
		color: $color_suva_gray_approx;
	}
	.ui-widget-content {
		.ui-state-default {
			border: 1px solid $color_celeste_approx;
			color: $color_suva_gray_approx;
			&.ui-state-hover {
				border: 1px solid $color_celeste_approx;
				color: $color_suva_gray_approx;
			}
		}
		.ui-state-active {
			@extend %extend_pju_1;
			&.ui-state-hover {
				@extend %extend_pju_1;
			}
		}
	}
	.ui-widget-header {
		.ui-state-default {
			border: 1px solid $color_celeste_approx;
			color: $color_suva_gray_approx;
			&.ui-state-hover {
				border: 1px solid $color_celeste_approx;
				color: $color_suva_gray_approx;
			}
		}
		.ui-state-active {
			@extend %extend_pju_1;
			&.ui-state-hover {
				@extend %extend_pju_1;
			}
		}
	}
	.ui-state-active {
		@extend %extend_pju_1;
	}
}
.ui-dialog .ui-dialog-buttonpane button {
	font-size: 0.92857rem;
	padding: 5px 25px;
	background: $color_silver_chalice_approx;
	color: $white;
	//Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
	transition: background 300ms;
	cursor: pointer;
	border: none;
	//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
	border-radius: 0;
	span {
		padding: 0;
	}
}
.ui-state-default .ui-icon {
	background-image: $url_pju_1;
}
