@import url("../../fonts/material-icons-1_13_9/material-icons.css");
:root{
	--box-bttn:60px;
	--box-bttn-mob:40px;
}

.box_bttn{
	background: linear-gradient(to bottom, rgb(255,255,255),rgb(230,230,230));
	border: 1px solid #ddd;
	border-radius: 0.2rem;
	padding: 0.3rem;
	display:block;
	min-height:var(--box-bttn);
	line-height:initial!important;
	transition: all var(--transition-duration);
}
.box_bttn:hover, .box_bttn:focus, .box_bttn:active {
	background: linear-gradient(to bottom, rgb(250,250,250),rgb(220,220,220));
	border: 1px solid var(--main-color);
}
.bttn-grid{
	display:grid;
	grid-template-areas:'icon text';
	grid-template-columns: var(--box-bttn) auto;
	align-items:center;
	grid-gap:0.3rem;
	line-height:unset!important;
}
.bttn-i{
	grid-area:icon;
	justify-self:center;
	font-size:calc(var(--box-bttn) - 1rem);
}
img.bttn-i{
	height:calc(var(--box-bttn) - 0.6rem);
	width:calc(var(--box-bttn) - 0.6rem);
}
.bttn-i .fa-solid{
	vertical-align: middle;
}

.bttn-txt-area{grid-area:text;}
.bttn-txt{
	display:block;
	font-family:var(--barlow),sans-serif;
	font-size:initial;
}

.bttn-txt-fs-1{font-size:1.4rem;}
.bttn-txt-fs-2{font-size:1.75rem;}
.bttn-txt-fs-3{font-size:0.85rem;}

.bttn-txt-fb-t{font-weight:100;}
.bttn-txt-fb-el{font-weight:200;}
.bttn-txt-fb-l{font-weight:300;}
.bttn-txt-fb-n{font-weight:400;}
.bttn-txt-fb-m{font-weight:500;}
.bttn-txt-fb-b{font-weight:600;}
.bttn-txt-fb-sb{font-weight:700;}
.bttn-txt-fb-eb{font-weight:800;}
.bttn-txt-fb-bl{font-weight:900;}

.bttn-txt-color{color:var(--main-color);}

.box_bttn *{
	line-height:1.1;
}

@media screen and (max-width: 550px){
	.box_bttn{
		min-height:var(--box-bttn-mob);
	}
	.bttn-grid{
		grid-template-columns: var(--box-bttn-mob) auto;
	}
	img.bttn-i{
		height:calc(var(--box-bttn-mob) - 0.6rem);
		width:calc(var(--box-bttn-mob) - 0.6rem);
	}
	.bttn-i,
	.material-icons-outlined.bttn-i,
	.material-icons-round.bttn-i,
	.material-icons-two-tone.bttn-i,
	.material-icons-sharp.bttn-i{
		font-size:calc(var(--box-bttn-mob) - 0.6rem);
	}
}