/**
 * Display styles
 */
.vlBtn, .vlLink{
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	transition: all .3s ease-in-out;
}
.vlBtn{
	border-radius: var(--btn-border-radius);
	justify-content: center; //Only buttons are centered	
}
button.vlBtn, a.vlBtn, a.vlLink{ //i had to go 2 levels deep because of normalize adding outline
	&:focus{
		outline: 0;
		box-shadow: var(--btn-focus-box-shadow);
	}
}
.vlBtn{ 
	padding: var(--btn-padding-y) var(--btn-padding-x);
}
.vlBtnBlock{
	display: flex;
	width: 100%;
}
.vlBtnInline{
	display: inline-flex;
	width: auto;
}

.vlBtn.small{
	font-size: 85%;
	padding: calc(var(--btn-padding-y) - 0.1rem) calc(var(--btn-padding-x) - 0.4rem);
}
.vlBtn.big{
	font-size: 115%;
	padding: calc(var(--btn-padding-y) + 0.2rem) calc(var(--btn-padding-x) + 0.5rem);
}

/**
 * Initial link styles
 */
.vlLink{
	color: var(--primary);
	&:hover{
		color: var(--primary-dark);
	}
}
/**
 * Initial button styles
 */
.vlBtn, a.vlBtn{
	background-color: var(--primary);
	color: #fff;
	user-select: none;
	&:hover{
		background-color: var(--primary-dark);
		color: #fff; //to remain white if it is a link with .vlBtn
	}
}

/**
 * Outlined buttons
 */
.vlBtnOutlined, a.vlBtnOutlined{
	background-color: transparent;
	border: 1px solid var(--primary);
	color: var(--primary);
	&:hover{
		background-color: transparent;
		color: var(--primary-dark);
		border: 1px solid var(--primary-dark);
	}
}

/**
 * Plain buttons
 */
.vlBtnPlain, a.vlBtnPlain{
	background-color: transparent;
	border: 0;
	color: var(--primary);
	&:hover{
		background-color: transparent;
		color: var(--primary-dark);
	}
}

/**
 * Secondary extension - TODO: probably deprecate - unnecessary
 */
.vlLink.vlSecondary{
	color: var(--secondary);
	&:hover{
		color: var(--secondary-dark);
	}
}
.vlBtn.vlSecondary, a.vlBtn.vlSecondary{
	background-color: var(--secondary);
	color: #fff;
	user-select: none;
	&:hover{
		background-color: var(--secondary-dark);
		color: #fff; //to remain white if it is a link with .vlBtn
	}
}
.vlBtnOutlined.vlSecondary, a.vlBtnOutlined.vlSecondary{
	background-color: transparent;
	border: 1px solid var(--secondary);
	color: var(--secondary);
	&:hover{
		background-color: transparent;
		color: var(--secondary-dark);
		border: 1px solid var(--secondary-dark);
	}
}
.vlBtnPlain.vlSecondary, a.vlBtnPlain.vlSecondary{
	background-color: transparent;
	border: 0;
	color: var(--secondary);
	&:hover{
		background-color: transparent;
		color: var(--secondary-dark);
	}
}

/**
 * Link utilities
 */
.vlEditLink{
	label{
		cursor: pointer; //TODO: remove the need for label in Links...
	}
}