/*
 * Citizen - jQuery UI Smoothness Theme
 * https://starcitizen.tools
*/

/*!
 * jQuery UI CSS Framework 1.9.2
 */

/* Component containers
---------------------------------- */
.ui {
	&-dialog {
		box-shadow: var( --box-shadow-drop-xx-large );

		.ui-dialog-titlebar {
			padding: var( --space-md );
		}

		&.ui-widget-content {
			background: var( --color-surface-1 );
			border-radius: var( --border-radius-medium );
		}
	}

	&-widget {
		font-family: var( --font-family-base );
		font-size: var( --font-size-small );

		/* Align with Codex styles */
		input,
		select,
		textarea {
			padding: var( --space-xxs ) var( --space-xs );
			/* FIXME: Replace with line-height-small when we import Codex line height */
			line-height: var( --line-height-xx-small );
			color: var( --color-emphasized );
			// Show background when hovered
			background-color: transparent;
			border-color: var( --border-color-interactive );

			&:hover {
				background-color: var( --color-surface-0 );
				border-color: var( --color-progressive--hover );
			}

			&:focus {
				background-color: var( --color-surface-0 );
				border-color: var( --color-progressive );
				outline: 0;
				box-shadow: inset 0 0 0 1px var( --color-progressive );
			}
		}

		input,
		select,
		textarea,
		button {
			font-family: var( --font-family-base );
			border-radius: var( --border-radius-base );
		}

		&-content {
			color: var( --color-base );
			background: var( --color-surface-2 );
			border-color: var( --border-color-base );
		}

		&-header {
			font-size: 1rem;
			font-weight: var( --font-weight-semi-bold );
			color: var( --color-emphasized );
			background: var( --color-surface-2--hover );
			border: 0;
		}
	}
}

/* Interaction states
---------------------------------- */
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
	font-weight: var( --font-weight-medium );
	color: var( --color-base );
	background: var( --color-surface-2 );
	border-color: var( --border-color-base );
}

.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited {
	color: var( --color-base );
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
	color: var( --color-emphasized );
	background: var( --color-surface-2--hover );
	border-color: transparent;
}

.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited {
	color: var( --color-emphasized );
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
	color: var( --color-subtle );
	background: var( --color-surface-2--active );
	border-color: var( --color-surface-2--active );
}

.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
	color: var( --color-subtle );
}

/* Interaction Cues
---------------------------------- */
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
	color: var( --color-progressive );
	background: var( --background-color-progressive-subtle );
	border-color: var( --border-color-base );
}

.ui-state-highlight a,
.ui-widget-content .ui-state-highlight a,
.ui-widget-header .ui-state-highlight a {
	color: var( --color-progressive );
}

.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
	color: var( --color-destructive );
	background: var( --background-color-destructive-subtle );
	border-color: var( --border-color-base );
}

.ui-state-error a,
.ui-widget-content .ui-state-error a,
.ui-widget-header .ui-state-error a {
	color: var( --color-destructive );
}

.ui-state-error-text,
.ui-widget-content .ui-state-error-text,
.ui-widget-header .ui-state-error-text {
	color: var( --color-destructive );
}

/* Overlays */
.ui-widget-overlay {
	background: var( --background-color-backdrop-light );
	opacity: 1;
}

.skin-theme-clientpref-night {
	.ui-widget-header .ui-icon {
		filter: invert( 1 ) hue-rotate( 180deg );
	}
}