/* TOGGLES */

.toggle {
	padding: 0;

	list-style-type: none;
	+ .toggle {
		padding-top: 15px;
	}
	.toggle-content {
		display: none;
		padding: 30px;

		background-color: @tog-bgcolor;
		border: 1px solid @tog-bordercolor;
		-moz-border-radius-bottomright: 3px;
		border-bottom-right-radius: 3px;
		-moz-border-radius-bottomleft: 3px;
		border-bottom-left-radius: 3px;
		> *:last-child {
			margin: 0; // remove any extra margin on the last item for better parent padding
		}
	}
	.toggle-tab {
		.radius;

		padding: 12px 8px;

		font-weight: bold;
		cursor: pointer;

		background-color: @tog-tab-bgcolor;
		border: 1px solid @tog-tab-bordercolor;
		.icon {
			.radius;

			display: inline-block;
			width: 20px;
			height: 20px;
			margin-right: 10px;

			text-align: center;

			border: 1px solid @tog-tab-icon-bordercolor;
			&:before {
				display: block;

				color: @colorP4;

				content: '+';
			}
		}
		&.active {
			-moz-border-radius-bottomright: 0;
			border-bottom-right-radius: 0;
			-moz-border-radius-bottomleft: 0;
			border-bottom-left-radius: 0;
			.icon {
				&:before,
				&::before {
					line-height: 1.25rem;
					cursor: default;

					content: '–';
				}
			}
			+ .toggle-content {
				z-index: 10;

				display: inline-block;
				margin-top: -1px;
			}
		}
	}
}