@charset "UTF-8";

/* ==========================
   VARIABILI GLOBALI
========================== */
:root{
	--cad-font:sans-serif;
	--cad-radius:20px;
	--cad-padding-y:0.5rem;
	--cad-padding-x:1rem;
	--cad-font-size:1rem;
}

/* ==========================
   BOTTONE BASE
========================== */
.CAD_btn{
	display:inline-block;
	cursor:pointer;
	font-family:var(--cad-font);
	font-size:var(--cad-font-size);
	padding:var(--cad-padding-y) var(--cad-padding-x);
	margin:0.5rem;
	border:1px solid transparent;
	border-radius:var(--cad-radius);
	text-align:center;
	white-space:nowrap;
	background:rgb(var(--cad-from,0 122 195));
	color:var(--cad-color,#fff);
	height:var(--cad-height,2.5rem);
	width:var(--cad-width,auto);
}

.CAD_btn:hover{
	background:rgb(var(--cad-to,64 155 210));
	color:var(--cad-hover-color,var(--cad-color));
}

.CAD_btn:active{
	position:relative;
	top:1px;
}

.CAD_btn:disabled{
	background:#ccc;
	color:#666;
	border:1px solid #999;
	cursor:default;
}

/* ==========================
   VARIANTI COLORE
========================== */
.CAD_btn--primary{
	--cad-from:0 122 195;
	--cad-to:64 155 210;
	--cad-color:#fff;
}

.CAD_btn--secondary{
	--cad-from:217 220 225;
	--cad-to:226 229 232;
	--cad-color:#007ac3;
}

.CAD_btn--danger{
	--cad-from:217 220 225;
	--cad-to:226 229 232;
	--cad-color:#d30000;
	border-color:#800000;
}

.CAD_btn--success{
	--cad-from:133 188 32;
	--cad-to:164 205 88;
	--cad-color:#fff;
}

/* ==========================
   OUTLINE
========================== */
.CAD_btn--outline{
	background:transparent;
	border-color:currentColor;
}

/* ==========================
   DIMENSIONI
========================== */
.CAD_btn--mi{
	font-size:0.7rem;
	padding:0.1rem 0.3rem;
	height:1.2rem;
}

.CAD_btn--sm{
	font-size:0.8rem;
	padding:0.3rem 0.6rem;
	height:1.7rem;
}

.CAD_btn--lg{
	font-size:1.2rem;
	padding:0.7rem 1.4rem;
	height:3rem;
}

/* ==========================
   FORME
========================== */
.CAD_btn--round{
	border-radius:50px;
}

.CAD_btn--circle{
	width:4rem;
	height:4rem;
	font-size:2rem;
	border-radius:50%;
}

/* ==========================
   POSIZIONAMENTO
========================== */
.CAD_left{
	float:left;
}

.CAD_right{
	float:right;
}

.CAD_center{
	display:block;
	margin-left:auto;
	margin-right:auto;
}

/* ==========================
   FLEX LAYOUT
========================== */
.CAD_flex{
	display:flex;
}

.CAD_flex--center{
	justify-content:center;
}

.CAD_flex--right{
	justify-content:flex-end;
}

.CAD_flex--between{
	justify-content:space-between;
}
