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

.widget-function('generate_calls_to', .create_social_media_button_style);

.sow-social-media-button {
	.social-media-button-base();
}

.create_social_media_button_style( @name, @icon_color:'', @button_color:'', @icon_color_hover: '', @button_color_hover: '' ) {

	.sow-social-media-button-@{name} {
		border: 1px solid;
		.box-shadow(~"inset 0 1px 0 rgba(255,255,255,0.2), 0 1px 2px rgba(0,0,0,0.065)");
		text-shadow: 0 1px 0 rgba(0,0,0,0.05);

		& when( iscolor( @button_color ) ) {
			@border_color: darken(@button_color, 15%);
			border-color: lighten(@border_color, 2%) @border_color darken(@border_color, 3%) @border_color;
			.gradient(@button_color, darken(@button_color, 10%), @button_color);

			&.ow-button-hover:focus,
			&.ow-button-hover:hover {
				@border_color_hover: darken( @button_color_hover, 15% );
				.gradient( lighten( @button_color_hover, 2% ), lighten( darken( @button_color_hover, 10% ), 2% ), lighten( @button_color_hover, 2% ) );
				border-top: 1px solid lighten( lighten( @border_color_hover, 2%), 2%);
				border-right: 1px solid lighten( @border_color_hover, 2% );
				border-bottom: 1px solid  darken( lighten( @border_color_hover, 2% ), 3% );
				border-left: 1px solid lighten( @border_color_hover, 2% );
			}
		}

		& when( iscolor( @icon_color ) ) {
			color: @icon_color !important;
			&.ow-button-hover {
				&:focus,
				&:hover {
					& when not( iscolor( @icon_color_hover ) ) {
						color: lighten( @icon_color, 2% ) !important;
					}

					& when( iscolor( @icon_color_hover ) ) {
						color: @icon_color_hover !important;
					}
				}
			}
		}
	}
}