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

@define-mixin button-global {
	border: 0;
	cursor: pointer;
	display: inline-block;
	height: auto;
	padding: 0;
	text-decoration: none;
	width: auto;
}

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

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

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

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

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

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

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

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

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

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

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

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