@import "../../partials/base";

/************** ACCORDION *************/
.ui-accordion h3 .pull-right i {
	margin: 8px 8px 0 0;
}
.ui-accordion .ui-accordion-header i.fa-chevron-down {
	display: none;
}
.ui-accordion .ui-accordion-header.ui-state-active i.fa-chevron-right {
	display: none;
}
.ui-accordion .ui-accordion-header.ui-state-active i.fa-chevron-down {
	display: inline-block;
}

/**************** DIALOG ****************/
.ui-dialog {
	padding: 0;
	border: none;
	border-radius: 3px;
	box-shadow: 1px 1px 3px 1px #606069;

	.ui-dialog-titlebar-close {
		width: 40px;
		border: none;
		background: none;
		color: darken($primary-color, 17.06);
	}
}
.ui-dialog .ui-dialog-content {
	min-width: 300px;
	padding: 0;
	border-radius: 2px;
	background: #fff;
}
.ui-dialog .ui-dialog-titlebar {
	padding: 10px 20px;
	border: 0;
	border-radius: 2px 2px 0 0;
	background: $primary-color;
}
.ui-dialog .ui-dialog-title {
	font-size: 24px;
	line-height: 40px;
	margin: 0;
	font-weight: 400;
	letter-spacing: .4px;
	color: #fff;
}
/* Special rules for alerts & confirms */
.ui-dialog.monster-alert .ui-dialog-titlebar,
.ui-dialog.monster-confirm .ui-dialog-titlebar {
	background: #fff;
	padding-top: 20px;
	padding-bottom: 0px;
}

.ui-dialog.monster-alert .ui-dialog-titlebar .ui-dialog-title,
.ui-dialog.monster-confirm .ui-dialog-titlebar .ui-dialog-title {
	color: #303039;
	width: 100%;
	font-size: 60px;
	text-align: center;
}
.ui-dialog.monster-alert .ui-dialog-titlebar .ui-dialog-title .monster-warning-sign,
.ui-dialog.monster-confirm .ui-dialog-titlebar .ui-dialog-title .monster-warning-sign {
	margin: auto;
}

.ui-dialog.monster-alert .ui-dialog-titlebar-close,
.ui-dialog.monster-confirm .ui-dialog-titlebar-close {
	display: none;
}
/**********/
.ui-widget-overlay {
	background: #333;
}
.ui-widget,
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
	font-family: 'Source Sans Pro', Helvetica, sans-serif;
}
.ui-dialog .dialog-buttons-wrapper {
	text-align: right;
}

/************** DATEPICKER **************/
.ui-datepicker {
	margin-top: 5px;
	border-color: $input-border-color;
	border-radius: 2px;
	box-shadow: 1px 1px 2px $input-border-color;
	background: $white;
}
.ui-datepicker-calendar thead {
	color: #808089;
}
.ui-datepicker-calendar .ui-state-default {
	font-weight: 600;
	text-align: center;
	color: #555;
	border-color: transparent;
	background: transparent;
}
.ui-datepicker-calendar .ui-state-default.ui-state-active {
	font-weight: 600;
	font-weight: 600;
	background: $primary-color;
	border-radius: 2px;
	color: $white;
}
.ui-datepicker-calendar .ui-state-default.ui-state-hover {
	border-color: $primary-color;
}
.ui-datepicker-header {
	border: none;
	background: inherit;
	color: #333;
}
.ui-datepicker th {
	font-weight: 600;
}
.ui-datepicker-prev .ui-icon,
.ui-datepicker-next .ui-icon {
	background: transparent;
}
.ui-datepicker-prev .ui-icon:after,
.ui-datepicker-next .ui-icon:after {
	position: absolute;
	top: 4px;
	width: 8px;
	height: 8px;
	content: '';
	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	     -o-transform: rotate(45deg);
	        transform: rotate(45deg);
	border: solid 2px #fff;
}
.ui-datepicker-prev .ui-icon:after {
	left: 8px;
	border-top: none;
	border-right: none;
	border-color: #333;
}
.ui-datepicker-next .ui-icon:after {
	border-color: #333;
	right: 8px;
	border-bottom: none;
	border-left: none;
}
.ui-datepicker-prev.ui-state-hover,
.ui-datepicker-next.ui-state-hover {
	border-color: transparent;
	background: inherit;
}
.ui-datepicker-prev:not(.ui-state-disabled),
.ui-datepicker-next:not(.ui-state-disabled) {
	cursor: pointer;
}
.ui-datepicker-prev.ui-state-hover:not(.ui-state-disabled) .ui-icon:after,
.ui-datepicker-next.ui-state-hover:not(.ui-state-disabled) .ui-icon:after {
	border-color: $primary-color;
}

/************** MONTHPICKER **************/
/**
 * jquery.monthpicker.css
 */
.ui-widget.month-picker {
	border-color: $input-border-color;
	border-radius: 2px;
	box-shadow: 1px 1px 2px $input-border-color;
	background: $white;
	margin: 5px 0;

	.ui-state-default {
		font-weight: 600;
		text-align: center;
		color: #555;
		border-color: transparent;
		background: transparent;

		&.ui-state-active {
			font-weight: 600;
			font-weight: 600;
			background: $primary-color;
			border-radius: 2px;
			color: $white;
		}

		&.ui-state-hover {
			border-color: $primary-color;
			border-radius: 2px;
		}
	}

	.ui-widget-header {
		border: none;
		background: inherit;
		color: #333;

		a {
			color: #333;
		}

		.month-picker-title {
			a.ui-state-hover {
				cursor: pointer;
				background: transparent;
				border-color: transparent;
				color: $primary-color;
			}
		}

		.month-picker-previous,
		.month-picker-next {
			.ui-icon::after {
				position: absolute;
				top: 4px;
				width: 8px;
				height: 8px;
				content: '';
				-webkit-transform: rotate(45deg);
				   -moz-transform: rotate(45deg);
				    -ms-transform: rotate(45deg);
				     -o-transform: rotate(45deg);
				        transform: rotate(45deg);
				border: solid 2px #fff;
			}

			a.ui-state-hover {
				border-color: transparent;
				background: inherit;

				&:not(.ui-state-disabled) {
					cursor: pointer;

					.ui-icon::after {
						border-color: $primary-color;
					}
				}
			}
		}

		.month-picker-previous {
			.ui-icon {
				background: transparent;

				&::after {
					left: 8px;
					border-top: none;
					border-right: none;
					border-color: #333;
				}
			}
		}

		.month-picker-next {
			.ui-icon {
				background: transparent;

				&::after {
					border-color: #333;
					right: 8px;
					border-bottom: none;
					border-left: none;
				}
			}
		}
	}
}

/*************** SPINNER ***************/
.ui-widget.ui-spinner {
	border-radius: 2px;
	background: $panel-background-color;
	border-color: $french-gray2;

	&:focus-within {
		border-color: $primary-color;
	}

	.ui-spinner-button {
		width: 20px;
		background: linear-gradient(-180deg, $white 0%, #F4F4F5 100%);
		border-left: 1px solid $french-gray2;

		&.ui-corner-tr {
			border-bottom: 1px solid $french-gray2;
		}

		&.ui-corner-br {
			height: 18px;
		}

		.ui-icon{
			margin-left: 2px;

			.ui-icon-triangle-1-n {
				margin-top: -10px;
			}
		}
	}
}
