/*
 * Citizen
 *
 * SkinStyles for Extension:SemanticMediaWiki
 * Module: ext.smw.ask.styles
 * Version: 4.0.2 (0fcdfce)
 *
 * Date: 2022-10-20
*/

// Disable sticky header since it collides with anchor and adds no value
#citizen-page-header-sticky-sentinel {
	display: none;
}

/* smw/special/ext.smw.special.ask.css */
div#ask legend {
	// Needed to hide fake box shadow line from focus state
	background-color: var( --color-surface-0 );
}

.smw-ask-toplinks {
	font-family: inherit;
	font-size: var( --font-size-small );
	line-height: inherit;
	background-color: var( --color-surface-2 );
	border-radius: var( --border-radius-base );
}

.smw-ask-toplinks-edit {
	border-right-color: var( --color-surface-0 );
}

.smw-ask-condition fieldset,
.smw-ask-printhead fieldset {
	border-color: var( --border-color-base );
	border-radius: var( --border-radius-base );

	// Add focus state
	&:focus-within {
		border-color: var( --color-progressive );
		box-shadow: inset 0 0 0 1px var( --color-progressive );

		legend {
			color: var( --color-progressive );
		}
	}
}

.smw-ask-query .smw-table-row .smw-table-cell {
	border-color: var( --border-color-base );
}

.smw-ask-query textarea {
	// Override default textarea bg
	background-color: transparent;
}

.smw-ask-options-row-odd {
	background: transparent;
}

.smw-ask-options-row-even {
	background: transparent;
}

.smw-ask-button {
	font-size: var( --font-size-small );
	color: var( --color-base );
	border-color: var( --border-color-base );
	border-radius: var( --border-radius-base );
}

.smw-ask-button-submit input {
	padding: var( --space-md );
	font-size: var( --font-size-small );
	font-weight: var( --font-weight-medium );
	color: var( --color-inverted-primary );
	background-color: var( --color-progressive );
	border-color: var( --color-progressive );
	border-radius: var( --border-radius-medium );

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

	&:active {
		background-color: var( --color-progressive--active );
		border-color: var( --color-progressive--active );
	}
}

.smw-ask-button-right {
	color: var( --color-base );
	border-color: var( --border-color-base );
	border-radius: var( --border-radius-base );
}

.smw-ask-button:hover {
	background-color: var( --color-surface-2 );
}

.smw-ask-button input {
	color: var( --color-surface-1 ) !important;
}

.smw-ask-button-lgrey {
	background-color: var( --color-surface-2 );
	border-color: var( --border-color-base );

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

	// Added active state
	&:active {
		background-color: var( --color-surface-2--active );
	}
}

.smw-ask-button a,
.smw-ask-button a:hover,
.smw-ask-button a:focus,
.smw-ask-button a:active,
.smw-ask-button a:visited {
	color: var( --color-base );
}

.smw-ask-search fieldset,
.smw-ask-format fieldset,
.smw-ask-options fieldset {
	border-color: var( --border-color-base );
	border-radius: var( --border-radius-base );
}

.strike > span::before,
.strike > span::after {
	background: var( --border-color-base );
}

.smw-ask-sort-input input,
.smw-propertysubject-input {
	border-color: var( --border-color-base );
}

#options-toggle:not( :checked ) + #options-list .options-parameter-list::after {
	background-image: linear-gradient( to bottom, rgba( 255, 255, 255, 0 ), var( --color-surface-0 ) 90% );
}

.slowfade textarea::placeholder {
	color: var( --color-subtle );
}

.export-links li {
	border-left-color: var( --color-subtle );
}

// Make delete button destructive
.smw-ask-sort-delete-action {
	color: var( --color-destructive );

	&:hover {
		color: var( --color-destructive--hover );
	}

	&:active {
		color: var( --color-destructive--active );
	}
}

// Options parameter description text
.smw-ask-parameter-description {
	font-size: var( --font-size-x-small );
	color: var( --color-subtle );
}