/*
 * Citizen
 *
 * SkinStyles for Extension:SemanticMediaWiki
 * Module: smw.jsonview
 * 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/smw.jsonview.css */
.smw-jsonview-button-group-left {
	height: 40px;
	margin-left: 0;
}

.smw-jsonview-button-group-left input {
	border-color: var( --border-color-base );
	border-radius: var( --border-radius-base );
}

.smw-jsonview-button {
	height: 40px;
	background-color: var( --color-progressive );
	transition-duration: 0ms;
}

.smw-jsonview-button:first-child {
	border-right-color: var( --border-color-base );
	border-radius: var( --border-radius-base ) 0 0 var( --border-radius-base );
}

.smw-jsonview-button:last-child {
	border-radius: 0 var( --border-radius-base ) var( --border-radius-base ) 0;
}

.smw-jsonview-button:hover {
	background-color: var( --color-progressive--hover );
}

// Added active state
.smw-jsonview-button:active {
	background-color: var( --color-progressive--active );
}

.jsonview ul {
	border-left-color: var( --border-color-base );
}

.smw-jsonview-menu {
	display: flex !important;
	justify-content: space-between;
	height: auto;
	padding: var( --space-xs ) 0;
	font-size: var( --font-size-small );
	background-color: var( --color-surface-0 );
	border: 0;
	border-bottom: var( --border-width-base ) solid var( --border-color-base );
}

.smw-jsonview-menu + pre {
	background-color: var( --color-surface-2 );
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.smw-jsonview-menu .smw-jsonview-button {
	color: var( --color-base );
	background-color: transparent;
	border-radius: var( --border-radius-base );
}

.smw-jsonview-menu .smw-jsonview-button:hover {
	background-color: var( --background-color-button-quiet--hover );
}

// Added active state
.smw-jsonview-menu .smw-jsonview-button:active {
	background-color: var( --background-color-button-quiet--active );
}

.smw-jsonview-menu .smw-jsonview-button:first-child {
	border-right: 0;
}