
/* -----------------------------------------------------------------------------
 *
 * Global Button Resets
 *
 * ----------------------------------------------------------------------------- */

@define-mixin button-global {
	transition: var(--transition);
	width: auto;
	display: inline-block;
	line-height: var(--line-height-even);
	font-weight: var(--font-weight-bold);
	height: auto;
	cursor: pointer;
	text-decoration: none;
	border: 0;
	padding: 0;
}

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

@define-mixin button-submit {
	@mixin button-global;

	background-color: var(--color-black);
	padding: 1em;
	text-align: center;
	color: var(--color-white);

	&:visited {
		color: var(--color-white);
	}

	&:hover,
	&:focus,
	&:active {
		color: var(--color-white);
		background-color: var(--color-grey-dark);
	}
}

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

@define-mixin button-pill {
	background: var(--color-bc-doger-blue);
	border: 1px solid var(--color-bc-doger-blue);
	border-radius: 19px;
	box-sizing: border-box;
	box-shadow: unset;
	cursor: pointer;
	color: var(--color-white);
	display: inline-block;
	padding: 13px 20px 12px;
	font-size: 12px;
	font-weight: var(--font-weight-medium);
	letter-spacing: 1px;
	line-height: 12px;
	text-decoration: none;
	text-shadow: none;
	text-transform: uppercase;
	transition: var(--transition);
	-webkit-appearance: none;
	white-space: nowrap;

	&:hover,
	&:focus,
	&:active {
		background-color: var(--color-bc-blue-turquoise);
		border-color: var(--color-bc-blue-turquoise);
	}

	&:disabled {
		background-color: var(--color-bc-light-grey) !important;
		border-color: var(--color-bc-light-grey) !important;
		color: var(--color-bc-grey) !important;
		cursor: default !important;
	}
}
