/**
 * Button component styles.
 *
 * @package DeWitteBrug
 */

.btn-outline {
	position: relative;
	z-index: 1;
	overflow: hidden;
	transition: color 300ms ease;
}

.btn-outline::before {
	content: '';
	position: absolute;
	inset: 0;
	background-color: #8ABEB8;
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform 300ms ease;
	z-index: -1;
}

.btn-outline:hover::before,
.btn-outline:focus::before {
	transform: scaleY(1);
}

.btn-outline:hover,
.btn-outline:focus {
	color: #142456;
	outline: none;
}

.btn-primary {
	position: relative;
	z-index: 1;
	overflow: hidden;
	transition: color 300ms ease;
}

.btn-primary::before {
	content: '';
	position: absolute;
	inset: 0;
	background-color: #0B1515;
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform 300ms ease;
	z-index: -1;
}

.btn-primary:hover::before,
.btn-primary:focus::before {
	transform: scaleY(1);
}

.btn-primary:hover,
.btn-primary:focus {
	color: #8ABEB8;
	outline: none;
}