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

@responsive_breakpoint: 780px;
@align: center;
@mobile_align: center;

@button_width: '';
@button_color: #41a9d5;
@border_color: darken(@button_color, 15%);
@text_color: #FFFFFF;
@icon_size: 1.3em;

@hover_background_color: #41a9d5;
@hover_text_color:  #FFFFFF;

@button_font: default;
@button_font_weight: default;
@button_font_style: default;

@font_size: 1em;
@rounding: 0.25em;
@padding: 1em;
@has_text: true;
@has_button_icon: false;

.ow-button-base {

	@media (max-width: @responsive_breakpoint) {
		&.ow-button-align-@{align} {
			text-align: @mobile_align;

			& when not ( @mobile_align = justify ) {
				&.ow-button-align-justify .sowb-button {
					display: inline-block;
				}
			}

			& when ( @mobile_align = justify ) {
				.sowb-button {
					display: block;
				}
			}
		}
	}

	.sowb-button {
		.box-shadow(~"inset 0 1px 0 rgba(255,255,255,0.2), 0 1px 2px rgba(0,0,0,0.065)");
		.box-sizing(border-box);
		.font(@button_font, @button_font_weight);
		.gradient(@button_color, darken(@button_color, 10%), @button_color);
		.rounded(@rounding);
		border-color: lighten(@border_color, 2%) @border_color darken(@border_color, 3%) @border_color;
		border: 1px solid;
		color: @text_color !important;
		font-size: @font_size;
		font-style: @button_font_style;
		padding-block: @padding;
		text-shadow: 0 1px 0 rgba(0,0,0,0.05);

		& when( isnumber( @button_width ) ) {
			width: @button_width;
			max-width: 100%;
		}

		& when ( @has_text = true ) {
			padding-inline: @padding * 2;
		}

		& when not ( @has_text = true ) {
			.sow-icon-image,
			[class^="sow-icon-"] {
				margin: 0;
			}
		}

		& when ( @has_button_icon = true ) {
			& > span {
				display: flex;
				justify-content: center;

				[class^="sow-icon-"] {
					font-size: @icon_size;
				}
			}

			&.ow-icon-placement-top > span {
				flex-direction: column;
			}

			&.ow-icon-placement-right > span {
				flex-direction: row-reverse;
			}

			&.ow-icon-placement-bottom > span {
				flex-direction: column-reverse;
			}

			&.ow-icon-placement-left > span {
				align-items: start;
			}
		}

		&.ow-button-hover:active,
		&.ow-button-hover:hover {
			.gradient(lighten(@hover_background_color, 2%), lighten(darken(@hover_background_color, 10%), 2%), lighten(@hover_background_color, 2%));
			border-color: lighten(lighten(@hover_background_color, 2%), 2%) lighten(@hover_background_color, 2%) darken(lighten(@hover_background_color, 2%), 3%) lighten(@hover_background_color, 2%);
			color: @hover_text_color !important;
		}
	}
}