@import "../base/less/mixins";

#siteorigin-widgets-bundle {
	.clearfix();

	margin: 25px -12px 0 -12px;
	position: relative;


	.so-widget-wrap {
		float: left;
		.box-sizing(border-box);
		padding: 0 12px 24px 12px;
		width: 33%;

		&:nth-of-type( 3n + 1 ) {
			clear: both;
		}

		@media screen and (min-width: 1420px) {

			&{
				width: 25%;

				&:nth-of-type( 3n + 1 ) {
					clear: none;
				}

				&:nth-of-type( 4n + 1 ) {
					clear: both;
				}
			}
		}
	}

	.so-widget{
		float: left;
		.box-shadow(~"0 1px 2px rgba(0,0,0,0.05)");
		padding: 0;
		width: 100%;

		background: #F2F2F2;
		border: 1px solid #D9D9D9;
		position: relative;
		overflow: hidden;

		.so-widgets-active-banner {
			position: absolute;
			background: #555555;
			background: rgba(0,0,0,0.75);
			padding: 12px;
			text-align: center;
			top: 0px;
			left: 0px;
			width: 100%;
			font-weight: bold;
			font-size: 13px;
			line-height: 1em;
			color: #FFFFFF;
		}

		img {
			display: block;
			width: 100%;
			height: auto;
			background: #FFFFFF;
			border-bottom: 1px solid #D9D9D9;
		}

		.so-widget-text {

			padding: 20px;

			h4 {
				margin-top: 0;
				color: #777777;
				font-weight: bold;
				font-size: 1.2em;
			}

			p.so-widget-description {
				margin-bottom: 0;
				line-height: 1.35em;
				color: #777777;
				min-height: 2.7em;
			}
		}

		img, &, .so-widget-text, .so-widget-text h4, .so-widget-text p {
			.transition(0.5s);
		}

		/* The Switch - © 2013 Thibaut Courouble - MIT License */

		.switch {
			float: right;
			position: relative;
			display: inline-block;
			vertical-align: top;
			width: 56px;
			height: 20px;
			padding: 3px;
			background-color: white;
			border-radius: 18px;
			box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
			cursor: pointer;
			background-image: -webkit-linear-gradient(top, #eeeeee, white 25px);
			background-image: -moz-linear-gradient(top, #eeeeee, white 25px);
			background-image: -o-linear-gradient(top, #eeeeee, white 25px);
			background-image: linear-gradient(to bottom, #eeeeee, white 25px);

			.switch-input {
				position: absolute;
				top: 0;
				left: 0;
				opacity: 0;
			}

			.switch-label {
				position: relative;
				display: block;
				height: inherit;
				font-size: 10px;
				text-transform: uppercase;
				background: #eceeef;
				border-radius: inherit;
				box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
				-webkit-transition: 0.15s ease-out;
				-moz-transition: 0.15s ease-out;
				-o-transition: 0.15s ease-out;
				transition: 0.15s ease-out;
				-webkit-transition-property: opacity background;
				-moz-transition-property: opacity background;
				-o-transition-property: opacity background;
				transition-property: opacity background;
			}
			.switch-label:before,
			.switch-label:after {
				position: absolute;
				top: 50%;
				margin-top: -.5em;
				line-height: 1;
				-webkit-transition: inherit;
				-moz-transition: inherit;
				-o-transition: inherit;
				transition: inherit;
			}
			.switch-label:before {
				content: attr(data-off);
				right: 11px;
				color: #aaa;
				text-shadow: 0 1px rgba(255, 255, 255, 0.5);
			}
			.switch-label:after {
				content: attr(data-on);
				left: 11px;
				color: white;
				text-shadow: 0 1px rgba(0, 0, 0, 0.2);
				opacity: 0;
			}
			.switch-input:checked ~ .switch-label {
				background: #47a8d8;
				box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
			}
			.switch-input:checked ~ .switch-label:before {
				opacity: 0;
			}
			.switch-input:checked ~ .switch-label:after {
				opacity: 1;
			}

			.switch-handle {
				position: absolute;
				top: 4px;
				left: 4px;
				width: 18px;
				height: 18px;
				background: white;
				border-radius: 10px;
				box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
				background-image: -webkit-linear-gradient(top, white 40%, #f0f0f0);
				background-image: -moz-linear-gradient(top, white 40%, #f0f0f0);
				background-image: -o-linear-gradient(top, white 40%, #f0f0f0);
				background-image: linear-gradient(to bottom, white 40%, #f0f0f0);
				-webkit-transition: left 0.15s ease-out;
				-moz-transition: left 0.15s ease-out;
				-o-transition: left 0.15s ease-out;
				transition: left 0.15s ease-out;
			}
			.switch-handle:before {
				content: '';
				position: absolute;
				top: 50%;
				left: 50%;
				margin: -6px 0 0 -6px;
				width: 12px;
				height: 12px;
				background: #f9f9f9;
				border-radius: 6px;
				box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
				background-image: -webkit-linear-gradient(top, #eeeeee, white);
				background-image: -moz-linear-gradient(top, #eeeeee, white);
				background-image: -o-linear-gradient(top, #eeeeee, white);
				background-image: linear-gradient(to bottom, #eeeeee, white);
			}
			.switch-input:checked ~ .switch-handle {
				left: 40px;
				box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
			}

			.switch-green > .switch-input:checked ~ .switch-label {
				background: #4fb845;
			}
		}

		&.so-widget-is-active {

			img {
				border-bottom: 1px solid #D9D9D9;
			}

			background: #F9F9F9;
			border: 1px solid #C9C9C9;

			.so-widget-text {

				h4 {
					color: #333333;
				}

				p {
					color: #333333;
				}
			}
		}

		&.so-widget-is-inactive {
			img {
				filter: url(filters.svg#grayscale);
				filter: gray;
				-webkit-filter: grayscale(1);
				opacity: 0.7;
			}
		}

	}
}