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

@import '../../../resources/variables.less';

@media ( prefers-color-scheme: dark ) {
	.ui-widget-content {
		border: 1px solid @dark-bg-50;
		background: @dark-bg-0 none;
		color: @dark-text-90;
	}

	.ui-widget-header {
		border: 1px solid @dark-bg-50;
		background: @dark-bg-30 none;
		color: @dark-text-90;
	}

	.ui-state-default,
	.ui-widget-content .ui-state-default,
	.ui-widget-header .ui-state-default {
		border: 1px solid @dark-bg-30;
		background: @dark-bg-20 none;
		color: @dark-text-80;
	}

	.ui-state-default a,
	.ui-state-default a:link,
	.ui-state-default a:visited {
		color: @dark-text-80;
	}

	.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 {
		border: 1px solid @dark-bg-50;
		background: @dark-bg-20 none;
		color: @dark-text-90;
	}

	.ui-state-hover a,
	.ui-state-hover a:hover,
	.ui-state-hover a:link,
	.ui-state-hover a:visited {
		color: @dark-text-90;
	}

	.ui-state-active,
	.ui-widget-content .ui-state-active,
	.ui-widget-header .ui-state-active {
		border: 1px solid @dark-bg-50;
		background: @dark-bg-0 none;
		color: @dark-text-90;
	}

	.ui-state-active a,
	.ui-state-active a:link,
	.ui-state-active a:visited {
		color: @dark-text-90;
	}

	.ui-state-highlight,
	.ui-widget-content .ui-state-highlight,
	.ui-widget-header .ui-state-highlight {
		border: 1px solid @accent-10;
		background: @dark-bg-10 none;
		color: @dark-text-90;
	}

	.ui-state-highlight a,
	.ui-widget-content .ui-state-highlight a,
	.ui-widget-header .ui-state-highlight a {
		color: @dark-text-90;
	}

	.ui-state-error,
	.ui-widget-content .ui-state-error,
	.ui-widget-header .ui-state-error {
		border: 1px solid @red-50;
		background: @red-90 none;
		color: @red-50;
	}

	.ui-state-error a,
	.ui-widget-content .ui-state-error a,
	.ui-widget-header .ui-state-error a {
		color: @red-50;
	}

	.ui-state-error-text,
	.ui-widget-content .ui-state-error-text,
	.ui-widget-header .ui-state-error-text {
		color: @red-50;
	}

	.ui-widget-overlay {
		background: @dark-bg-50 none;
	}

	.ui-widget-shadow {
		background: @dark-bg-50 none;
	}

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