/*------------------------------------------------------------------------------*/
/* Button
/*------------------------------------------------------------------------------*/

button,
[type="button"],
.Button {
	--button-height: var(--input-height);
	--border-color: var(--input-border-color);
	align-items: center;
	background: var(--background-color);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-buttons);
	box-shadow: var(--box-shadow);
	color: var(--color-text);
	cursor: pointer;
	display: inline-flex;
	justify-content: center;
	min-height: var(--button-height);
	padding: .5rem 1.5rem;
	text-decoration: none;
	transition-duration: var(--transition-fast);
}

button:hover,
[type="button"]:hover,
.Button:hover {
	--background-color: var(--background-color-shade-1);
	color: var(--color-text);
}

button:active,
[type="button"]:active,
.Button:active {
	--background-color: var(--background-color-shade-2);
	box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}

[class|="Button"]:focus-visible {
	outline: 5px auto Highlight;
	outline: 5px auto -webkit-focus-ring-color;
}

/*------------------------------------------------------------------------------*/
/* Button Flex
/*------------------------------------------------------------------------------*/

.Button-Flex {
	display: flex;
}

/*------------------------------------------------------------------------------*/
/* Button Primary
/*------------------------------------------------------------------------------*/

.Button-Primary,
.FormSubmit button,
button[type="submit"] {
	--background-color: var(--color-accent);
	--border-color: var(--color-accent);
	border: 0;
	color: var(--color-text-on-accent);
	font-weight: var(--font-heading-weight);
	text-transform: var(--font-heading-transform);

}

.Button-Primary:hover,
.FormSubmit button:hover,
button[type="submit"]:hover {
	--background-color: var(--color-accent-darker);
	--border-color: var(--color-accent-darker);
	color: var(--color-text-on-accent);
}

/*------------------------------------------------------------------------------*/
/* Button Block
/*------------------------------------------------------------------------------*/

.Button-Block {
	width: min(100%, 500px);
}

/*------------------------------------------------------------------------------*/
/* Button Big
/*------------------------------------------------------------------------------*/

.Button-Big,
.BuyForm .AddToCart {
	--button-height: 4.5rem;
	padding: 1rem 3rem;
}

/*------------------------------------------------------------------------------*/
/* Button Small
/*------------------------------------------------------------------------------*/

.Button-Small {
	--button-height: 2rem;
	padding: .2rem 1rem;
}

/*------------------------------------------------------------------------------*/
/* Button Light
/*------------------------------------------------------------------------------*/

.Button-Light {
	--background-color: var(--color-white);
	--border-color: var(--color-white);
	--color-text: var(--color-black);
}

.Button-Light:hover,
.Button-Light:active {
	--background-color: var(--color-white-darker);
	--color-text: var(--color-black);
}

/*------------------------------------------------------------------------------*/
/* Button Dark
/*------------------------------------------------------------------------------*/

.Button-Dark {
	--background-color: var(--color-black);
	--border-color: var(--color-black);
	--color-text: var(--color-white);
}

.Button-Dark:hover,
.Button-Dark:active {
	--background-color: var(--color-black-lighter);
	--color-text: var(--color-white);
}