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

@define-mixin button-global {
	background: transparent;
	border: 0;
	border-radius: 0;
	color: inherit;
	cursor: pointer;
	display: inline-block;
	height: auto;
	outline: none;
	padding: 0;
	text-decoration: none;
	width: auto;

	&:focus,
	&:hover,
	&:active {
		background: transparent;
		color: inherit;
	}
}

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

@define-mixin button-solid {
	@mixin desktop-body-2-bold;
	@mixin button-global;

	border-radius: var(--tec-border-radius-default);
	color: var(--tec-color-background);
	text-align: center;
	transition: var(--tec-transition-background-color);
}

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

@define-mixin button-link {
	@mixin desktop-body-2;
	@mixin button-global;

	background-color: transparent;
	text-align: center;
	text-decoration: underline;
	transition: var(--tec-transition-color);

	&:hover,
	&:focus {
		background-color: transparent;
	}
}

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

@define-mixin button-border {
	@mixin desktop-body-2-bold;
	@mixin button-global;

	background-color: var(--tec-color-background);
	border: 1px solid var(--tec-color-accent-primary);
	border-radius: var(--tec-border-radius-default);
	text-align: center;
	transition: var(--tec-transition);
}

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

@define-mixin button-border-small {
	@mixin desktop-body-3;
	@mixin button-global;

	background-color: var(--tec-color-background);
	border: 1px solid var(--tec-color-border-default);
	border-radius: var(--tec-border-radius-default);
	text-align: center;
	transition: var(--tec-transition-color-border-color);

	&:hover,
	&:focus {
		background-color: var(--tec-color-background);
	}

	&:active {
		border-color: var(--tec-color-border-active);
	}
}

/* -----------------------------------------------------------------------------
 * Button - Icon Border
 * ----------------------------------------------------------------------------- */

@define-mixin button-icon-border {
	align-items: center;
	background-color: var(--tec-color-background);
	border: 1px solid var(--tec-color-border-default);
	display: inline-flex;
	height: 56px;
	justify-content: center;
	transition: none;
	width: 56px;

	&:hover,
	&:focus {
		background-color: var(--tec-color-background);
	}

	&:active {
		border-color: var(--tec-color-border-active);
	}
}