@import 'mixins-public';
@import 'variables';

/*******************************************************************************
***************************** STYLES FOR ALL LAYOUTS ***************************
*******************************************************************************/

body {
	/* background for the page */
	background: value; /* TODO */
	/* font family for the page */
	font-family: value; /* TODO */
}

#header-wrapper,
#sidebar-wrapper,
#footer-wrapper {
	/* font color for the header, sidebar, and footer */
	color: value; /* TODO */
}

#header-wrapper {
	/* background for the header */
	background: value; /* TODO */
}

/* "header buttons" (the buttons in the header, the wiki logo button in the
sidebar in the small layout, and arrow button next to that logo) */
.mixin-set-header-button-styles( {
	/* background for a header button */
	background: value; /* TODO */
	/* font color for a header button */
	color: value; /* TODO */

	span,
	svg,
	img {
		/* opacity for text or icons in a header button */
		opacity: value; /* TODO */
	}
} );
/* :focus styles */
.mixin-set-header-button-styles-focus( {
	/* background for a header button when it's focused */
	background: value; /* TODO */
	/* font color for a header button when it's focused */
	color: value; /* TODO */

	span,
	svg,
	img {
		/* opacity for text or icons in a header button when it's focused */
		opacity: value; /* TODO */
	}
} );
/* :hover styles */
.mixin-set-header-button-styles-hover( {
	/* background for a header button when it's hovered over */
	background: value; /* TODO */
	/* font color for a header button when it's hovered over */
	color: value; /* TODO */

	span,
	svg,
	img {
		/* opacity for text or icons in a header button when it's hovered over */
		opacity: value; /* TODO */
	}
} );
/* :active styles */
.mixin-set-header-button-styles-active( {
	/* background for a header button when it's active */
	background: value; /* TODO */
	/* font color for a header button when it's active */
	color: value; /* TODO */

	span,
	svg,
	img {
		/* opacity for text or icons in a header button when it's active */
		opacity: value; /* TODO */
	}
} );

/* sidebar buttons (the buttons for the header categories that are in the
sidebar in the small layout) */
.mixin-set-sidebar-button-styles( {
	/* background for a sidebar button */
	background: value; /* TODO */
	/* font color for a sidebar button */
	color: value; /* TODO */
	/* opacity for text or icons in a sidebar button */
	opacity: value; /* TODO */
} );
/* :focus styles */
.mixin-set-sidebar-button-styles-focus( {
	/* background for a sidebar button when it's focused */
	background: value; /* TODO */
	/* font color for a sidebar button when it's focused */
	color: value; /* TODO */
	/* opacity for text or icons in a sidebar button when it's focused */
	opacity: value; /* TODO */
} );
/* :hover styles */
.mixin-set-sidebar-button-styles-hover( {
	/* background for a sidebar button when it's hovered over */
	background: value; /* TODO */
	/* font color for a sidebar button when it's hovered over */
	color: value; /* TODO */
	/* opacity for text or icons in a sidebar button when it's hovered over */
	opacity: value; /* TODO */
} );
/* :active styles */
.mixin-set-sidebar-button-styles-active( {
	/* background for a sidebar button when it's active */
	background: value; /* TODO */
	/* font color for a sidebar button when it's active */
	color: value; /* TODO */
	/* opacity for text or icons in a sidebar button when it's active */
	opacity: value; /* TODO */
} );

/* the button that opens the tools dropdown in the toolbox */
.mixin-set-toolbox-dropdown-button-styles({
	/* background for the toolbox dropdown button */
	background: value; /* TODO */
	/* font color for the toolbox dropdown button */
	color: value; /* TODO */
	/* opacity for text or icons in the toolbox dropdown button */
	opacity: value; /* TODO */
});
/* :focus styles */
.mixin-set-toolbox-dropdown-button-styles-focus({
	/* background for the toolbox dropdown button when it's focused */
	background: value; /* TODO */
	/* font color for the toolbox dropdown button when it's focused */
	color: value; /* TODO */
	/* opacity for text or icons in the toolbox dropdown button when it's focused */
	opacity: value; /* TODO */
});
/* :hover styles */
.mixin-set-toolbox-dropdown-button-styles-hover({
	/* background for the toolbox dropdown button when it's hovered over */
	background: value; /* TODO */
	/* font color for the toolbox dropdown button when it's hovered over */
	color: value; /* TODO */
	/* opacity for text or icons in the toolbox dropdown button when it's hovered over */
	opacity: value; /* TODO */
});
/* :active styles */
.mixin-set-toolbox-dropdown-button-styles-active({
	/* background for the toolbox dropdown button when it's active */
	background: value; /* TODO */
	/* font color for the toolbox dropdown button when it's active */
	color: value; /* TODO */
	/* opacity for text or icons in the toolbox dropdown button when it's active */
	opacity: value; /* TODO */
});

/* set the colors of dropdown trays (dropdown trays that are opened by buttons
in the header, and the tray opened by the toolbox dropdown button) */
/* note that @active-background-color is the background-color of links when they
are active (clicked on), and @font-color is the color of non-link text */
.mixin-set-dropdown-tray-colors(
	@background-color: value, /* TODO */
	@active-background-color: value, /* TODO */
	@font-color: value /* TODO */
);

.refreshed-collapsible-tray {
	/* set the colors of collapsible trays (for example, in the small layout, the
	trays in the sidebar) */
	background-color: value; /* TODO */
}

#content-wrapper {
	/* background-color for the page content */
	background-color: value; /* TODO */
	/* font family for the page content */
	font-family: value; /* TODO */
	/* font color for the page content */
	color: value; /* TODO */
}

.firstHeading,
.mw-headline {
	/* font family for headings */
	font-family: value; /* TODO */
	/* font color for headings */
	color: value; /* TODO */
}

/*******************************************************************************
***************************** STYLES FOR BIG LAYOUT ****************************
*******************************************************************************/

.mixin-big-layout-styles( {
	/* height for the header */
	.mixin-set-header-height( @height: value /* TODO */ );

	/* width for the sidebar */
	.mixin-set-sidebar-width-big-layout( @width: value /* TODO */ );

	/* how far away the content is from the edge of the viewport on the side
	opposite the side that the sidebar is on */
	.mixin-set-content-margin-sidebar-opposite-side( @margin: value /* TODO */ );

	/* pick one of the following two mixins, and delete/comment out the other */
	/* make the toolbox stick to the top when you scroll down;
	specify its background-color when stuck */
	.mixin-use-refreshed-toolbox-sticky( @background-color: value /* TODO */ );
	/* do NOT use make the toolbox stick to the top when you scroll down */
	.mixin-disable-refreshed-toolbox-sticky();
} );

/*******************************************************************************
**************************** STYLES FOR MEDIUM LAYOUT **************************
*******************************************************************************/

.mixin-medium-layout-styles( {
	/* height for the header */
	.mixin-set-header-height( @height: value /* TODO */ );

	/* width for the sidebar */
	.mixin-set-sidebar-width-medium-layout( @width: value /* TODO */ );

	#sidebar-wrapper {
		/* background for the sidebar */
		background: value; /* TODO */
		/* font color for the sidebar */
		color: value; /* TODO */
	}

	/* pick one of the following two mixins, and delete/comment out the other */
	/* make the toolbox stick to the top when you scroll down;
	specify its background-color when stuck */
	.mixin-use-refreshed-toolbox-sticky( @background-color: value /* TODO */ );
	/* do NOT use make the toolbox stick to the top when you scroll down */
	.mixin-disable-refreshed-toolbox-sticky();
} );

/*******************************************************************************
**************************** STYLES FOR SMALL LAYOUT ***************************
*******************************************************************************/

.mixin-small-layout-styles( {
	/* height for the header */
	.mixin-set-header-height( @height: value /* TODO */ );

	/* width for the sidebar */
	.mixin-set-sidebar-width-small-layout( @width: value /* TODO */ );

	#sidebar-wrapper {
		/* background for the sidebar */
		background: value; /* TODO */
		/* font color for the sidebar */
		color: value; /* TODO */
	}
} );

/*******************************************************************************
********************************************************************************
*************************** END BASIC CONFIG TEMPLATE **************************
********************************************************************************
*******************************************************************************/
