@import 'variables';

/*******************************************************************************
******************************* Property mixins ********************************
*******************************************************************************/

.flex-direction( @value ) {
	-webkit-flex-direction: @value; // Chrome 21.0-, Safari 6.1-
	-moz-flex-direction: @value; // Firefox 18.0-
	flex-direction: @value;
}

.flex-justify-content( @value ) {
	-webkit-justify-content: @value; // Chrome 21.0-, Safari 6.1-
	-moz-justify-content: @value; // Firefox 18.0-
	justify-content: @value;
}

.flex-align-items( @value ) {
	-webkit-align-items: @value; // Safari 7.0-
	align-items: @value;
}

.position-sticky() {
	position: -webkit-sticky;
	position: sticky;
}

/*******************************************************************************
***************************** Other styling mixins *****************************
*******************************************************************************/
/* Maybe intended for internal use, but they can be used in custom LESS too. */

/* the dropdown/sidebar links where a side border appears on hover */
.mixin-pretty-anchor( @active: false, @font-color: auto, @active-background-color: initial, @border-side: horizontal ) {
	padding-top: 0.2em;
	padding-bottom: 0.2em;

	& when not ( @font-color = auto ) {
		color: @font-color;
	}

	& when not ( @border-side = vertical ) {
		padding-left: 1em;
		padding-right: 1em;
		border-left: @pretty-anchor-border-width solid transparent;
		border-right: @pretty-anchor-border-width solid transparent; /* border-right for symmetry */
	}
	& when ( @border-side = vertical ) {
		padding-left: 0.1em;
		padding-right: 0.1em;
		border-top: @pretty-anchor-border-width solid transparent;
		border-bottom: @pretty-anchor-border-width solid transparent; /* border-bottom for symmetry */
		margin-right: @pretty-anchor-border-width;
	}
	text-decoration: none;

	&:focus,
	&:hover,
	&:active,
	&.selected {
		/* use currentColorÂ not @font-color because, for example,
		if @font-color = auto, then setting border-color to @font-color would set
		border-color to auto... that is, border-color would be the auto value for
		border-color, not the auto value for color */
		& when not ( @border-side = vertical ) {
			border-left-color: currentColor;
		}
		& when ( @border-side = vertical ) {
			border-bottom-color: currentColor;
		}
	}

	&:active {
		background-color: @active-background-color;
	}

	& when ( @active = true ) {
		& when not ( @border-side = vertical ) {
			border-left-color: currentColor;
		}
		& when ( @border-side = vertical ) {
			border-bottom-color: currentColor;
		}
		background-color: @active-background-color;
	}

	.refreshed-icon {
		vertical-align: middle;
	}
}

/* box shadow for header, content, dropdowns, etc. */
.mixin-stack-box-shadow() {
	box-shadow: 0 3px 9px 0 @content-shadow-color;
}

/* make styles exclusive to the big, medium, or small layouts */
.mixin-big-layout-styles( @rules ) {
	@media screen and ( min-width: @big-layout-min-width ) {
		@rules();
	}
}
.mixin-medium-layout-styles( @rules ) {
	@media screen and ( min-width: @medium-layout-min-width ) and ( max-width: @medium-layout-max-width ) {
		@rules();
	}
}
.mixin-small-layout-styles( @rules ) {
	@media screen and ( max-width: @small-layout-max-width ) {
		@rules();
	}
}

/*******************************************************************************
**************************** Standard config mixins ****************************
*******************************************************************************/
/* Mixins used for basic configuration in the LESS template. */

/* Set the height of the header */
.mixin-set-header-height( @height ) {

	#header-wrapper,
	.refreshed-logo-sidebar-current,
	#site-navigation-sidebar-collapsible-button {
		height: @height;
	}

	#explore-header-categories-dropdowns {
		margin-top: -( @height );
	}

	#content-footer-wrapper {
		margin-top: @height;
	}

	#refreshed-toolbox {
		top: @height;
	}

	/* If we use an inline sidebar, we'll eventually only want #sidebar-wrapper
	to have the margin-top so the sidebar is below the header.
	If we use a menu sidebar, we'll eventually only want #sidebar to have the
	margin-top so the takes up the viewport's whole height when it opens. */
	#sidebar-wrapper,
	#sidebar, {
		margin-top: @height;
	}

	.header-button-textless {
		width: @height;
	}

	/* When you click a section link (for example, when you click a link in th
	table of contents), ensure the headline that you jump to isn't blocked by
	the header.
	Note these properties are adjusted with JS to account for the toolbox if it's
	set to sticky. */
	.mw-headline {
		padding-top: @height;
		margin-top: -@height;
	}

	.mixin-helper-resize-header-icons( @height / 2 );
}

/* Set the width of the sidebar */
.mixin-set-sidebar-width-big-layout( @width ) {
	.mixin-helper-set-sidebar-width-inline( @width );
}

/* Set the width of the sidebar */
.mixin-set-sidebar-width-medium-layout( @width ) {
	.mixin-helper-set-sidebar-width-menu( @width );
}

/* Set the width of the sidebar */
.mixin-set-sidebar-width-small-layout( @width ) {
	.mixin-helper-set-sidebar-width-menu( @width );
}

/* apply @rules to the buttons in the header and the site navigation buttons
in the sidebar, as well as the "collapsible buttons" (useful for
blanket-applying styles to a bunch of different buttons) */
.mixin-set-header-button-styles( @rules ) {
	.header-button {
		@rules();
	}
}
.mixin-set-header-button-styles-focus( @rules ) {
	.refreshed-dropdown-checkbox:focus ~ .header-button.refreshed-dropdown-button,
	.refreshed-collapsible-checkbox:focus ~ .header-button.refreshed-collapsible-button,
	#sidebar-toggler-checkbox:focus ~ #header-wrapper #sidebar-toggler-button {
		@rules();
	}
}
.mixin-set-header-button-styles-hover( @rules ) {
	.header-button:hover {
		@rules();
	}
}
.mixin-set-header-button-styles-active( @rules ) {
	.header-button:active,
	.refreshed-dropdown-checkbox:checked ~ .header-button.refreshed-dropdown-button,
	.refreshed-collapsible-checkbox:checked ~ .header-button.refreshed-collapsible-button,
	#sidebar-toggler-checkbox:checked ~ #header-wrapper #sidebar-toggler-button{
		@rules();
	}
}

/* "sidebar buttons" (the buttons for the header categories that are in the
sidebar in the small layout) */
.mixin-set-sidebar-button-styles( @rules ) {
	.sidebar-button {
		@rules();
	}
}
.mixin-set-sidebar-button-styles-focus( @rules ) {
	.refreshed-collapsible-checkbox:focus ~ .sidebar-button.refreshed-collapsible-button {
		@rules();
	}
}
.mixin-set-sidebar-button-styles-hover( @rules ) {
	.sidebar-button:hover {
		@rules();
	}
}
.mixin-set-sidebar-button-styles-active( @rules ) {
	.sidebar-button:active,
	.refreshed-collapsible-checkbox:checked ~ .sidebar-button.refreshed-collapsible-button {
		@rules();
	}
}

/* make the toolbox stick to the top as you scroll down the page */
.mixin-use-refreshed-toolbox-sticky( @background-color ) {
	/* position: sticky is assigned with JS, since if JS is disabled we don't
	want the sticky behavior (we only want it if we can tell whether or not
	the element is stuck, which we need JS for) */

	.refreshed-toolbox-sticky {
		.position-sticky();
	}

	.refreshed-toolbox-stuck {
		background-color: @background-color;
		padding-left: @content-wrapper-padding;
		padding-right: @content-wrapper-padding;
		margin: 0 -( @content-wrapper-padding );
		.mixin-stack-box-shadow();
	}
}

/* disable the toolbox sticky effect (so don't use the styles from
.mixin-use-refreshed-toolbox-stick) */
.mixin-disable-refreshed-toolbox-sticky() {
	.refreshed-toolbox-sticky {
		position: static;
	}

	.refreshed-toolbox-stuck {
		background-color: inherit;
		padding-left: inherit;
		padding-right: inherit;
		margin: inherit;
		box-shadow: none;
	}
}

/* link colors of toolbox, dropdowns, catlinks */
.mixin-set-refreshed-link-colors( @link-color, @link-color-new ) {
	@link-color-escaped: escape('@{link-color}');

	.refreshed-dropdown-tray a,
	#refreshed-toolbox a,
	.catlinks a {
		color: @link-color;
	}

	.refreshed-dropdown-tray li.new a,
	#refreshed-toolbox .new a,
	.catlinks a.new {
		color: @link-color-new;
	}

	[dir = ltr] {
		#ca-watch,
		#ca-unwatch {
			.loading,
			a:hover {
				/* ooui-icon-halfStar-ltr */
				background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='@{link-color-escaped}'%3E%3Cpath d='M20 7h-7L10 .5 7 7H0l5.46 5.47-1.64 7 6.18-3.7 6.18 3.73-1.63-7zm-10 6.9V4.6l1.9 3.9h4.6l-3.73 3.4 1 4.28z'/%3E%3C/svg%3E" );
			}
		}
	}

	[dir = rtl] {
		#ca-watch,
		#ca-unwatch {
			.loading,
			a:hover {
				/* ooui-icon-halfStar-rtl */
				background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='@{link-color-escaped}'%3E%3Cpath d='M5.4 12.5l-1.6 7 6.2-3.7 6.2 3.7-1.6-7L20 7h-7L10 .5 7 7H0l5.4 5.5zm.8 3.7l1-4.3-3.7-3.4h4.6L10 4.6v9.3l-3.8 2.3z'/%3E%3C/svg%3E" );
			}
		}
	}

	#ca-unwatch a {
		/* ooui-icon-unStar */
		background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='@{link-color-escaped}'%3E%3Cpath d='M20 7h-7L10 .5 7 7H0l5.46 5.47-1.64 7 6.18-3.7 6.18 3.73-1.63-7z'/%3E%3C/svg%3E%0A" );
	}

	#ca-watch a {
		/* ooui-icon-star */
		background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='@{link-color-escaped}'%3E%3Cpath d='M20 7h-7L10 .5 7 7H0l5.46 5.47-1.64 7 6.18-3.7 6.18 3.73-1.63-7zm-10 6.9l-3.76 2.27 1-4.28L3.5 8.5h4.61L10 4.6l1.9 3.9h4.6l-3.73 3.4 1 4.28z'/%3E%3C/svg%3E" );
	}

	[dir = ltr] #mw-normal-catlinks::before {
		/* ooui-icon-tag-ltr */
		background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='@{link-color-escaped}'%3E%3Cpath d='M18.72 11L9 1.28A1 1 0 0 0 8.35 1H2a1 1 0 0 0-1 1v6.35a1 1 0 0 0 .28.65L11 18.72a1 1 0 0 0 1.37 0l6.38-6.38a1 1 0 0 0-.03-1.34zM5 7a2 2 0 1 1 2-2 2 2 0 0 1-2 2z'/%3E%3C/svg%3E" );
	}

	[dir = rtl] #mw-normal-catlinks::before {
		/* ooui-icon-tag-rtl */
		background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='@{link-color-escaped}'%3E%3Cpath d='M1.2 12.3l6.4 6.4c.4.4 1 .4 1.4 0L18.7 9c.2-.2.3-.4.3-.6V2c0-.6-.4-1-1-1h-6.4c-.2 0-.5.1-.6.3L1.3 11c-.4.4-.4 1-.1 1.3zM13 5c0-1.1.9-2 2-2s2 .9 2 2-.9 2-2 2-2-.9-2-2z'/%3E%3C/svg%3E" );
	}
}

/* toolbox dropdown button styles */
.mixin-set-toolbox-dropdown-button-styles( @rules ) {
	#toolbox-dropdown-button {
		@rules();
	}
}
.mixin-set-toolbox-dropdown-button-styles-focus( @rules ) {
	#toolbox-dropdown-checkbox:focus ~ #refreshed-toolbox #toolbox-dropdown-button {
		@rules();
	}
}
.mixin-set-toolbox-dropdown-button-styles-hover( @rules ) {
	#toolbox-dropdown-button:hover {
		@rules();
	}
}
.mixin-set-toolbox-dropdown-button-styles-active( @rules ) {
	#toolbox-dropdown-checkbox:checked ~ #refreshed-toolbox #toolbox-dropdown-button {
		@rules();
	}
}

/* customize the dropdown tray background color, active background color (the
background color that links in the dropdown have when you click on them)
and font color for text (not anchors) */
.mixin-set-dropdown-tray-colors( @background-color, @active-background-color, @font-color ) {
	.refreshed-dropdown-triangle::after {
		border-bottom-color: @background-color;
	}

	.refreshed-dropdown-tray {
		background-color: @background-color;
		color: @font-color;

		a {
			.mixin-pretty-anchor( @active-background-color: @active-background-color );
		}
	}

	.refreshed-dropdown-checkbox:checked ~ .refreshed-dropdown-button .explore-submenu-dropdown-anchor {
		.mixin-pretty-anchor( @active: true, @active-background-color: @active-background-color );
	}
}

/* set how far away the page content is from the edge of the viewport
on the side opposite the one the sidebar is on */
.mixin-set-content-margin-sidebar-opposite-side( @margin ) {
	#content-footer-wrapper {
		margin-right: @margin;
	}
	.refreshed-toolbox-stuck {
		right: @margin;
	}

	#user-info-search-wrapper {
		margin-right: @margin;
	}
}

/*******************************************************************************
********************************* Helper mixins ********************************
*******************************************************************************/
/* These helper mixins were written to be called by other mixins in this file.
They may not be of much help if they're used directly in custom LESS. */

/* adjust size of header icons */
.mixin-helper-resize-header-icons( @width ) {
	.refreshed-icon-refreshed-menu,
	.refreshed-icon-search,
	.refreshed-icon-refreshed-explore {
		width: @width;
		height: auto;
	}
}

/* adjust width of sidebar when it's set to be always open */
.mixin-helper-set-sidebar-width-inline( @width ) {
	#sidebar-wrapper {
		width: @width;
	}

	#content-footer-wrapper {
		margin-left: @width;
	}

	.mixin-helper-set-site-navigation-max-width-inline( @width );
	.mixin-helper-set-content-margin-sidebar-side( @width );
}

/* adjust width of sidebar when it's triggered by pressing a button */
.mixin-helper-set-sidebar-width-menu( @width ) {
	#sidebar-wrapper {
		width: @width;
		transform: translateX(-100%);
	}

	.mixin-helper-set-site-navigation-max-width-menu();
}

/* set how far away the page content is from the edge of the viewport
on the side the sidebar is on */
.mixin-helper-set-content-margin-sidebar-side( @margin ) {
	#content-footer-wrapper {
		margin-left: @margin;
	}
	.refreshed-toolbox-stuck {
		left: @margin;
	}
}

/* Helper mixin: Set the max-width of wiki logos in the site navigation
dropdowns. */
/* when the sidebar is inline, the site navigation should be the same width
as the sidebar */
.mixin-helper-set-site-navigation-max-width-inline( @sidebar-width ) {
	.single-wiki .refreshed-logo-current,
	.refreshed-logo-other .site-navigation-logo-img,
	.refreshed-logo-other .site-navigation-logo-text {
		width: @sidebar-width;
		max-width: @sidebar-width;
	}

	.multiple-wikis .refreshed-logo-current {
		width: @sidebar-width - @site-navigation-toggle-width;
		max-width: @sidebar-width - @site-navigation-toggle-width;
	}

	#site-navigation-header-dropdown-tray {
		min-width: @sidebar-width;
	}
}
/* when the sidebar is in a menu, the site navigation should be as wide as the
default given width */
.mixin-helper-set-site-navigation-max-width-menu( @width: @default-site-navigation-max-width ) {
	.single-wiki .refreshed-logo-current,
	.refreshed-logo-other .site-navigation-logo-img,
	.refreshed-logo-other .site-navigation-logo-text {
		max-width: @width;
	}

	.multiple-wikis .refreshed-logo-current {
		max-width: @width - @site-navigation-toggle-width;
	}

	#site-navigation-header-dropdown-tray {
		min-width: @width;
	}
}
