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

/* smw/util/ext.smw.vertical.tabs.css */
/* Style the buttons inside the tab */
div.smw-vtab-nav button {
	background-color: transparent;
	color: var( --color-primary );
}

div.smw-vtab-nav button a {
	color: var( --color-primary );
}

div.smw-vtab-nav.nav-right button {
	border-left-color: var( --border-color-base );
}

div.smw-vtab-nav.nav-left button {
	border-right-color: var( --border-color-base );
}

/* Change background color of buttons on hover */
div.smw-vtab-nav button:hover {
	border-color: var( --border-color-base );
	border-radius: 0 var( --border-radius--small ) var( --border-radius--small ) 0;
	background-color: var( --background-color-quiet--hover );
}

div.smw-vtab-nav.nav-right button:hover {
	border-color: var( --border-color-base );
	border-left-color: var( --border-color-base );
}

div.smw-vtab-nav.nav-left button:hover {
	border-color: var( --border-color-base );
	border-right-color: var( --border-color-base );
}

/* Create an active/current "tab button" class */
div.smw-vtab-nav button.active {
	border: var( --border-color-base );
	background-color: transparent;
	color: var( --color-base--emphasized );
}

div.smw-vtab-nav.nav-right button.active {
	border-radius: 0 var( --border-radius--small ) var( --border-radius--small ) 0;
}

div.smw-vtab-nav.nav-left button.active {
	border-radius: var( --border-radius--small ) 0 0 var( --border-radius--small );
}

div.smw-vtab-nav button.active a {
	color: var( --color-base--emphasized );
}

div.smw-vtab-nav.nav-right button.active,
div.smw-vtab-nav.nav-right button.active a {
	border-color: var( --border-color-base );
}

div.smw-vtab-nav.nav-left button.active,
div.smw-vtab-nav.nav-left button.active a {
	border-color: var( --border-color-base );
}

/* Style the tab content */
.smw-vtab-content {
	border-color: var( --border-color-base );
}

div.smw-vtab-nav .smw-vtab-warning a {
	color: var( --color-warning );
}

div.smw-vtab-nav .smw-vtab-warning.active a {
	color: var( --color-warning--active );
}