@import "theme";

.btn
{
	font-family: $display-font;
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 0.5px;
	padding: 12px 22px;
	border-radius: 12px;
	border: 2px solid rgba( 0, 0, 0, 0.25 );
	background-color: $surface-mid;
	color: $text-default;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	box-shadow:
		0px 4px 0px rgba( 0, 0, 0, 0.35 ),
		0px 6px 14px rgba( 0, 0, 0, 0.35 );
	transition: all 0.12s ease-out;
}

.btn:hover
{
	transform: translateY( -2px );
	box-shadow:
		0px 6px 0px rgba( 0, 0, 0, 0.4 ),
		0px 10px 18px rgba( 0, 0, 0, 0.45 );
}

.btn:active
{
	transform: translateY( 2px );
	box-shadow:
		0px 1px 0px rgba( 0, 0, 0, 0.35 ),
		0px 2px 6px rgba( 0, 0, 0, 0.3 );
}

.btn.disabled
{
	opacity: 0.4;
	pointer-events: none;
	transform: none;
}

// Primary - positive, headline action
.btn-primary
{
	background-color: $accent-green;
	color: $text-on-green;
}

.btn-primary:hover
{
	background-color: #82e891;
	box-shadow:
		0px 6px 0px rgba( 0, 0, 0, 0.4 ),
		0px 10px 22px rgba( 107, 221, 126, 0.55 );
}

// Secondary - neutral / utility
.btn-secondary
{
	background-color: $surface-light;
	color: $text-default;
}

.btn-secondary:hover
{
	background-color: $surface-hover;
}

// Danger - destructive
.btn-danger
{
	background-color: $accent-red;
	color: white;
}

.btn-danger:hover
{
	background-color: #ff7a93;
	box-shadow:
		0px 6px 0px rgba( 0, 0, 0, 0.4 ),
		0px 10px 22px rgba( 255, 92, 122, 0.55 );
}

// Size variants
.btn-lg
{
	font-size: 18px;
	padding: 16px 32px;
	border-radius: 14px;
}

.btn-sm
{
	font-size: 13px;
	padding: 8px 14px;
	border-radius: 10px;
}