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

/* Header colors */
@header_color: #65707f;
@featured_header_color: lighten(#65707f, 5%);

/* Text Colors */
@header_text_color: #fff;
@featured_header_text_color: #fff;
@feature_text_color: #5f6062;

/* Button colors */
@button_container_color: #e8e8e8;
@button_background_color: #41a9d5;
@featured_button_background_color: lighten( #41a9d5, 5% );
@button_text_color: #FFFFFF;
@featured_button_background_color: lighten(#41a9d5, 5%);
@featured_button_text_color: #FFFFFF;

.ow-pt-columns-atom {
	.clearfix();
	padding-top: 20px;

	.ow-pt-column {
		color: @header_text_color;
		float: left;

		.ow-pt-title {
			.gradient(@header_color, darken(@header_color, 10%), @header_color);
			padding: 20px 0;
			text-align: center;
			text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
			border: 1px solid darken(@header_color, 20%);
			border-bottom: 0;
			.border-radius(5px, 0, 0, 5px);
			.box-shadow(~"inset 0 1px 0 rgba(255,255,255,0.5)");
			font-size: 1.1em;

			.ow-pt-subtitle {
				font-size: 0.9em;
			}
		}

		.ow-pt-details {
			border-color: darken(@header_color, 2%);
			border-right-width: 0;
			border-style: solid;
			border-top-color: darken(@header_color, 20%);
			border-width: 1px;
			.box-shadow(~"inset 0px -15px 25px rgba(0,0,0,0.05)");
			.gradient(lighten(@header_color, 5%), lighten(@header_color, 1%), lighten(@header_color, 5%));
			padding: 15px 25px;
			position: relative;
			text-align: center;

			.ow-pt-price {
				font-size: 2.5em;
				line-height: 1.25em;
				font-weight: 300;
				text-shadow: 0 1px 1px rgba(0,0,0,0.25);
			}
		}

		&.ow-pt-on-sale {

			.ow-pt-price {
				display: inline-block;
				font-size: 1.8em;
				text-decoration: line-through;
			}

			.ow-pt-sale-price {
				display: inline-block;
				font-size: 2.5em;
				font-weight: 300;
				line-height: 1.25em;
				text-shadow: 0 1px 1px rgba( 0, 0, 0, 0.25 );
			}
		}

		.ow-pt-image {
			line-height: 0;

			img {
				display: block;
				max-width: 100%;
				height: auto;
				.rounded(0);
			}
		}

		.ow-pt-features {
			font-size: 0.925em;
			color: @feature_text_color;

			.ow-pt-feature {
				padding: 15px 20px;
				background: #ffffff;

				.sow-feature-icon {
					display: table-cell;
					vertical-align: middle;
					padding-right: 10px;
				}

				.sow-feature-icon + .sow-feature-text {
					display: table-cell;
					vertical-align: middle;
				}

				.gradient(#FFFFFF, #fcfcfc, #FFFFFF);

				&.ow-pt-feature-odd {
					.gradient(#f1f1f1, #eeeeee, #f1f1f1);
				}

				text-shadow: 0 1px 0 #FFFFFF;

				strong {
					font-weight: 500;
				}

				p {
					margin: 0;
				  	display: inline-block;
				}

				[class^="sow-icon-"] {
					display: inline-block;
					margin-right: 0.5em;
				}

				&:last-child {
					border-bottom-width: 0;
				}
			}
		}

		&.ow-pt-even {

			.ow-pt-features .ow-pt-feature {
				.gradient(#f9f9f9, #f6f6f6, #f9f9f9);

				&.ow-pt-feature-odd {
					.gradient(#eeeeee, #ebebeb, #eeeeee);
				}
			}

		}

		&.ow-pt-last {
			.ow-pt-details {
				border-right-width: 1px;
			}

			.ow-pt-features .ow-pt-feature {
				border-right-width: 1px;
			}
		}

		.ow-pt-button {


			display: block;
			padding: 15px;
			text-align: center;
			.gradient( @button_container_color, darken( @button_container_color, 5.5% ), @button_container_color );

			border-top: 1px solid #E0E0E0;
			border-bottom: 1px solid #cfcfcf;

			a.ow-pt-link {
				display: inline-block;
				.rounded(3px);
				font-size: 0.9em;
				padding: 0.675em 1.25em;
				text-decoration: none;
				color: @button_text_color;
				.gradient(@button_background_color, darken(@button_background_color, 10%), @button_background_color);
				border: 1px solid darken(@button_background_color, 20%);
				.box-shadow(~"inset 0 1px 0 rgba(255,255,255,0.25), 0 1px 2px rgba(0,0,0,0.15)");
				text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
				margin: 0;

				&:hover {
					@button_background_color_hover: lighten(@button_background_color, 3%);
					.gradient(@button_background_color_hover, darken(@button_background_color_hover, 10%), @button_background_color_hover);
					border: 1px solid darken(@button_background_color_hover, 20%);
				}
			}

		}

		&.ow-pt-featured {
			color: @featured_header_text_color;
			margin-top: -20px;
			.ow-pt-title {
				border-color: darken(@featured_header_color, 20%);
				.gradient(@featured_header_color, darken(@featured_header_color, 10%), @featured_header_color);
				padding: 30px 0;
			}

			.ow-pt-details {
				border-color: darken(@featured_header_color, 2%);
				border-top-color: darken(@featured_header_color, 20%);
				.gradient(lighten(@featured_header_color, 5%), lighten(@featured_header_color, 1%), lighten(@featured_header_color, 5%));
			}

			.ow-pt-button a.ow-pt-link {
				color: @featured_button_text_color;
				.gradient(@featured_button_background_color, darken(@featured_button_background_color, 10%), @featured_button_background_color);
				border: 1px solid darken(@featured_button_background_color, 20%);

				&:hover {
					@featured_button_background_color_hover: lighten(@featured_button_background_color, 3%);
					.gradient(@featured_button_background_color_hover, darken(@featured_button_background_color_hover, 10%), @featured_button_background_color_hover);
					border: 1px solid darken(@featured_button_background_color_hover, 20%);
				}
			}
		}
	}
}

@media (max-width:680px) {
	.ow-pt-columns-atom {
		padding-top: 0;

		&.sow-equalize-row-heights {
			.ow-pt-title, .ow-pt-details, .ow-pt-image, .ow-pt-features, .ow-pt-button, .ow-pt-feature {
				height: auto !important;
			}
		}

		.ow-pt-column {
			float: none;
			width: auto !important;
			margin-bottom: 20px;

			&.ow-pt-featured {
				margin-top: 0;
			}

			.ow-pt-details {
				border-right-width: 1px;
			}

			.ow-pt-features {
				.ow-pt-feature {
					border-width: 0 1px 1px 1px;
				}
			}
		}
	}
}