/* --- Buttons --- */
.sl-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 0 20px;
	border-radius: 12px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	transition: transform .16s ease, background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
	cursor: pointer;
	border: 1px solid transparent;
}

.sl-btn:hover{
	transform: translateY(-1px);
}

.sl-btn:active{
	transform: translateY(0);
}

.sl-btn:focus-visible{
	outline: none;
	box-shadow: 0 0 0 3px rgba(255, 90, 0, .18);
}

/* Primary */
.sl-btn--primary{
	background: var(--sl-orange);
	color: #fff;
	box-shadow: 0 8px 20px rgba(255, 90, 0, .22);
}

.sl-btn--primary:hover{
	background: var(--sl-orange-hover);
}

/* Ghost */
.sl-btn--ghost{
	background: rgba(255,255,255,.06);
	border-color: rgba(255,255,255,.14);
	color: #fff;
	backdrop-filter: blur(3px);
}

.sl-btn--ghost:hover{
	background: rgba(255,255,255,.10);
	border-color: rgba(255,255,255,.20);
}

/* Outline */
.sl-btn--outline{
	background: #fff;
	color: var(--sl-text-dark);
	border-color: rgba(18,21,33,.10);
	box-shadow: 0 8px 18px rgba(18,21,33,.04);
}

.sl-btn--outline:hover{
	background: #fff;
	border-color: rgba(18,21,33,.16);
	box-shadow: 0 12px 24px rgba(18,21,33,.07);
}

/* Arrow modifier */
.sl-btn--arrow{
	gap: 10px;
	padding-right: 14px;
}

.sl-btn__arrow{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 999px;
	background: rgba(18,21,33,.05);
	border: 1px solid rgba(18,21,33,.08);
	font-size: 14px;
	line-height: 1;
	transition: transform .16s ease, background-color .16s ease, border-color .16s ease;
}

.sl-btn--arrow:hover .sl-btn__arrow{
	transform: translateX(2px);
	background: rgba(255, 90, 0, .10);
	border-color: rgba(255, 90, 0, .16);
}

/* Arrow on primary */
.sl-btn--arrow-on-primary .sl-btn__arrow{
	background: rgba(255,255,255,.14);
	border-color: rgba(255,255,255,.18);
	color: #fff;
}

.sl-btn--arrow-on-primary:hover .sl-btn__arrow{
	background: rgba(255,255,255,.20);
	border-color: rgba(255,255,255,.24);
}

/* Responsive */
@media (max-width: 991px){
	.sl-btn{
		min-height: 46px;
		padding: 0 16px;
		font-size: 14px;
	}
}