/**
 * This file defines CMS-specific customizations to the jQuery UI theme.
 * Every rule should contain ONLY overwritten jQuery UI rules (with 'ui-' prefix).
 *
 * This file should be fairly short, as we're using our own custom jQuery UI theme already.
 * TODO Add theme reference
 *
 * Use _style.scss to add more generic style information,
 * and read the jQuery UI theming API: http://jqueryui.com/docs/Theming/API
 */

.ui-widget-content,
.ui-widget {
	color: $color-text;
	font-size: $font-base-size;
	font-family: $font-family;
	border: 0;
}


.ui-widget-header {
	background-color: darken($color-widget-bg, 20%);
	padding: 8px 8px 6px 8px;
	border-bottom: 2px solid darken($color-widget-bg, 35%);
	@include background-image(
		linear-gradient(darken($color-widget-bg, 5%), darken($color-widget-bg, 30%))
		);
	border-bottom: 3px solid darken($color-widget-bg, 50%);
	padding: 8px;
	@include border-radius(0);

	& .ui-dialog-title {
		padding: 6px 10px;
		text-shadow: lighten($color-base, 10%) 1px 1px 0;
	}



	& a.ui-dialog-titlebar-close {
		position:  absolute;
		top: -5px;
		right: -13px;
		width: 30px;
		height:  30px;
		z-index: 100000;
	}

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

		.ui-icon-closethick {
			background: sprite($sprites32, dialog-close-over) no-repeat;
		}
	}

	.ui-icon-closethick {
		background: sprite($sprites32, dialog-close) no-repeat;
		width: 30px;
		height:  30px;
	}
}

.ui-state-hover {
	cursor: pointer;
}

.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
	color: $color-text;
	font-size: $font-base-size;
	font-family: $font-family;
}

.ui-accordion {
	.ui-accordion-header {
		border-color: $color-button-generic-border;
		margin-bottom: 0;
	}
	.ui-accordion-content {
		border: 1px solid $color-button-generic-border;
		border-top: none;
	}
}

.ui-autocomplete {
	max-height: 240px;
	overflow-x: hidden;
	overflow-y: auto;

	/** sorry about the !important but the specificity of other selectors mandates it over writing out very specific selectors **/
	& .loading {
		background-image: url(../images/throbber.gif) !important;
		background-position: 97% center !important;
		background-repeat: no-repeat !important;
		background-size: auto !important;
	}
}