// Base button styles
// No theme

@mixin button-base {
	align-items: center;
	cursor: pointer;
	display: inline-flex;
	margin: 0;
	position: relative;
	text-decoration: none;
	width: auto;
	font-family: $button--font-family;
	font-size: $button--font-size-normal;
	line-height: $button--line-height;
	justify-content: $button--justify-content;
	padding: $button--padding;
	transition: $button--transition;
}

// Add base button styles
// with optional theme styles on top

@mixin button($theme: false) {
	@include button-base;
	@if $theme {
		@include button-theme($theme);
	}
}

/**
 * Add button theme
 *
 */

@mixin button-theme($theme) {
	color: map-get($theme, 'color');
	background-color: map-get($theme, 'backgroundColor');
	background-image: map-get($theme, 'backgroundImage');
	border: map-get($theme, 'border');

	&:visited {
		color: map-get($theme, 'visitedColor');
	}

	&:hover {
		border: map-get($theme, 'hoverBorder');
		text-decoration: map-get($theme, 'hoverTextDecoration');
	}

	&:focus {
		border: map-get($theme, 'focusBorder');
		text-decoration: map-get($theme, 'focusTextDecoration');
	}

	&:hover,
	&:focus {
		color: map-get($theme, 'hoverColor');
		background-color: map-get($theme, 'hoverBackgroundColor');
		background-image: map-get($theme, 'hoverBackgroundImage');

		svg path {
			fill: map-get($theme, 'hoverColor');
		}
	}
}

/**
 * Disabled Button
 *
 */

@mixin button-disabled {
	@include button-theme($button--disabled);
	opacity: map-get($button--disabled, 'opacity');
	cursor: default;
}