/**
 * NoNumber Page stylesheet
 *
 * @package         Sliders
 * @version         4.0.7
 *
 * @author          Peter van Westen <peter@nonumber.nl>
 * @link            http://www.nonumber.nl
 * @copyright       Copyright © 2014 NoNumber All Rights Reserved
 * @license         http://www.gnu.org/licenses/gpl-2.0.html GNU/GPL
 */
/*
 * You can override this stylesheet by creating your own in:
 * /templates/[YOUR TEMPLATE]/css/sliders/style.min.css
 */
@import "../../nnframework/less/init.less";
@import "bootstrap.less";

.nn_sliders {
	&.accordion {
		> .accordion-group {
			.transition-duration(.2s);
			.panel-heading {
				padding: 0;
			}
			> .accordion-heading > a.accordion-toggle {
				.transition-duration(.2s);
				&:hover {
					background-color: @grayLighter;
					color: @linkColorHover;
					text-decoration: none;
				}
			}
			&.active > .accordion-heading > a.accordion-toggle {
				background-color: lighten(@grayLighter, 4%);
				color: @linkColor;
			}

			> div > a:focus,
			&.active > div > a:focus {
				outline: none;
				-webkit-box-shadow: inset 0 0 2px rgb(234, 176, 63);
				box-shadow: inset 0 0 2px rgb(234, 176, 63);
			}

			span.nn_sliders-title-inactive {
				display: inherit;
			}
			span.nn_sliders-title-active {
				display: none;
			}
			&.active {
				span.nn_sliders-title-inactive {
					display: none;
				}
				span.nn_sliders-title-active {
					display: inherit;
				}
			}

			> .accordion-body > .accordion-inner {
				padding: 15px;
				overflow-y: hidden !important;
				overflow-x: auto;
				.clearfix();
				& > :first-child {
					margin-top: 0;
				}
				& > :last-child {
					margin-bottom: 0;
				}
				.nn_sliders-title {
					display: none;
				}

			}

			// Class: icon: adds plus/minus icons to the slider titles
			&.icon > .accordion-heading > a.accordion-toggle span.nn_sliders-toggle-inner:before {
				display: inline-block;
				*margin-right: .3em;
				font-family: 'IcoMoon';
				font-style: normal;
				speak: none;
				content: "\2a";
				// float: right; // Use to make the icons display on the right side
			}
			&.icon.active > .accordion-heading > a.accordion-toggle span.nn_sliders-toggle-inner:before {
				content: "\4b";
			}

			// Classes: Normal state + Hover state
			.sliderColor(@name, @color) {
				&.@{name} {
					// Normal state
					border-top: 5px solid #e5e5e5;
					.border-radius(5px 5px 4px 4px);
					border-top-color: lighten(@color, 20%);
					// Hover & Active state
					&:hover,
					&.active {
						border-top-color: @color;
					}
				}
			}

			// Style: blue
			.sliderColor(~'blue', @btnPrimaryBackground);
			.sliderColor(~'primary', @btnPrimaryBackground);

			// Style: info
			.sliderColor(~'info', @btnInfoBackgroundHighlight);

			// Style: green / success
			.sliderColor(~'green', @btnSuccessBackgroundHighlight);
			.sliderColor(~'success', @btnSuccessBackgroundHighlight);

			// Style: orange / warning
			.sliderColor(~'orange', @btnWarningBackgroundHighlight);
			.sliderColor(~'warning', @btnWarningBackgroundHighlight);

			// Style: red / danger
			.sliderColor(~'red', @btnDangerBackgroundHighlight);
			.sliderColor(~'danger', @btnDangerBackgroundHighlight);
			.sliderColor(~'error', @btnDangerBackgroundHighlight);

			// Style: grey / gray
			.sliderColor(~'grey', #808080);
			.sliderColor(~'gray', #808080);
		}

		.nn_sliders-scroll {
			position: relative;
			visibility: hidden;
			padding: 0;
		}
	}
}
