/*!
 * Copyright (c) 2015 - 2020 Molkobain.
 *
 * This file is part of licensed extension.
 *
 * Use of this extension is bound by the license you purchased. A license grants you a non-exclusive and non-transferable right to use and incorporate the item in your personal or commercial projects. There are several licenses available (see https://www.molkobain.com/usage-licenses/ for more informations)
 */

/* Buttons */

/* Variables */
$mhf-button-padding: (
	medium: 0.4rem 0.8rem,
);
$mhf-button-themes: (
	simple: (
		default: (
			color: $mhf-color-white-100,
			background-color: $mhf-color-blue-grey-600,
			border-color: $mhf-color-blue-grey-600,
			hover: (
				background-color: $mhf-color-blue-grey-800,
				border-color: $mhf-color-blue-grey-800,
			),
			active: (
				background-color: $mhf-color-blue-grey-800,
				border-color: $mhf-color-blue-grey-800,
			)
		),
		primary: (
			color: $mhf-color-white-100,
			background-color: $brand-primary,
			border-color: $brand-primary,
			hover: (
				background-color: darken($brand-primary, 5%),
				border-color: darken($brand-primary, 5%),
			),
			active: (
				background-color: darken($brand-primary, 8%),
				border-color: darken($brand-primary, 8%),
			)
		),
		success: (
			color: $mhf-color-white-100,
			background-color: $mhf-color-green-700,
			border-color: $mhf-color-green-700,
			hover: (
				background-color: $mhf-color-green-800,
				border-color: $mhf-color-green-800,
			),
			active: (
				background-color: $mhf-color-green-800,
				border-color: $mhf-color-green-800,
			)
		),
		warning: (
			color: $mhf-color-white-100,
			background-color: $mhf-color-orange-400,
			border-color: $mhf-color-orange-400,
			hover: (
				background-color: $mhf-color-orange-600,
				border-color: $mhf-color-orange-600,
			),
			active: (
				background-color: $mhf-color-orange-600,
				border-color: $mhf-color-orange-600,
			)
		),
		danger: (
			color: $mhf-color-white-100,
			background-color: $mhf-color-red-700,
			border-color: $mhf-color-red-700,
			hover: (
				background-color: $mhf-color-red-800,
				border-color: $mhf-color-red-800,
			),
			active: (
				background-color: $mhf-color-red-800,
				border-color: $mhf-color-red-800,
			)
		),
		disabled: (
			color: $mhf-color-grey-600,
			background-color: $mhf-color-grey-200,
			border-color: $mhf-color-grey-200,
			active: (
				background-color: $mhf-color-grey-200,
				border-color: $mhf-color-grey-200,
			),
			hover: (
				background-color: $mhf-color-grey-200,
				border-color: $mhf-color-grey-200,
			),
		),
	),
	outline: (
		default: (
			background-color: $mhf-color-white-100,
			color: $mhf-color-blue-grey-800,
			border-color: $mhf-color-blue-grey-800,
			hover: (
				background-color: $mhf-color-grey-100,
			),
			active: (
				background-color: darken($mhf-color-grey-100, 3%),
			)
		),
		primary: (
			color: $brand-primary,
			border-color: $brand-primary,
		),
		success: (
			color: $mhf-color-green-800,
			border-color: $mhf-color-green-800,
		),
		warning: (
			color: $mhf-color-orange-600,
			border-color: $mhf-color-orange-600,
		),
		danger: (
			color: $mhf-color-red-700,
			border-color: $mhf-color-red-700,
		),
		hyperlink: (
			color: $mhf-color-blue-500,
			border-color: $mhf-color-blue-500,
		),
		disabled: (
			color: $mhf-color-grey-600,
			border-color: $mhf-color-grey-600,
			background-color: $mhf-color-grey-200,
			hover: (
				background-color: $mhf-color-grey-200,
			),
			active: (
				background-color: $mhf-color-grey-200,
			)
		),
	),
	text: (
		default: (
			color: $mhf-color-blue-grey-800,
			background-color: $mhf-color-transparent,
			border-color: $mhf-color-transparent,
			hover: (
				background-color: $mhf-color-grey-100,
				border-color: $mhf-color-grey-100,
			),
			active: (
				background-color: darken($mhf-color-grey-100, 3%),
				border-color: darken($mhf-color-grey-100, 3%),
			)
		),
		primary: (
			color: $brand-primary,
			hover: (
				color: darken($brand-primary, 5%),
			),
			active: (
				color: darken($brand-primary, 8%),
			)
		),
		success: (
			color: $mhf-color-green-900,
			hover: (
				background-color: $mhf-color-green-100,
				border-color: $mhf-color-green-100,
			),
			active: (
				background-color: $mhf-color-green-200,
				border-color: $mhf-color-green-200,
			)
		),
		warning: (
			color: $mhf-color-orange-600,
			hover: (
				color: $mhf-color-grey-900,
				background-color: $mhf-color-orange-200,
				border-color: $mhf-color-orange-200,
			),
			active: (
				color: $mhf-color-grey-900,
				background-color: $mhf-color-orange-300,
				border-color: $mhf-color-orange-300,
			)
		),
		danger: (
			color: $mhf-color-red-700,
			hover: (
				color: $mhf-color-red-900,
				background-color: $mhf-color-red-100,
				border-color: $mhf-color-red-100,
			),
			active: (
				color: $mhf-color-red-900,
				background-color: $mhf-color-red-200,
				border-color: $mhf-color-red-200,
			)
		),
		hyperlink: (
			color: $mhf-color-blue-500,
			hover: (
				color: $mhf-color-blue-700,
			),
			active: (
				color: $mhf-color-blue-800,
			),
		),
		disabled: (
			color: $mhf-color-grey-600,
			hover: (
				color: $mhf-color-grey-600,
				background-color: $mhf-color-transparent,
				border-color: $mhf-color-transparent,
			),
			active: (
				color: $mhf-color-grey-600,
				background-color: $mhf-color-transparent,
				border-color: $mhf-color-transparent,
			),
		),
	)
);

/* Mixins */
@mixin mhf-button-properties($properties){
	@each $property-name, $property-value in $properties {
		@if ($property-name == 'hover') or ($property-name == 'active') or ($property-name == 'focus') {
			&:#{$property-name} {
				@each $subproperty-name, $subproperty-value in $property-value {
					#{$subproperty-name}: $subproperty-value;
				}
			}
		} @else {
			#{$property-name}: $property-value;
		}
	}
}

/* Classes */
.mhf-button {
	@extend %mhf-reset-box-sizing;
	padding: map_get($mhf-button-padding, medium);
	border: 1px solid transparent;
	@include mhf-border-radius-300;
	cursor: pointer;
	transition-property: color, background-color;
	transition-duration: 0.1s;
	transition-timing-function: linear;

	&:active{
		outline: none;
	}
	&[disabled]{
		cursor: not-allowed;
	}

	&.mhf-button-simple {
		min-width: 2.5rem;
	}
	&.mhf-button-outline {
		font-weight: bold;
	}
	&.mhf-button-text {
		font-weight: bold;
	}

	.mhf-button-icon{
		margin-right: 0.6rem;
	}

	@each $type, $styles in $mhf-button-themes {
		&.mhf-button-#{$type} {
			@each $style, $properties in $styles {
				@if($style == 'default'){
					/* Default style is put in the base button type selector... */
					@include mhf-button-properties($properties);
				}
				@else if($style == 'disabled'){
					&[disabled]{
						/* .. disabled button is a particular style... */
						@include mhf-button-properties($properties);
					}
				}
				@else{
					&.mhf-button-#{$style} {
						/* .. only specific styles have a dedicated class selector */
						@include mhf-button-properties($properties);
					}
				}
			}
		}
	}
}