/**
 * 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,
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
  font-family: $font-family-sans-serif;
}

.ui-widget-content,
.ui-widget {
	color: $body-color;
	font-size: 1em;
	border: 0;
}

.ui-widget-header {

	& .ui-dialog-title {
		padding: 6px 10px;
	}

	& 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 {
			@extend .icon-sprites-32x32;
			@include sprite($sprites-32x32-dialog-close-over);
		}
	}

	.ui-icon-closethick {
		@extend .icon-sprites-32x32;
		@include sprite($sprites-32x32-dialog-close);
		width: 30px;
		height:  30px;
	}
}

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

.ui-accordion {
	.ui-accordion-header {
		border-color: $btn-secondary-border;
		margin-bottom: 0;
	}
	.ui-accordion-content {
		border: 1px solid $btn-secondary-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;
	}
}
