_style.scss

// Common
$icon-size: 38px !default;

// Colors
$button-bg-primary: #0075a2 !default;
$button-bg-primary-hover: lighten($button-bg-primary, 10%) !default;
$button-text-primary: white !default;
$button-text-primary-hover: $button-text-primary !default;
$button-bg-secundary: #999 !default;
$button-bg-secundary-hover: lighten($button-bg-secundary, 10%) !default;
$button-text-secundary: white !default;
$button-text-secundary-hover: $button-text-secundary !default;

// Shaddow
$button-shadow-x-offset: 1px !default;
$button-shadow-y-offset: 2px !default;
$button-shadow-blur: 1px !default;
$button-shadow-size: 4px !default;
$button-shadow-color: black !default;
$button-shadow-color-opacity: 0.4 !default;

// Padding
$button-default-padding: 0.65rem 1.2rem !default;

$button-small-padding: 0.3rem 0.8rem !default;
$button-large-padding: 1.15rem 3.5rem !default;
$button-huge-padding: 1.65rem 4rem !default;

// Margin
$button-default-margin: 1rem !default;

//Fontsize
$button-default-font-size: 1rem !default;

$button-small-font-size: 0.8rem !default;
$button-large-font-size: 1.5rem !default;
$button-huge-font-size: 2.5rem !default;

// Features
$button-border-radius: 5px !default;

//Border
$button-border-color: black !default;
$button-border-width: 1px !default;

.ui-btn {
	padding: $button-default-padding;
	border-radius: 0;
	font-size: $button-default-font-size;
	line-height: $button-default-font-size;
	display: inline-block;
	position: relative;
	outline: none;
	background: transparent;
	border: none;
	white-space: nowrap;
	text-align: center;
	cursor: pointer;
	text-decoration: none !important;

	&.hoverable {
		&.primary {
			&:hover {
				background: $button-bg-primary-hover;
				color: $button-text-primary-hover;
			}
		}

		&.secundary {
			&:hover {
				background: $button-bg-secundary-hover;
				color: $button-text-secundary-hover;
			}
		}

		&.shadow {
			&:hover {
				box-shadow: $button-shadow-x-offset $button-shadow-y-offset ($button-shadow-size * 2) ($button-shadow-blur * 2) rgba($button-shadow-color, $button-shadow-color-opacity);
			}
		}
	}

	&.shadow {
		transition: box-shadow 0.2s ease-in;
		box-shadow: $button-shadow-x-offset $button-shadow-y-offset $button-shadow-size $button-shadow-blur rgba($button-shadow-color, $button-shadow-color-opacity);
	}

	&.bordered {
		border: $button-border-width solid $button-border-color;
	}

	&.primary {
		background: $button-bg-primary;
		color: $button-text-primary;
	}

	&.secundary {
		background: $button-bg-secundary;
		color: $button-text-secundary;
	}

	&.round-corners {
		border-radius: $button-border-radius;
	}

	&.white {
		color: black;
		background: white;
		box-shadow: $button-shadow-x-offset $button-shadow-y-offset $button-shadow-size $button-shadow-blur rgba($button-shadow-color, $button-shadow-color-opacity), inset 1px 1px 1px -1px rgba(0, 0, 0, 0.6);
	}

	&.black {
		color: white;
		background: black;
	}

	&.circle {
		padding: 0 !important;
		width: $button-default-font-size * 2;
		height: $button-default-font-size * 2;
		border-radius: 100%;

		&.small {
			width: $button-small-font-size * 1.5;
			height: $button-small-font-size * 1.5;
		}

		&.large {
			width: $button-large-font-size * 2;
			height: $button-large-font-size * 2;
		}

		&.huge {
			width: $button-huge-font-size * 2;
			height: $button-huge-font-size * 2;
		}
	}

	&.uppercase {
		text-transform: uppercase;
	}

	&.small {
		font-size: $button-small-font-size;
		line-height: $button-small-font-size;
		padding: $button-small-padding;
	}

	&.large {
		font-size: $button-large-font-size;
		line-height: $button-large-font-size;
		padding: $button-large-padding;
	}

	&.huge {
		font-size: $button-huge-font-size;
		line-height: $button-huge-font-size;
		padding: $button-huge-padding;
	}

	&.disabled {
		cursor: default !important;
		opacity: 0.4;
	}

	&.margin-right {
		margin-right: $button-default-margin;
	}

	&.margin-left {
		margin-left: $button-default-margin;
	}

	&.left-icon {
		// A bit of magic
		@if length($button-default-padding) > 1 {
			padding-left: calc( #{$icon-size} + #{nth($button-default-padding, 1)} );
		}

		@else {
			padding-left: calc( #{$icon-size} + #{$button-default-padding} );
		}

		i {
			@if length($button-default-padding) > 1 {
				left: nth($button-default-padding, 1);
			}

			@else {
				left: $button-default-padding;
			}
		}
	}

	&.right-icon {
		// A bit of magic
		@if length($button-default-padding) > 1 {
			padding-right: calc( #{$icon-size} + #{nth($button-default-padding, 1)} );
		}

		@else {
			padding-right: calc( #{$icon-size} + #{$button-default-padding} );
		}

		i {
			@if length($button-default-padding) > 1 {
				right: nth($button-default-padding, 1);
			}

			@else {
				right: $button-default-padding;
			}
		}
	}

	&.center-icon {
		i {
			left: 50%;
			top: 50%;
			position: absolute;
			transform: translate(-50%, -50%);
		}
	}

	&.right-icon,
	&.left-icon {
		i {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
		}
	}
}