/*
|--------------------------------------------------------------------------
| FoodFlow Button
|--------------------------------------------------------------------------
*/

.uff-button{

	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:var(--uff-space-2);

	height:var(--uff-button-height-md);

	padding:0 var(--uff-space-5);

	border:1px solid transparent;
	border-radius:var(--uff-radius-md);

	cursor:pointer;

	font-family:var(--uff-font-body);
	font-size:var(--uff-text-sm);
	font-weight:var(--uff-font-semibold);

	text-decoration:none;
	white-space:nowrap;

	transition:background var(--uff-transition-fast),border-color var(--uff-transition-fast),color var(--uff-transition-fast),transform var(--uff-transition-fast),box-shadow var(--uff-transition-fast);

}

.uff-button:hover{

	transform:translateY(-1px);

}

.uff-button:disabled{

	opacity:var(--uff-opacity-disabled);
	cursor:not-allowed;

}

/* PRIMARY */

.uff-button--primary{

	background:var(--uff-color-primary);
	color:var(--uff-color-on-primary);

}

.uff-button--primary:hover{

	background:var(--uff-color-primary-hover);

}

/* SECONDARY */

.uff-button--secondary{

	background:var(--uff-color-surface-muted);
	color:var(--uff-color-primary);

}

/* SUCCESS */

.uff-button--success{

	background:var(--uff-color-success);
	color:var(--uff-color-on-primary);

}

/* DANGER */

.uff-button--danger{

	background:var(--uff-color-danger);
	color:var(--uff-color-on-primary);

}

/* OUTLINE */

.uff-button--outline{

	background:var(--uff-color-surface);
	color:var(--uff-color-primary);

	border:1px solid var(--uff-color-border-strong);

}

.uff-button--outline:hover{

	border-color:var(--uff-color-primary);

}

/* GHOST */

.uff-button--ghost{

	background:transparent;
	color:var(--uff-color-primary);

}

.uff-button--ghost:hover{

	background:var(--uff-color-surface-muted);

}

/* SIZES */

.uff-button--sm{

	height:var(--uff-control-height);
	padding:0 var(--uff-space-4);
	font-size:var(--uff-text-xs);

}

.uff-button--md{

	height:var(--uff-button-height-md);

}

.uff-button--lg{

	height:var(--uff-button-height-lg);
	padding:0 var(--uff-space-7);
	font-size:var(--uff-text-md);

}

.uff-button--block{

	display:flex;
	width:100%;

}

.uff-button__icon{

	display:flex;
	align-items:center;
	font-size:15px;

}