// This file must be included together with some javascript to toggle
// the category cells, like this:
//  $('div.wcsformsofcategorycell').delegate('h2', 'click', function() {
//    $(this).parents('div.wcsformsofcategorycell').toggleClass('toggled');
//  });

$category-title-background: white linear-gradient(to right, #A2DEEE 0%, #B8E3EF 100px, white 100px) no-repeat top left !default;
$category-title-height: 100px !default;
$category-toggled-background: #888 !default;
$category-toggled-link-hover-color: white !default;
$category-toggled-title-color: white !default;
$category-toggled-title-background: $category-toggled-background !default;
$category-togglable: true !default;
$category-color: #DF017A !default;
$category-link-color: white !default;
$category-slugs: dechets, famille, logement, papiers, sante, securite, signalements, sport, transport, travail !default;
$category-has-toggled-icons: true !default;

$_category_selector_class: if($category-togglable, 'toggled', 'cell');

.gru-content div.cell.wcsformsofcategorycell {
	border: 2px solid #fafafa;

	h2:first-child {
		color: $category-color;
		text-transform: uppercase;
		background: $category-title-background;
		height: $category-title-height;
		margin: 0;
		padding: 0;
		padding-left: 140px;
		line-height: 170%;
		font-weight: bold;
		font-size: 120%;
		padding-top: 20px;
		cursor: pointer;
		border-bottom: 1px solid white;
		@if $cell-title-cover-border == true {
			top: -2px;
			left: 0;
			width: 100%;
		}

		&::after {
			content: none;
		}
	}

	div.intro {
		display: none;
	}

	&.#{$_category_selector_class} {
		h2:first-child {
			color: $category-toggled-title-color;
			background-color: $category-toggled-title-background;
			background-image: none;
		}

		@if $category-togglable {
		ul {
			display: block;
			background: $category-toggled-background;
			padding: 0 10% 0.7em 10%;

			a {
				color: $category-link-color;
				padding: 1em 0;
				&:hover {
					color: $category-toggled-link-hover-color;
					background: transparent;
					&::after {
						content: none;
					}
				}
			}
		}
		}
	}

	@each $category in $category-slugs {
		@if $category-has-toggled-icons {
			&.#{$category} h2:first-child { background-image: url(img/#{$category}.png), url(img/#{$category}-on.png); }
			&.#{$category}.#{$_category_selector_class} h2:first-child { background-image: url(img/#{$category}-on.png); }
		} @else {
			&.#{$category} h2:first-child { background-image: url(img/#{$category}.png); }
		}
	}

	@if $category-togglable {
		p, ul {
			display: none;
		}
	}
}
