// Default button

@mixin button-default {
	@include button($context--button-default);
}

// Button themes

@mixin button-primary {
	@if variable-exists('context--button-primary') {
		@include button-theme($context--button-primary);
	}
}

@mixin button-secondary {
	@if variable-exists('context--button-secondary') {
		@include button-theme($context--button-secondary);
	}
}

@mixin button-tertiary {
	@if variable-exists('context--button-tertiary') {
		@include button-theme($context--button-tertiary);
	}
}

@mixin button-contrast {
	@if variable-exists('context--button-contrast') {
		@include button-theme($context--button-contrast);
	}
}

@mixin button-ghost {
	@if variable-exists('context--button-ghost') {
		@include button-theme($context--button-ghost);
	}
}

@mixin button-disabled {
	@if variable-exists('context--button-disabled') {
		@include button-theme($context--button-disabled);
	}
}

// Button variants

@mixin button-xsmall {
	font-size: $context--button-font-size-xsmall;
	padding: $context--button-padding-xsmall;
}

@mixin button-small {
	font-size: $context--button-font-size-small;
	padding: $context--button-padding-small;
}

@mixin button-large {
	font-size: $context--button-font-size-large;
	padding: $context--button-padding-large;
}

@mixin button-full-width {
	display: flex;
	width: 100%;
}

@mixin button-icon-left {
	svg {
		margin-right: $context--button-icon-margin;
	}
}

@mixin button-icon-right {
	svg {
		margin-left: $context--button-icon-margin;
	}
}

/**
 * Style mixins
 *
 */

// 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: $context--button-font-family;
	font-size: $context--button-font-size-normal;
	line-height: $context--button-line-height;
	justify-content: $context--button-justify-content;
	padding: $context--button-padding;
	transition: $context--button-transition;
	border-radius: $context--button-border-radius;
}

// 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');
	box-shadow: map-get($theme, 'boxShadow');
	font-weight: map-get($theme, 'fontWeight');

	svg {
		fill: currentColor;
	}

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

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

	&:focus {
		border: map-get($theme, 'focusBorder');
		box-shadow: map-get($theme, 'focusBoxShadow');
		outline: map-get($theme, 'focusOutline');
		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');
		}
	}

	@if $theme == $context--button-disabled {
		opacity: map-get($context--button-disabled, 'opacity');
		cursor: default;
	}
}
