/* BUTTONS */
button{
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}
.btn:disabled{
	filter: grayscale(100%);
	opacity: 0.5;
	pointer-events: none;
}
a.btn.filled, button.btn.filled {
	background-color: var(--primary);
	border: 1px solid var(--primary);
	color: var(--on-primary);
	padding: 10px 20px;
	border-radius: 25px;
}
a.btn.text, button.btn.text {
	background-color: transparent;
	color: var(--on-surface-primary);
}
a.btn.text:hover, button.btn.text:hover{
	color: var(--primary-text-hover);
}
a.btn.filled:hover, button.btn.filled:hover{
	background-color: var(--primary-hover);
}
a.btn.outlined, button.btn.outlined{
	background-color: transparent;
	color: var(--on-surface-primary);
	border: 1px solid var(--on-surface-primary);
	padding: 10px 20px;
	border-radius: 25px;
}
a.btn.outlined:hover, button.btn.outlined:hover{
	background-color: var(--surface-variant);
}
.link{
	color: var(--on-surface-primary);
}
.link:hover{
	color: var(--primary-text-hover);
}

.btn-container{
	position: sticky;
	top: 0;
	margin-top: 15px;
	text-align: center;
	margin-bottom: 50px;
	display: grid;
	grid-auto-columns: 1fr;
	grid-auto-flow: column;
	background-color: var(--surface-variant);
	color: var(--on-surface-variant);
	border-radius: 40px;
	transition: all 0.3s ease-in-out;
	z-index: 10;
}
.btn-container.sticked{
	transform: translateY(-3px) scale(0.9);
}
.btn-container .tab{
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 25px 10px;
	border-radius: 40px;
	font-weight: 600;
}
.btn-container .tab:hover{
	background: var(--surface-variant-hover-bg);
}
.btn-container .tab.active{
	background-color: var(--primary);
	color: var(--on-primary);
	border-radius: 40px;
}

/******/