//------------------------------------------------------------------------------------------------
// BUTTON
//------------------------------------------------------------------------------------------------

/*
Standard button component.
*/
	

// COMPONENT COLOURS
//------------------------------------------------------------------------------------------------

/*
Easily assign colours to the button component without having to
find/replace variables.
*/

$component-button-color: 'primary' !default;
$component-button-border-color: 'white' !default;


// BLOCK & ELEMENTS
//------------------------------------------------------------------------------------------------

/*
[1] Remove anchor text-decoration (necessary when styling `a`s as buttons).
[2] Font size duplicate of c-text-lead.
[3] Focus styles for when the user tabs onto the button shouldn't be just a
colour change as people with colour blindness may not see it.
*/

.c-button {
	align-items: center;
	background-color: color($component-button-color);
	border-radius: rem($global-border-radius);
	border: rem(2px) solid transparent;
	color: get-theme-text-color($component-button-color);
	cursor: pointer;
	display: inline-flex;
	font-family: inherit;
	font-size: rem(18px); /* [2] */
	font-weight: bold;
	justify-content: center;
	line-height: 2;
	padding: 0 rem(20px);
	text-decoration: none; /* [1] */
	position: relative;
	transition: box-shadow $global-transition-duration, background-color $global-transition-duration, border-color $global-transition-duration, color $global-transition-duration;
	min-height: rem(50px);
	min-width: rem(50px);

	&:hover {
		background-color: color('#{$component-button-color}-dark');
	}

	&:hover,
	&:active,
	&:focus {
		text-decoration: none; /* [1] */
		outline: none;
	}

	&:focus {
		background-color: color('#{$component-button-color}-dark');
		box-shadow: 0 rem(1px) rem(3px) rgba(0,0,0, 0.25), 0 0 rem(15px) rem(3px) rgba(color($component-button-color), 0.5) /* [3] */
	}
}

@include mq(md) {
	.c-button {
		font-size: rem(22px); /* [2] */
	}
}


// SIZE MODIFIERS
//------------------------------------------------------------------------------------------------

.c-button--micro {
	font-size: rem(14px);
	line-height: 1;
	min-height: rem(22px);
	height: rem(22px);
	min-width: rem(22px);
	padding-left: rem(6px);
	padding-right: rem(6px);
	font-weight: $global-body-weight;
}

.c-button--tiny {
	font-size: rem(14px);
	line-height: 1;
	min-height: rem(28px);
	height: rem(28px);
	min-width: rem(28px);
	padding-left: rem(6px);
	padding-right: rem(6px);
	font-weight: $global-body-weight;
}

.c-button--tiny.c-button--secondary, {
	border-width: rem(1px);
}

.c-button--small {
	font-size: 1rem;
	min-height: rem(35px);
	height: rem(35px);
	min-width: rem(35px);
	padding-left: rem(10px);
	padding-right: rem(10px);
	font-weight: $global-body-weight;
}

.c-button--small.c-button--secondary {
	border-width: rem(1px);
}

.c-button--large {
	font-size: 24px;
	padding: 0 30px;
}

@include mq(md) {
	.c-button--large {
		font-size: 28px;
		min-height: rem(60px);
		min-width: rem(60px);
		height: rem(60px);
	}
}


// COLOUR MODIFIERS
//------------------------------------------------------------------------------------------------

/*
For regular buttons or buttons that identify as a secondary actions.
*/

.c-button--secondary {
	background: transparent;
	border-color: color($component-button-color);
	color: color('darker');
	&:hover {
		background-color: color('#{$component-button-color}-light');
	}
	&:focus {
		background-color: color('#{$component-button-color}-light');
		color: color('darker');
	}
}

/*
For buttons on dark backgrounds. Basically, turns it white.
*/

.c-button--invert {
	background-color: color('white');
	color: color($component-button-color);
	&:hover {
		background-color: color('very-light-dark');
	}
	&:focus {
		background-color: color('white');
		box-shadow: 0 rem(1px) rem(3px) rgba(0,0,0, 0.25), 0 0 rem(15px) rem(3px) rgba(color('white'), 0.5) /* [3] */
	}
}

.c-button--invert.c-button--secondary {
	background-color: transparent;
	border-color: color('white');
	color: color('white');
	&:hover {
		background-color: rgba(color('white'), 0.2);
	}
	&:focus {
		background-color: rgba(color('white'), 0.2);
		box-shadow: 0 rem(1px) rem(3px) rgba(0,0,0, 0.25), 0 0 rem(15px) rem(3px) rgba(color('white'), 0.5) /* [3] */
	}
}


// PADDING MODIFIERS
//------------------------------------------------------------------------------------------------

/*
Removes horizontal padding
*/

.c-button--slim {
	padding-left: 0;
	padding-right: 0;
}


// BORDER MODIFIER
//------------------------------------------------------------------------------------------------

/*
Adds a border around the button, to be used mainly with a standard green
button when on darker backgrounds, when the invert modifier isn't suitable.
*/

.c-button--border {
	border: rem(2px) solid color($component-button-border-color);
	&:focus {
		box-shadow: 0 rem(1px) rem(3px) rgba(0,0,0, 0.25), 0 0 rem(15px) rem(3px) rgba(color('white'), 0.5) /* [3] */
	}
}

.c-button--border.c-button--small,
.c-button--border.c-button--tiny {
	border-width: rem(1px);
}


// BUTTON ICON
//------------------------------------------------------------------------------------------------

/*
Styles for optional nested icon.

[1] Icon should be the same colour as the button text if inline SVG.
[2] Icon size is relative to text size.
*/

.c-button__icon {
	fill: currentColor; /* [1] */
	height: 1em; /* [2] */
	line-height: inherit;
	width: 1em; /* [2] */
}

.c-button__icon--left {
	margin-right: 0.4em;
}

.c-button__icon--right {
	margin-left: 0.4em;
}

/*
Size modifiers
*/

.c-button__icon--tiny {
	width: 0.5em;
	height: 0.5em;
}

.c-button__icon--small {
	width: 0.75em;
	height: 0.75em;
}

.c-button__icon--large {
	width: 1.25em;
	height: 1.25em;
}

.c-button__icon--huge {
	width: 1.5em;
	height: 1.5em;
}


// BUTTON COVER
//------------------------------------------------------------------------------------------------

/*
Cover element allows you to overlay content over a button. One use case
could be to replace button text with a loading icon.

[1] Move any elements in the cover up by a pixel for better visual balance
*/

.c-button__cover {
	background-color: inherit;
	display: flex;
	justify-content: center;
	align-items: center;
	* { /* [1] */
		position: relative;
		top: rem(-1px);
	}
}


// STATE MODIFIERS
//------------------------------------------------------------------------------------------------

.c-button.is-disabled,
.is-disabled .c-button:not(.c-button--disable-state-inheritance),
*[disabled] .c-button:not(.c-button--disable-state-inheritance) {
	&,
	&:hover,
	&:active,
	&:focus {
		background-color: color('disabled');
		border-color: color('disabled');
		color: color('white');
		cursor: not-allowed;
		pointer-events: none;
	}

	&:focus {
		box-shadow: 0 rem(1px) rem(3px) rgba(0,0,0, 0.25), 0 0 rem(15px) rem(3px) rgba(color('disabled'), 0.5);
	}
}

@each $state in ('positive', 'negative', 'caution', 'info') {

	.c-button.is-#{$state} {
		background-color: color('#{$state}');
		border-color: color('#{$state}');
		color: color('white');

		&:hover {
			background-color: color('#{$state}-dark');
			border-color: color('#{$state}-dark');
		}

		&:focus {
			box-shadow: 0 rem(1px) rem(3px) rgba(0,0,0, 0.25), 0 0 rem(15px) rem(3px) rgba(color('#{$state}'), 0.5);
		}
	}

	.c-button.c-button--border.is-#{$state},
	.c-button.c-button--border.is-#{$state}:hover {
		border-color: color($component-button-border-color);
	}

	.c-button--secondary.is-#{$state} {
		background-color: transparent;
		border-color: color($state);
		color: color('darker');
		&:hover,
		&:focus {
			background-color: color('#{$state}-light');
			border-color: color($state);
		}
	}

	.c-button--invert.is-#{$state} {
		background-color: color('white');
		border-color: color('white');
		color: color($state);
		&:hover {
			background-color: color('very-light-dark');
			border-color: color('very-light-dark');
		}
	}

	.c-button--invert.c-button--secondary.is-#{$state} {
		background: transparent;
		border-color: color($state);
		color: color($state);
		&:hover,
		&:focus {
			background-color: rgba(color('#{$state}-light'), 0.2);
		}
	}
}


/* Modifier for loading state */
.c-button__cover--loader {
	opacity: 0;
	transition: opacity $global-transition-duration;
}

.c-button.is-loading,
.is-loading .c-button:not(.c-button--disable-state-inheritance) {
	.c-button__cover--loader {
		opacity: 1;
		pointer-events: none;
		cursor: wait;
	}
}


// BUTTON GROUP
//------------------------------------------------------------------------------------------------

/*
Wrapper for a group of button elements which joins them visually into one element.
*/

.c-button-group {
	display: inline-flex;
	input[type='radio'] {
		display: none;
	}

	.c-button {
		&.is-active {
			background-color: color('#{$component-button-color}-dark');
			border-color: color('#{$component-button-color}-dark');
			z-index: 1;
		}
		&:not(:first-child):not(:last-child) {
			border-radius: 0;
		}
		&:not(:last-child) {
			border-right-width: 0;
		}
		&:first-child {
			border-top-right-radius: 0;
			border-bottom-right-radius: 0;
		}
		&:last-child {
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;
		}
	}
}

.c-button-group .c-button--secondary {
	position: relative;
	&.is-active {
		color: get-theme-text-color($component-button-color);
		border-color: color('#{$component-button-color}-dark');
	}
}

.c-button--invert.is-active {
	background-color: color($component-button-color);
	color: get-theme-text-color($component-button-color);
	border-color: color($component-button-color);
}

.c-button--border.is-active {
	border-color: color('white');
}

.c-button--invert.c-button--secondary.is-active:hover {
	&:hover,
	&:focus {
		background-color: color($component-button-color);
	}
}