/**
 * Gongbi Skin
 * © 2015-2021 Issara
 * © 2022-2024 WaitSpring
 *
 * This program is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation; either version 2 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License along
 * with this program; if not, write to the Free Software Foundation, Inc.,
 * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
 */
/* Miscellaneous assembly */
/* Remember to use this for similar things that need to be consistent, not */
/* for things that are basically the same thing repeated, which should use */
/* a shared class instead. */

/* To hide objects, but keep them accessible for screen-readers */
.hidden() {
	position: absolute;
	top: -9999px;
	left: 0;
}

/* Icons - hides labels, but keep them accessible for screen-readers */
.icon() {
	border: 0;
	background-color: transparent;
	background-repeat: no-repeat;
	text-indent: -9999px;
}

/* Icons for the page actions menus */
.ca-icon( @icon: "" ) {
	display: inline-block;
	padding: 0 2px 0 22px;
	border: 0;
	margin-bottom: -0.35em;
	background-color: transparent;
	background-image: url( '@{icon}.svg' );
	background-position: left top;
	background-repeat: no-repeat;
}

/* For use after .ca-icon() ... */
.ca-icon-only() {
	overflow: hidden;
	width: 20px;
	box-sizing: border-box;
	padding: 0;
	text-indent: -9999px;
}

.nav-block() {
	padding: 1.5em 1.5em 0.5em;
	background-color: @base95;
	font-size: 0.95em;
	line-height: 1.125;
	word-wrap: break-word;

	ul,
	li {
		padding: 0;
		margin: 0;
		list-style: none;
	}

	label,
	h3 {
		padding-bottom: 0.15em;
		margin: 0.25em 0 0.75em 0;
		font-family: @fonts-serif;
		display: block;
	}

	label {
		font-size: 1em;
		font-weight: normal;
	}

	h3 {
		font-size: 1.125em;
		font-weight: bold;
	}

	.mw-portlet > div,
	.mw-portlet-body {
		margin-bottom: 2em;
	}

	li {
		padding: 0.25em 0;
	}
}

.column-right() {
	box-sizing: border-box;
	padding-left: 1em;

	.sidebar-chunk {
		.nav-block();
	}
}

.column-left() {
	box-sizing: border-box;
	padding-right: 1em;

	.sidebar-chunk {
		.nav-block();
	}
}

/* Dropdowns */
.dropdown-header() {
	padding-bottom: 0.45em;
	margin-bottom: -0.45em;
	cursor: pointer;

	&::after {
		display: inline-block;
		width: 12px;
		height: 12px;
		background-image: url( images/arrow-down-grey.svg );
		background-position: center center;
		background-repeat: no-repeat;
		content: '';
	}
}

.dropdown-menu( @direction: right ) {
	.nav-block();
	position: absolute;
	z-index: 3;
	overflow: visible;
	min-width: 9em;
	padding: 20px 2em 0;
	border: 1px solid @base70;
	margin: 0;
	background: @background;
	box-shadow: 0 2px 3px 1px rgba( 0, 0, 0, 0.15 );
	@{direction}: -1.25em;
}

.dropdown-pokey() {
	&::before,
	&::after {
		position: absolute;
		z-index: 4;
		right: 14px;
		width: 0;
		height: 0;
		border-right: 9px solid transparent;
		border-bottom: 9px solid @base70;
		border-left: 9px solid transparent;
		content: '';
		transform: rotate( 360deg ); /* to force some smoothing in annoying browsers */
	}

	&::before {
		top: -10px;
	}

	&::after {
		top: -8px;
		border-bottom-color: @base100;
	}
}
